add different browsers example

features/homepage.feature

@@ -1,6 +1,13 @@
 Feature: Playwright Home Page
 
-  Scenario: Check title
+  @chrome
+  Scenario: scenario for chromium
+    Given I am on Playwright home page
+    When I click link "Get started"
+    Then I see in title "Installation"
+
+  @WebKit
+  Scenario: scenario for webkit
     Given I am on Playwright home page
     When I click link "Get started"
     Then I see in title "Installation"

features/steps/fixtures.ts

@@ -1,11 +1,18 @@
 import { test as base, createBdd } from 'playwright-bdd';
 
 type Fixtures = {
-  // set types of your fixtures
+  filterBrowsers: void;
 };
 
 export const test = base.extend<Fixtures>({
-  // add your fixtures
+  filterBrowsers: [
+    async ({ $tags, defaultBrowserType }, use, testInfo) => {
+      if (defaultBrowserType === 'chromium' && !$tags.includes('@chrome')) testInfo.skip();
+      if (defaultBrowserType === 'webkit' && !$tags.includes('@WebKit')) testInfo.skip();
+      await use();
+    },
+    { auto: true },
+  ],
 });
 
 export const { Given, When, Then } = createBdd(test);

playwright.config.ts

@@ -11,10 +11,9 @@ export default defineConfig({
   reporter: [
     cucumberReporter('html', {
       outputFile: 'cucumber-report/index.html',
-      externalAttachments: true,
-      attachmentsBaseURL: 'http://127.0.0.1:8080/data',
     }),
     ['html', { open: 'never' }],
+    ['list'],
   ],
   use: {
     screenshot: 'on',
@@ -25,5 +24,9 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
   ],
 });