Пишемо автотести на базі 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 режим та затримку.

Блок коду beforeEach дозволяє налаштувати запис нетворку, який виглядає наступним чином:

>> 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

Дякую за увагу і сподіваюся, що ця стаття була корисною для Вас.

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті