Run e2e test by using Jest and playwright with TypeScript

The playwright is a compatible headless browser framework to puppeteer. And it is maintaining by Microsoft.

We can easy to run e2e test for multiple browsers.

Install

We need several libraries, once is a playwright core, and the other hand is jest preset for playwright.

$ yarn add -D jest jest-playwright-preset playwright ts-jest

Create files

And we need two config files and at least one test file.

The first config file is for Jest, another one is for playwright.

$ mkdir e2e
$ touch e2e/jest-playwright.config.js e2e/jest.config.js index.e2e.ts

e2e/jest-playwight.confg.js

Configure target server info. In this example, run react-script start command in local, and run serve build in CircleCI.

We can test the development application in local, and test the built application in CircleCI.

module.exports = {
  serverOptions: {
    command: process.env.CI ? 'npx serve build -p 3000' : 'BROWSER=none npm start',
    port: 3000,
    launchTimeout: 200000,
    debug: true,
  },
};

e2e/jest.config.js

Configure Jest testing environment. We need to use playwright preset and ts-jest to compile the test code written in TypeScript.

module.exports = {
    preset: 'jest-playwright-preset',
    testEnvironment: 'jsdom',
    moduleFileExtensions: [
      'ts',
      'js'
    ],
    "testMatch": ["/**/*.e2e.js", "/**/*.e2e.ts"],
    globals: {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    transform: {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
  };
  

e2e/index.e2e.ts

Finally, we can write a test code for E2E.

import {
  webkit,
  firefox,
  chromium,
  Browser,
  Page,
} from 'playwright';

const browserTypes = [chromium, firefox, webkit];

const shouldMatchOuterHTMLSnapshot = async (selector, page) => {
  const elementHandle = await page.$(selector);
  const jsHandle = await elementHandle.getProperty('outerHTML');
  const json = await jsHandle.jsonValue();
  expect(json).toMatchSnapshot();
};

describe.each([
  [chromium.name(), chromium],
  [firefox.name(), firefox],
  [webkit.name(), webkit],
])('test on %p', (_browserName, browserType) => {
  let browser: Browser
  let page: Page
  beforeAll(async () => {
    browser = await browserType.launch();
    const context = await browser.newContext();
    page = await context.newPage();
    await page.goto('http://localhost:3000');
  });

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

  it('should match snapshot [body]', async () => {
    await shouldMatchOuterHTMLSnapshot('[data-test="app.root"]', page);
  });

  it('should match snapshot', async () => {
    await shouldMatchOuterHTMLSnapshot('[data-test="login.form"]', page);
  });
});

Resources

• playwright: https://github.com/microsoft/playwright
• jest-playwright-preset: https://github.com/playwright-community/jest-playwright
• PlaywrightとJestでクロスブラウザテストを実装する: https://kimulaco.com/post/jest-playwright/