Долгое время основным инструментом для автоматизации тестирования был 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
Благодарю за внимание и надеюсь, что эта статья была полезной для Вас.
