长期以来,Selenium一直是测试自动化的主要工具。但是,目前市场上有一些不错的替代产品,例如Cypress,Puppeteer和Playwright。剧作家,我们将在本文中进行讨论。
Playwright是一个节点js测试自动化库,具有用于不同浏览器(Chromium,Firefox和WebKit)的单个API。由Microsoft开发。在我看来,Playwright的主要优势在于它与浏览器的紧密集成以及在Selenium无法访问的水平上与浏览器进行交互的能力。
开源产品Kanboard被部署为测试对象。
为了进行测试,我们将使用节点js,playwright,jest,jest-playwright-preset和jest-html-reporters。我们使用Playwright与浏览器进行交互。我们将Jest用作测试跑步者。需要Jest-html-reporters来生成HTML报告。
第一步是创建一个节点项目并安装所有必需的依赖项:
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进行了更改:
{
"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"
}
}
下一步是创建页面对象:
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),});
允许您配置无头模式和延迟。
该代码块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
使用默认值进行测试运行(无头假,sloMo 50,网络关闭)
NETWORK = 'on' npm run test
使用值无头测试运行,sloMo 50,联网
HEADLESS = 'true' npm run test
值无头测试,sloMo 50,联网关闭
运行测试后,将生成报告-jest_html_reporters.html
感谢您的关注,希望本文对您有所帮助。