[Тестирование IT-систем, JavaScript, Google Chrome] Автотесты на базе playwright и jest

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 4 месяца
Сообщений: 27286

news_bot ^® написал(а)
16-Ноя-2020 00:30

Цитировать

Долгое время основным инструментом для автоматизации тестирования был 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

Благодарю за внимание и надеюсь, что эта статья была полезной для Вас.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_testirovanie_itsistem (Тестирование IT-систем), #_javascript, #_google_chrome, #_testirovanie_vebprilozhenij (тестирование веб-приложений), #_playwright, #_avtomatizatsija_testirovanija (автоматизация тестирования), #_javascript, #_testirovanie_itsistem (
Тестирование IT-систем
), #_javascript, #_google_chrome

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 18-Июн 18:59
Часовой пояс: UTC + 5