Example for Jest and Playwright for users who don't use jest-playwright library

[tanvee38]

Firstly, thank you for this awesome tool! I am using a e2e test framework where I have Jest and Playwright installed separately. The jest-playwright example I can see from this repository is using jest-playwright package and jest-playwright-preset. With my set up, I am getting lots of errors while running the example test because of not having lots of global variables what jest-playwright package offers. Here is the error I am getting:

$ jest "./__tests__/sample.tests.jest-playwright.js"

 FAIL  __tests__/sample.tests.jest-playwright.js (10.07 s)
  ● Example root cause for jest and playwright › testim demo example

    **Global page is missing**

      at Object.forBeforeEachOwnGlobals (node_modules/@testim/root-cause-jest/lib/helpers.js:81:15)

  ● Example root cause for jest and playwright › testim demo example

    **TypeError: global.endTest is not a function**

      at Object.forAfterEachEndTestOwnGlobals (node_modules/@testim/root-cause-jest/lib/helpers.js:130:12)

  ● Example root cause for jest and playwright › wikipedia example fail

    **Global page is missing**

      at Object.forBeforeEachOwnGlobals (node_modules/@testim/root-cause-jest/lib/helpers.js:81:15)

  ● Example root cause for jest and playwright › wikipedia example fail

    TypeError: Cannot read property 'getProperty' of null

Could you please provide a simple example of using root cause where users like me use jest as test framework and playwright for browser automation but not using jest-playwright package? Thanks.

[Bnaya]

Hey @tanvee38 thank you for trying root cause!
Where and how do you create the page object?

The default jest integration assumes that the page is global,
But we do have helpers for when you launch the page differently, but it's not completely documented yet.

Anyhow, the integration will be much simple if you create/launch your pages from a single place that is shared among the tests.

[tanvee38]

Hi @Bnaya , thanks for your kind response and suggestion. I have a few test files where in every file I created page and browser object. You can say in my case the page object is local not in global scope. Kindly take a look at my sample test file:

const playwright = require('playwright');

describe(`UI Tests with Playwright`, () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await playwright["chromium"].launch({ headless: false, slowMo: 300 });

    page = await browser.newPage();
  
    await page.goto('https://www.athabascau.ca/');
  })
  
  test('sample test 1', async () => {
    const title = await page.$('#content-title');
  
    const titleText = await page.evaluate(title => title.textContent, title);
    
    expect(titleText).toBe("How AU Works Athabasca University");

    const howAUWorksLink = await page.$('.link-block.local-link');

    await Promise.all([
      page.waitForNavigation(),
      page.evaluate(howAUWorksLink => howAUWorksLink.click(), howAUWorksLink)
    ]);

    const formSubmitButton = await page.$('#submit');

    const formSubmitButtonText = await page.evaluate(formSubmitButton => formSubmitButton.textContent, formSubmitButton);

    expect(formSubmitButtonText).toBe("Submit");
  })

  test('sample test 2', async () => {
    const contentTitle = await page.$('#content-title');
  
    const contentTitleText = await page.evaluate(contentTitle => contentTitle.textContent, contentTitle);

    expect(contentTitleText).toBe('How AU Works');
  })

  afterAll(async () => {
    await browser.close();
  });
})

If possible could you kindly show a brief example of how I can use root cause with this set up? Thanks.

[Bnaya]

The simplest path I can suggest right now is to make the page global
global.page = await browser.newPage();
There's another option, I will elaborate on it later

[tanvee38]

Sounds good. Thanks @Bnaya !