node.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > node.js > Node.js Playwright

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 是如何工作的

在讲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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文