Playwright是一个Node.js库，它提供了跨浏览器自动化脚本的API。该库旨在解决现有自动化工具中的一些痛点，如浏览器安全性、可靠性和多浏览器支持。其中，它支持多种浏览器，包括 chromium、firefox、webkit，特别是对chromium更加友好。本篇文章将从多个方面详细分析playwright官网，为你揭开playwright的神秘面纱。
一、 环境搭建
既然要使用playwright，首先需要进行开发环境搭建。playwright的安装非常简单，只需在项目目录中使用npm或yarn安装playwright即可：
npm i playwright
如果不知道该选择哪个浏览器进行测试，playwright提供了一个叫做`playwright install`的命令行工具来安装所需浏览器。你还可以指定需要特定版本的浏览器。
npx playwright install
npx playwright install --browser=firefox
npx playwright install --channel=firefox-nightly
二、基本语法
至此，我们已经成功安装了playwright，接下来让我们来看一下playwright的基本语法。使用playwright测试网站不仅仅只是打开浏览器，还需要进行页面操作。下面我们来看一下如何使用playwright来打开谷歌，搜索内容并点击搜索结果：
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://google.com');
await page.fill('input[name="q"]', 'playwright');
await page.keyboard.press('Enter');
await page.waitForSelector('a[href^="https://github.com/microsoft/playwright"]');
await context.close();
await browser.close();
})();
三、内置的交互模拟
在测试中，需模拟用户在浏览器上的各种交互操作，如打开url，输入内容，点击按钮等。Playwright为我们提供了一套内置的交互操作API，方便我们快速进行测试。下面我们来看一下Playwright提供的一些API：
- page.click(selector[, options])：单击匹配选择器的元素。
- page.dblclick(selector[, options])：双击匹配选择器的元素。
- page.fill(selector, value[, options])：在匹配选择器的可编辑元素上设置值。
- page.focus(selector)：将焦点设置在匹配选择器的元素上。
- page.hover(selector[, options])：将鼠标悬停在匹配选择器的元素上。
四、截图和录像功能
测试过程中，有时需要保存测试过程记录，特别是当测试失败时，我们需要知道是哪个部分有问题，从而进行调试和修复。Playwright提供了截图和视频录制功能来帮助我们进行记录。这些功能可以通过BrowserContext设置进行开启。例如：
const { firefox } = require('playwright');
(async () => {
const browser = await firefox.launch({ headless: true });
const context = await browser.newContext({
recordVideo: {
dir: 'path/to/videos/',
},
viewport: { width: 640, height: 480 },
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await context.close();
await browser.close();
})();
五、使用WebSocket协议
使用WebSockets协议可以实现远程调试，从而更好地调试服务器中的代码。Plawright提供了通过WebSocket远程调试的功能，让你可以在你的本地机器上调试远程浏览器中运行的测试代码。下面我们来看一下如何使用WebSocket。
const { chromium } = require('playwright');
const http = require('http');
const WebSocket = require('ws');
(async () => {
const browser = await chromium.launch();
const httpServer = http.createServer((req, res) => {
res.end('Hello world!');
});
const wsServer = new WebSocket.Server({ server: httpServer });
wsServer.on('connection', (socket) => {
socket.on('message', (response) => {
console.log('received', response); // prints 'ping'
socket.send('pong');
});
});
await httpServer.listen(0);
const context = await browser.newContext({ devtools: true });
const page = await context.newPage();
const url = `ws://localhost:${httpServer.address().port}`;
await page.goto(url);
const message = await page.evaluate(
({ url }) => new Promise((resolve) => {
const ws = new WebSocket(url);
ws.addEventListener('open', () => ws.send('ping'));
ws.addEventListener('message', ({ data }) => {
console.log('received', data); // prints 'pong'
resolve(data);
ws.close();
});
}),
{ url }
);
console.log('result', message);
await browser.close();
})();
六、使用playwright-test-runner进行自动化测试
Playwright Test Runner是Playwright框架下的单元测试框架，专为使用Playwright进行测试设计。该测试框架在Playwright的核心上叠加了一层易于使用的工具集，帮助用户更方便地管理测试、产生测试报告和记录测试状态。下面，我们以一个简单的搜索测试用例为例，展示如何使用Playwright Test Runner进行测试：
const { test, expect } = require('@playwright/test');
test.describe('Playwright Test Runner', () => {
test('should work', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.fill('input[name="search"]', 'test');
await page.press('input[name="search"]', 'Enter');
await page.waitForSelector('.results-wrapper');
const title = await page.title();
expect(title).toBe('Search Results · Playwright');
});
});
总结
以上就是对Playwright官网从多个方面详细介绍，包括环境搭建、基本语法、内置的交互模拟、截图和录像功能、使用WebSocket协议、使用playwright-test-runner进行自动化测试等方面。Playwright是一个非常强大的工具，具有使用方便、支持多种浏览器和可靠性高的特点，它在实际的测试和开发中也得到了广泛应用。希望此篇文章可以让你更好地理解和使用Playwright。
原创文章，作者：AHCDY，如若转载，请注明出处：https://www.506064.com/n/369186.html
微信扫一扫 
支付宝扫一扫 