Автотесты на базе playwright и jest

Долгое время основным инструментом для автоматизации тестирования был Selenium. Однако в настоящее время на рынке представлено несколько достойных альтернатив, таких как Cypress, Puppeteer и Playwright. Playwright мы и рассмотрим в данной статье.

Playwright — это node js библиотека для автоматизации тестирования с единым API для различных браузеров (Chromium, Firefox and WebKit). Разработанная компанией Microsoft. По моему мнению основным преимуществом Playwright является его тесная интерграция с браузерами и возможность взаимодействовать с браузерами на недоступном для Selenium уровне.

В качестве объекта тестирования развернут open source продукт – Kanboard.

Для тестирования будем использовать node js, playwright, jest, jest-playwright-preset и jest-html-reporters. Playwright используем для взаимодействия с браузерами. Jest используем, как тест ранер. Jest-html-reporters нужен для генерации HTML репорта.

Первым шагом создадим node проект и установим все необходимые зависимости:
npm init
npm i -D playwright
npm install --save-dev jest
npm install -D jest-playwright-preset
npm install jest-html-reporters --save-dev

После выполнения этих команд мы получаем package.json и node_modules с необходимыми зависимостями. Для того, чтобы настроить репорт и фолдер с тестами вносим изменения в package.json для jest:

{   "name": "kb-playwright-tests",   "version": "1.0.0",   "description": "An automation test framework which is based on playwright.",   "main": "index.js",   "scripts": {     "test": "jest"   },   "author": "",   "license": "ISC",   "jest": {     "testMatch": [       "**/tests/**/*.[jt]s?(x)",       "**/?(*.)+(spec|test).[jt]s?(x)"     ],     "reporters": [       "default",       "jest-html-reporters"     ]   },   "devDependencies": {     "jest": "^26.6.3",     "jest-html-reporters": "^2.1.0",     "jest-playwright-preset": "^1.4.0",     "playwright": "^1.6.1"   } }

Следующим шагом создаем page objects:

const { DashboardPage } = require("./DashboardPage"); var config = require('../config');  class SignInPage {   constructor(page) {     this.page = page;   }    async openSignInPage() {     await this.page.goto(config.web.url);   }    async signInAs(user) {     await this.page.fill("css=#form-username", user.username);     await this.page.fill("css=#form-password", user.password);     await this.page.click("css=button[type='submit']");     return new DashboardPage(this.page);   } } module.exports = { SignInPage };

 class DashboardPage {   constructor(page) {     this.page = page;   } } module.exports = { DashboardPage };

Тест будет выглядеть следующим образом:

const { chromium } = require("playwright"); const { SignInPage } = require("../pageobjectmodels/SignInPage"); const { roles } = require("../enums/roles"); const assert = require("assert"); var config = require("../config"); let browser; let page;  beforeAll(async () => {   console.log("headless : " + config.web.headless);   console.log("sloMo : " + config.web.sloMo);   browser = await chromium.launch({     headless: config.web.headless == "true",     slowMo: parseInt(config.web.sloMo, 10),   }); }); afterAll(async () => {   await browser.close(); }); beforeEach(async () => {   page = await browser.newPage();   if (config.web.networkSubscription) {     page.on("request", (request) =>       console.log(">>", request.method(), request.url())     );     page.on("response", (response) =>       console.log("<<", response.status(), response.url())     );   } }); afterEach(async () => {   await page.close(); });  test("An admin is able to see a dashboard", async () => {   const signInPage = new SignInPage(page);   await signInPage.openSignInPage();   const dashboardPage = await signInPage.signInAs(roles.ADMIN);   const dashboard = await dashboardPage.page.$("#dashboard");   assert(dashboard); });

Строка browser = await chromium.launch({headless: config.web.headless == "true",slowMo: parseInt(config.web.sloMo, 10),}); позволяет настроить headless режим и задержку.

Блок кода beforeEach позволяет настроить запись network, который выглядит следующим образом:

>> GET http://localhost/kanboard/ << 302 http://localhost/kanboard/ >> GET http://localhost/kanboard/?controller=AuthController&action=login << 200 http://localhost/kanboard/?controller=AuthController&action=login >> GET http://localhost/kanboard/assets/css/vendor.min.css?1576454976 >> GET http://localhost/kanboard/assets/css/app.min.css?1576454976 >> GET http://localhost/kanboard/assets/js/vendor.min.js?1576454976 ....

Для того чтобы иметь возможность управлять этими параметрами добавляем config.js

var config = {}; config.web = {};  config.web.url = process.env.URL || "http://localhost/kanboard/"; config.web.headless = process.env.HEADLESS || false; config.web.sloMo = process.env.SLOMO || 50; config.web.networkSubscription = process.env.NETWORK;  module.exports = config;

Теперь для запуска тестов можно использовать следующие команды:

npm run test прогон тестов с значениями по умолчанию (Headless false, sloMo 50, networking off)

NETWORK = 'on' npm run test прогон тестов с значениями Headless false, sloMo 50, networking on

HEADLESS = 'true' npm run test прогон тестов с значениями Headless true, sloMo 50, networking off

После прогона тестов будет сгенерирован репорт – jest_html_reporters.html

Благодарю за внимание и надеюсь, что эта статья была полезной для Вас.