Start UI tests with Playwright + Jest + Typescript

$ npm init -y
$ npm install — save-dev playwright
$ npm install — save-dev typescript
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"strict": true,
"module": "commonjs",
"noEmit": true
},
"include": ["src"]
}
$ npm install — save-dev jest
$ npm install — save-dev ts-jest @types/jest
$ npm install — save-dev jest-playwright-preset
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,
}
}
},
};
"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"
}
$ npm test
$ npm test src/specs/login.test.js
$ npm i — save-dev jest-junit-reporter
reporters: [
"default",
[
"jest-junit",
{
classNameTemplate: (vars) => {
return vars.classname.toUpperCase();
},
"outputDirectory": "reports",
"outputName": "test_report.xml"
}
]
]
jest.setTimeout(1000000);
{
"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"
}
]
}
<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
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();
});
});

--

--

--

Techie | Traveler | Writer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Pass Props Between React Components To Control Modals

Kickstart your next project with this Starter Kit

Send Email Campaign using Node.Js and Mailchimp API

Integrating Sentry releases with React using BitBucket pipelines

My First React Project

Node.js: Inversion of Control

Features of Angular 8

Loading Vue inside Vue

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dilshani Subasinghe

Dilshani Subasinghe

Techie | Traveler | Writer

More from Medium

Angular JS Parent-Child Controller Communication and Best Practice for usage

How to write a test for network requests in React components?

Yes, managed state can be as simple as local state.

Server-Side Events as Simple Alternative to WebSockets