Dilshani Subasinghe

Jan 15, 2021

3 min read

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

2. Install Playwright

3. Choosing Typescript as the scripting language

Typescript config in “

{
"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

As we using typescript in the project

For configuration between jest & playwright

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

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

"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:

For running a specific test file give its file path

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

Add reporter config in “

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.setTimeout(1000000);

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

{
"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.

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

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 :)