[Question] Any way to pass playwright.config.js configuration to custom context, page worker fixtures?

[radekBednarik]

Hello,
is it possible to pass configuration from playwright.config.js to custom context and page worker fixtures? Or do I have to manually specify properties of those in the fixture definition (which is a bit cumbersome?).

The use case behind this is to have the page loaded only once for tests, since there is no need to create context, page for each test.

Code example:

"use strict";

const base = require("@playwright/test");
const {
  Homepage,
} = require("../Mocha_Playwright_Chai/pageobjects/homepage.page");
const {
  CookieManager,
} = require("../Mocha_Playwright_Chai/pageobjects/cookieManager.page");

const test = base.test.extend({
  myContext: [
    async ({ browser }, use) => {
      const myContext = await browser.newContext();
      await use(myContext);
    },
    { scope: "worker", auto: true },
  ],
  myPage: [
    async ({ myContext }, use) => {
      const myPage = await myContext.newPage();
      await use(myPage);
    },
    { scope: "worker", auto: true },
  ],

  homepage: [
    async ({ myContext, myPage }, use) => {
      const homepage = new Homepage(myContext, myPage);
      await use(homepage);
    },
    { scope: "worker", auto: true },
  ],
  cookieManager: [
    async ({ myContext, myPage }, use) => {
      const cookieManager = new CookieManager(myContext, myPage);
      await use(cookieManager);
    },
    { scope: "worker", auto: true },
  ],
});

test.beforeAll(async ({ homepage, cookieManager }) => {
  await homepage.visit();
  await cookieManager.clickBttnAcceptConsents();
});

test("_ga cookie is stored", async ({ homepage }) => {
  test
    .expect(await homepage.isCookieStored("_ga", "https://www.tesena.com"))
    .toBe(true);
});

test("page title constains 'Tesena'", async ({ homepage }) => {
  const pageTitle = await homepage.page.title();
  test.expect(pageTitle).toContain("Tesena");
});

[aslushnikov]

is it possible to pass configuration from playwright.config.js to custom context and page worker fixtures? Or do I have to manually specify properties of those in the fixture definition (which is a bit cumbersome?).

@radekBednarik I did not follow this. Can you please explain in more details?

[radekBednarik]

@aslushnikov hello, ofc.
I have playwright.config.js file which contains some global settings for browser and context. And then it contains also projects configurations for specific test setups.

Now, let's say, that I want to do two tests on the page. These tests are not dependent whatsoever, and I want therefore use beforeAll hook to set the state (open context, page, goto url) and then do these tests WITHOUT unnecessary repeating those steps twice.

Default context and page fixtures will not help me, since they cannot be used in beforeAll hook.

Since I do not know how to override their scope, I created my custom context and page fixtures with worker scope.

However, they do not use the settings from global configuration file. Is it maybe due to naming , because context and page are reserved and I cannot redefine the fixture?

[dgozman]

@radekBednarik Thank you for the explanation, this makes sense.

Your custom fixtures will not pick up context options because these options are used manually in the context fixture. However, you can easily have your own options in the configuration file like this:

const test = base.test.extend({
  myContextOptions: [ {}, { scope: "worker" } ],
  myContext: [
    async ({ browser, myContextOptions }, use) => {
      const myContext = await browser.newContext(myContextOptions);
      await use(myContext);
    },
    { scope: "worker", auto: true },
  ],
});

Then set myContextOptions in the configuration file:

module.exports = {
  use: {
    myContextOptions: {
      // Any context options work here, since this object is passed directly to myContext fixture
      hasTouch: true,
      ignoreHTTPSErrors: true,
    },
  },
};

Does this help?

[radekBednarik]

@dgozman thank you, yes, that is, what I needed. I would suggest, that maybe this should be mentioned in the documentation? Thanks again.

[dgozman]

@dgozman thank you, yes, that is, what I needed. I would suggest, that maybe this should be mentioned in the documentation? Thanks again.

I am glad this helps! We are working on the documentation indeed 😄

[kshrestha99]

Your custom fixtures will not pick up context options because these options are used manually in the context fixture. However, you can easily have your own options in the configuration file like this:

const test = base.test.extend({
  myContextOptions: [ {}, { scope: "worker" } ],
  myContext: [
    async ({ browser, myContextOptions }, use) => {
      const myContext = await browser.newContext(myContextOptions);
      await use(myContext);
    },
    { scope: "worker", auto: true },
  ],
});

Then set myContextOptions in the configuration file:

module.exports = {
  use: {
    myContextOptions: {
      // Any context options work here, since this object is passed directly to myContext fixture
      hasTouch: true,
      ignoreHTTPSErrors: true,
    },
  },
};

@dgozman
I am sorry but I could not understand your explanation...100% due to my lack of knowledge of Playwright yet (hoping to improve heavily soon)
The "const test = base.test.extend({...." part, is this in the playwright config file or in the spec file?

Would you please post a simple config file and spec file to demonstrate how I can have "page" in beforeAll that takes all the config values from the config file? This will be much appreciated!