Start UI tests with Playwright + Jest + Typescript

Playwright is easy to install and start to work with. Just have to create a fresh project and install the playwright as a dependency.

1. Create a new project

$ npm init -y

2. Install Playwright

$ npm install — save-dev playwright

3. Choosing Typescript as the scripting language

$ npm install — save-dev typescript

Typescript config in “tsconfig.json“

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "module": "commonjs",
    "noEmit": true
  },
  "include": ["src"]
}

** As per config, we should add all tests & other classes inside of the “src/” folder

4. Add Jest as the test runner

$ npm install — save-dev jest

As we using typescript in the project

$ npm install — save-dev ts-jest @types/jest

For configuration between jest & playwright

$ npm install — save-dev jest-playwright-preset

5. Set up Jest Config & test config with package.json

jest.config.js

module.exports = {
    preset: "jest-playwright-preset",
    testMatch: ["**/__tests__/**/*.+(ts|js)", "**/?(*.)+(spec|test).+(ts|js)"],
    transform: {
      "^.+\\.(ts)$": "ts-jest",
    },
    testTimeout: 20000,
    testEnvironmentOptions: {
      "jest-playwright": {
       browsers: [ "chromium", "firefox"],
        launchOptions: {
        //headless: false,
       // slowMo: 600,
        }
      }
    },
  };

• preset — Integration with jest & playwright
• testMatch — spec pattern that need to be run
• transform — typescript test compatible with jest
• testTimeout — global test timeout
• testEnvironmentOptions — test specific more configurations [browsers — Multiple browsers that tests should be running in, launchOptions — browser launch options. can use to make tests headless and slow down test progress] More configs: https://jestjs.io/docs/en/configuration

package.json

"scripts": {
    "test": "jest --detectOpenHandles",
    "test.watch": "jest --watchAll"
  },
  "devDependencies": {
    "@types/jest": "^26.0.19",
    "jest": "^26.6.3",
    "jest-junit": "^12.0.0",
    "jest-playwright-preset": "^1.4.3",
    "playwright": "^1.7.1",
    "ts-jest": "^26.4.4",
    "typescript": "^4.1.3"
  }

• scripts — Define your testing scripts to run with “npm“

With this config tests can be run as:

$ npm test

For running a specific test file give its file path

$ npm test src/specs/login.test.js

6. Add Junit reporter for framework

Integrated jest JUnit reporter to generate xml report. There are many other reporters available to integrate with jest for better reporting: https://github.com/jest-community/awesome-jest#reporters

$ npm i — save-dev jest-junit-reporter

Add reporter config in “jest.config.js“

reporters: [
      "default",
        [
          "jest-junit",
           {
            classNameTemplate: (vars) => {
              return vars.classname.toUpperCase();
            },
            "outputDirectory": "reports",
            "outputName": "test_report.xml"
          }
        ]
    ]

• jest-junit — Define test report configs
• outputDirectory — Define location to create reports
• outputName — Test report name

Extra — Debug settings with vscode IDE

While debugging tests will be timeout with 10s default timeout. To avoid that, can have specific configs to define debug settings in jest.

1. create debug settings file jest.debug-setup.js

jest.setTimeout(1000000);

2. Point debug setup file through vscode code settings (.vscode > launch.json)

{
    "version": "0.2.0",
    "configurations": [
    {
        "name": "Debug Jest Tests",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/node_modules/.bin/jest",
        "args": ["--runInBand", "--setupFilesAfterEnv='${workspaceFolder}/jest.debug-setup.js'"],
        "windows": {
          "program": "${workspaceFolder}/node_modules/jest/bin/jest"
        },
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }
    ]
  }

— setupFilesAfterEnv use this param to point debug settings file

Project Structure

<Project_Name>
   |__ src
       |__ specs  <Test cases>
       |__ models <For handling page objects>
       |__ helper <Supporting classes>
       |__ enums <Constants used for project>
   |__ report
   |__ config.json
   |__ jest.config.js
   |__ jest.debug-setup.js
   |__ package.json
   |__ tsconfig.json

Sample test case

Jest provides global test objects Page, BrowserContext, Browser etc. Hence created a global test file to manage common objects.

globalTypes.ts

import { Browser, Page } from "playwright";
declare global {
  const browser: Browser;
  const page: Page;
  const browserName: string;
}

google.search.test.ts

describe(`Google Test Case`, () => {
  it("returns successful search", async () => {
    await page.goto("https://www.google.com/");
    // Click input[aria-label="Search"]
    await page.click('input[aria-label="Search"]');
    // Fill input[aria-label="Search"]
    await page.fill('input[aria-label="Search"]', "tesla");
    // Press Enter
    await page.press('input[aria-label="Search"]', "Enter");
    // Close page
    await page.close();
  });
});

Jest assertions can be used for validate page objects. More info: https://jestjs.io/docs/en/using-matchers

Thats it! Its’ time to explore more on playwright on your own. Happy coding :)