Node.js中Playwright库使用指南

Playwright是微软开源的一个用于Web测试和自动化的Node.js库,通过一个API,可以自动化运行在Chrome,Edge、Firefox和Safari等浏览器上,下面我们就来看看它的具体使用吧

概要

Playwright 是一个用于做自动化测试的开源框架，它允许你通过代码去自动化操作浏览器，它还可以跨浏览器测试，包括Chrome，Edge、Firefox和Safari等，功能十分强大。

Playwright 是什么

Playwright 是微软开源的一个用于 Web 测试和自动化的Node.js 库，通过一个 API，可以自动化运行在Chrome，Edge、Firefox和Safari等浏览器上。开发人员可以使用这些API去创建一个新的浏览器页面，导航URL到对应的页面，然后与页面上的元素进行交互。

Playwright默认使用无头浏览器，可以通过命令行来启动无头浏览器，它不显示UI。

为什么建议你使用Playwright 来做自动化测试

Playwright 在跨浏览器、跨平台和跨语言方面的能力非常突出，

为什么建议你使用 Playwright ？有以下几个原因：

兼容性非常强大。 Playwright 可以在Windows、Linux 和 macOS 上使用，所有的主流浏览器(Chromium、 WebKit、 Firefox) 都支持。并且，它还支持多种编程语言，比如Java、 JavaScript、 Python 和 .NET ，有统一的API来让你调用。稳定性非常强大。 Playwright会自动等待元素出现，并可操作，从而可以减少不稳定性。它的 web 优先断言和重试逻辑有助于确保测试的可靠性，而不需要手动设置超时。完全测试隔离。 每个测试都是在单独的浏览器上下文中运行，Playwright会模拟一个全新的浏览器配置文件，这样可以确保每个测试之间不会互相干扰。您可以保存身份验证状态，避免重复登录，同时保持测试的独立性。高级测试场景。 Playwright允许你在多个选项卡、用户或上下文的复杂工作流中测试，并且可以让你操作真实的浏览器输入和操作DOM元素，模仿真实的用户操作。丰富的调试工具。 Playwright Inspector、Codegen和Trace Viewer这些工具，方便你快速地检查元素和调试。还提供了视频、屏幕快照和 DOM 快照等方式，让你可以全面的了解测试全过程。

Playwright 是如何工作的

在讲Playwright的工作原理前，我们可以先看下Selenium是如何工作的。Selenium会将每个命令作为独立的 HTTP请求发送，然后接收对应的JSON 响应，你的每个操作，比如打开浏览器窗口、单击元素或向输入框输入文本都会作为独立的 HTTP 请求发送。

而这种做法，往往意味着，我们必须等待更长的时间才能得到响应，并增加了出错的可能性。

而Playwright是怎么运行的呢？Playwright 没有通过单独的 WebSocket 与每个驱动程序进行通信。而是依赖于一个单独的 WebSocket 连接与所有驱动程序进行通信，直到测试完成。这允许在单个连接上快速发送命令，从而减少出错。

该怎么开始使用Playwright

1. 安装 Playwright

有2种方法可以安装Playwright

使用VS Code插件

在VS Code的扩展管理器中搜索 Playwright。然后，安装正式的 Playwright Test for VS Code插件，如下图所示:

插件安装好后，再使用命令安装Playwright：

使用 npm 安装

npm init playwright@latest

2. 开始你的第一个测试用例

现在，我们可以使用Playwright TypeScript编写第一个测试用例，我们可以使用淘宝网来做案例展示下如何写Playwright。

测试场景1： 验证淘宝网的title中是不是有「淘宝」两个字

import { test, expect } from '@playwright/test';test('title 是否正常', async ({ page }) => {  await page.goto('https://www.taobao.com/');  await expect(page).toHaveTitle('淘宝');});

在这个场景中，page.goto () 可以实现导航到淘宝网，然后通过Expect() 断言和 toHaveTitle() 方法来验证页面的标题是否与文本「淘宝」匹配。

测试场景2： 验证淘宝的Logo是否显示正常

test('logo 是否正常', async ({ page }) => {  await page.goto('https://www.taobao.com/');  await expect(todoPage.locator('.logo-bd').toBeVisible());

在这个场景中，todoPage.locator() 可以选中页面Class元素，并自动等待元素，toBeVisible可以判断元素是否出现。

测试场景3： 验证登录淘宝网时，页面上的「淘宝直播」几个字是否显示正常。

test('淘宝直播显示正常', async ({ page }) => {  await page.goto('https://www.taobao.com/');  await expect(page.getByText('淘宝直播')).toBeVisible();});

在这个场景中，todoPage.getByText() 可以在页面中寻找「淘宝直播」几个字，toBeVisible可以判断「淘宝直播」是否出现。

3. 执行测试

可以执行下面这个命令来执行测试：

npx playwright test

然后在命令行中，就可以看到运行步骤和运行结果

如果你想看到运行的全过程，可以使用下面这个命令：

npx playwright test --ui

4. 配置playwright

为了更好地执行我们的测试，我们可以在 playwright.config.ts 文件中，对playwright进行配置。

import { defineConfig, devices } from '@playwright/test';    export default defineConfig({      // 设置默认运行的测试文件目录，默认会运行tests目录下的测试用例    testDir: 'tests',        // 设置是否并行运行测试用例    fullyParallel: true,        // 如果有任何测试被标记为 test.only，是否需要带着错误退出。     forbidOnly: !!process.env.CI,        // 重试次数      retries: process.env.CI ? 2 : 0,        // 用于并行化测试的并发工作进程的最大数量      workers: process.env.CI ? 1 : undefined,        // Reporter to use      reporter: 'html',        use: {          // 默认运行的基础Url        baseURL: 'http://127.0.0.1:3000',          // 当重试失败用例时，收集日志        trace: 'on-first-retry',      },      // 浏览器配置      projects: [          {              name: 'chromium',              use: { ...devices['Desktop Chrome'] },          },      ],      // 在开始测试之前运行本地开发服务器。      webServer: {              command: 'npm run start',              url: 'http://127.0.0.1:3000',              reuseExistingServer: !process.env.CI,          },      });

更多详细的配置，大家可以移步这里 Test configuration