Playwright使用小记

Playwright是微软开源的一个Web自动化测试的开源工具，目前版本是 1.12.3。

官网：https://playwright.dev/

github：https://github.com/microsoft/playwright

支持所有的主流的现代浏览器：Google Chrome 和 Microsoft Edge (内核均为 Chromium), Apple Safari (内核 WebKit) 及 Mozilla Firefox

本文简单记录使用方法！

1、安装

新建一个目录，如 playwright-demo，然后进入目录，执行命令：

npm i -D playwright

此时会在当前目录生成 node_modules 和 package-lock.json，包含了playwright 的文件和依赖文件以及依赖信息。

2、安装测试包

默认没有拉取 playwright 的测试依赖包，执行下面命令安装依赖。因为录制的脚本默认都是测试文件，当然，也可以生成JavaScript或Python风格代码，然后直接用npm或python执行。

npm i -D @playwright/test

3、录制一个代码尝试

做个简单的录制测试吧，执行命令：

npx playwright codegen https://playwright.dev

codegen 命令会以隐私模式打开默认浏览器（可以具体指定哪个浏览器），进入playwright官网，录制页面上的操作，并在Inspector窗口显示当前操作录制后的代码细节。

const { test, expect } = require('@playwright/test');
test('test', async ({ page }) => {
  // Go to https://playwright.dev/
  await page.goto('https://playwright.dev/');
  // Click text=Get started
  await page.click('text=Get started');
  expect(page.url()).toBe('https://playwright.dev/docs/intro');
  // Click text=InstallationUsageFirst scriptRecord scriptsTypeScript supportSystem requirements >> a
  await page.click('text=InstallationUsageFirst scriptRecord scriptsTypeScript supportSystem requirements >> a');
  expect(page.url()).toBe('https://playwright.dev/docs/intro#installation');
});

Inspector 同时支持多种语言格式/风格的脚本输出（Playwright Test/Java/JS/Python/Python Async/C#）：

点击“复制”按钮就可以将JavaScript脚本拷贝出来（这里采用的脚本输出类型是Playwright Test）。

看看生成的代码，基本上就是两类操作：playwright封装好的各种浏览器对象（如page，browser等）；页面DOM的各种selector操作。

4、运行录制的脚本

将拷贝的脚本保存为test.js，然后开始运行（--headed是以UI方式进行测试，对应的默认的是headless无UI测试）：

npx playwright test --headed

能看到脚本会自动启动浏览器，并进入到 https://playwright.dev/ 网站，然后再点击Get started按钮进入github网站。

如果生成的JS格式，可以直接用npm test.js 运行。

5、应用场景

5.1 Web前端自动化测试，自动化测试都是采用headless模式后台运行的。

5.2 RPA系统，可以将自动操作业务录制下来，然后针对录制的脚本修改，进行业务自动完成，可以完成一个基本功能的RPA所需的功能。

6、其他

Playwright提供了UI测试所需的完整的对象封装，支持等待，弹出窗口捕获，文字及鼠标输入，文件下载，事件捕获及响应等等，详情可以参考在线文档：https://playwright.dev/docs/why-playwright，通过这些API可以更精细的控制UI测试的各个方面。