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