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

RxJs for beginners #1 Observable

Todolist- Typescript

Play time with D3JS, SpringBoot and MongoDB

Today we try to know about some interesting javaScript subject

LeetCode 1778: Shortest Path in a Hidden Grid

NodeJS for non Javascript developer : Part 2

Agrippa 1.4 (the React CLI) is Out

Sword hitbox

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

React & TypeScript: TS2345: Argument of type ‘null’ is not assignable to parameter of type…

Redux- Toolkit

Running asynchronous redux-saga tests

Redux is a right tool for your next project?