Node.js中Playwright库使用指南

概要

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

以上，就是关于Playwright的初步使用指南，大家有兴趣的，可以移步Playwright官网进行更多学习 playwright

到此这篇关于Node.js中Playwright库使用指南的文章就介绍到这了,更多相关Node.js Playwright内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论