[QUESTION] how do I properly configure with it,jestPlaywrightConfig()..

[onno-amsterdam]

I'm trying to pass jetPlaywrightConfig in a test, however I don't seem to get it to work.

This is my test:

import { JestPlaywrightConfig } from 'jest-playwright-preset';

describe('TEST 001', () => {
     const config: JestPlaywrightConfig = { 
                devices: ['iPhone 11'], 
                contextOptions: { locale: 'nl-NL' }, 
                exitOnPageError: true,  // required
                browsers: ['chromium'], // required
                collectCoverage: false, // required
      }

      // without the required I get a property missing error
    
     it.jestPlaywrightConfig(config, 'WITH CONFIG', async () => {
             await page.goto('http://google.com');
             await page.waitForTimeout(10000);
     }
}

Expected: the test launches in a browser sized to iPhone 11 with nl-NL locale.
Actual: when I run the test I see a browser open, then a second. Both have the default size. The test is executed inside the first browser.

This is my jest.config.js:

module.exports = {
    verbose: true,
    preset: 'jest-playwright-preset',
    transform: {
        '^.+\\.ts$': 'ts-jest',
    },
    testTimeout: 60000,
    testRunner: 'jasmine2',
    globalSetup: './globalSetup.js',
    setupFilesAfterEnv: [
        "jest-allure/dist/setup"
    ],
    testEnvironmentOptions: {
        'jest-playwright': {
            launchOptions: {
                headless: false
            }
        }
    },
}

When I put the device and locale option inside the jest.config then I see the test run properly in a iPhone 11 sized browser.

Am I missing something in the way I use it.jestPlaywrightConfig()? Thank you.

[mmarkelov]

@onno-amsterdam sorry for late response. I just find out some problems with this logic. I'm working on it, so it will be fixed in next release.

[onno-amsterdam]

@mmarkelov no worries. Thank you for fixing it!

[mmarkelov]

@onno-amsterdam I just released new version 1.4.4. So it should be fine.
Also there are some comments on it:

import { JestPlaywrightConfig } from 'jest-playwright-preset';

describe('TEST 001', () => {
     const config: JestPlaywrightConfig = { 
                // For jestPlaywrightConfig function you should define device with this property.
                device: 'iPhone 11', 
                contextOptions: { locale: 'nl-NL' }, 
                // I made this options optional
                // exitOnPageError: true,  // required
                // browsers: ['chromium'], // required
                // collectCoverage: false, // required
      }
    
     it.jestPlaywrightConfig(config, 'WITH CONFIG', async ({ page }) => {
             // Also you need to use page passing from callback options, otherwise it will be used global one
             await page.goto('http://google.com');
             await page.waitForTimeout(10000);
     }
}

Also I added some extra information about this in Readme.

I just hope that it will help. If you will have troubles with it - fill free to open new issue or reopen this one.

Thanks!

[onno-amsterdam]

@mmarkelov awesome, thank you!

[ychaudhari]

@mmarkelov Is it possible to use a different launchOption with this method? I'm using playwright 1.8.0.
I want to run a particular test in headful mode but rest of the suite in headless mode, I tried following

const headfulConfig = {
  launchOptions: {
    headless: false,
  },
};
describe('Test', () => {
  let landingPage: LandingPage;
  beforeEach(async () => {
    // steps to navigate
  });
  it.jestPlaywrightConfig(headfulConfig, 'that uses headful config', async () => {
    // test steps and assertion
  });
});

However,
test still picks up headless config from jest.config.ts file and runs the test in headless mode

import type { Config } from '@jest/types';
export default async (): Promise<Config.InitialOptions> => {
  return {
    verbose: true,
    testEnvironmentOptions: {
      'jest-playwright': {
        browsers: ['chromium'],
        launchOptions: {
          headless: true,
        },
      },
    },
  };
};

Is it possible to have a different launchOption with this method? or is the browser already lauched by the time it reaches to the test (i.e. 'it')
also,
is there a way to apply separate config to describe/beforeEach blocks?

[mmarkelov]

@ychaudhari it should be ok in your case. The only thing that you should use provided page instance, otherwise it will tests global instance:

const headfulConfig = {
  launchOptions: {
    headless: false,
  },
};
describe('Test', () => {
  let landingPage: LandingPage;
  beforeEach(async () => {
    // steps to navigate
  });
  // use page from arguments
  it.jestPlaywrightConfig(headfulConfig, 'that uses headful config', async ({ page }) => {
    // test steps and assertion
  });
});

Also you can try to use jestPlaywrightDebug method. It will run your test with this params:

launchOptions: {
    headless: false,
    devtools: true,
},

it.jestPlaywrightDebug('that uses debug config', async ({ page }) => {
    // test steps and assertion
});