Is it possible to apply a test.use() for a particular test

[NikkTod]

For example I want one of the test in a feature file to be executed with diffeent screen size, so in playwright I would apply:

test.use({viewport: {width: 800, height: 600}})

How would we do it with playwright-bdd?

[vitalets]

Let me think about it

[vitalets]

Btw, in Playwright if you call test.use({ viewport: { width: 800, height: 600 }}) somewhere in the file -> all tests in that file will use that viewport. For example:

test("test 1", async ({ page }) => { ... });

test.use({ viewport: { width: 800, height: 600 }});

test("test 2", async ({ page }) => { ... });

Both test 1 and test 2 will have viewport 800x600.

To execute one test in different viewport we could use fixtures-overrides:

const test = base.extend({
  viewport: async ({ viewport }, use, testInfo) => {
    if (testInfo.title.includes('(800x600)')) {
      viewport = { width: 800, height: 600 };
    }
    await use(viewport);
  }
});

test("test 1", async ({ page }) => { ... });
test("test 2 (800x600)", async ({ page }) => { ... });

Here only test 2 will have viewport 800x600.

With playwright-bdd we can use exactly the same approach with fixtures overrides. For example in fixtures.ts:

import { test as base } from 'playwright-bdd';

export const test = base.extend({
  viewport: async ({ viewport }, use, testInfo) => {
    if (testInfo.title.includes('(800x600)')) { // <- can also use testInfo.titlePath to apply 800x600 to whole feature
      viewport = { width: 800, height: 600 };
    }
    await use(viewport)
  }
});

And then in config:

const testDir = defineBddConfig({
  importTestFrom: 'fixtures.ts',
  // ...
});

@NikkTod could you check and let me know does it works for you?

Note:
Instead of checking testInfo.title it would be more accurate to stick to test tags - this is how cucumber tagged hooks work. While #8 is not ready, I'm thinking about providing custom $tags fixture with all tags defined in feature file for particular test. In that case we can set tags in feature file and then use it in fixtures:

Feature: Playwright site
    
    @tablet
    Scenario: Check title
        Given I open url "https://playwright.dev"
        When I click link "Get started"
        Then I see in title "Playwright"

fixtures.ts:

import { test as base } from 'playwright-bdd';

export const test = base.extend({
  viewport: async ({ viewport, $tags }, use) => {
    if ($tags.includes('@tablet')) {
      viewport = { width: 800, height: 600 };
    }
    await use(viewport)
  }
});

[NikkTod]

@vitalets actually you are right, I kind of misslead you.

Good example on the feature override, I actually created for me a new project within the playwright.config file, but I also checked your suggestion and it is working as expected, thank you I will close that ticket.

I very much like your suggestion for custum tags, looking forward to see it implemented, as I think it will help us a lot.

[vitalets]

You are welcome :)

[vitalets]

Added this question to FAQ.