Playwright Nodejs 自动化测试工具

官网地址

playwright.dev/docs/api/cl...

安装

通过使用 npm 或 yarn 安装 Playwright 开始。或者,也可以使用 VS Code 扩展开始并运行我们的测试。

使用 yarn 或 npm 安装:

kotlin 复制代码
npm init playwright@latest

在安装过程中 playwright 脚手架会向我们询问三个问题:

  1. 在 TypeScript 或 JavaScript 之间进行选择(默认为 TypeScript)
  2. 测试文件夹的名称(如果项目中已经有一个测试文件夹,则默认为 tests 或 e2e)
  3. 添加 GitHub Actions 工作流程以在 CI 上运行测试

回答完这三个问题后将开始安装流程。

安装完成后目录结构为:

  • playwright.config 是为 Playwright 添加配置的地方,包括修改我们希望在哪些浏览器上运行 Playwright。如果在已经存在的项目中运行测试,那么依赖项将直接添加到 package.json 中。
  • tests 文件夹包含一个基本示例测试,可帮助我们开始测试。有关更详细的示例,请查看 tests-examples 文件夹,其中包含为测试 todo 应用程序而编写的测试。

运行

默认情况下,测试将在所有 3 个浏览器上运行,chrome、firefox 和 webkit,使用 3 个 worker。这可以在 playwright.config 文件中进行配置。测试以无头模式运行,这意味着在运行测试时不会打开任何浏览器。测试结果和测试日志将显示在终端中。

键入以下命令以运行测试:

bash 复制代码
npx playwright test

测试运行完成后,将创建一个 HTML 文件,它记录了完整的测试报告,允许我们在网页中筛选报告,通过的测试、失败的测试、跳过的测试和不稳定的测试。可以单击每个测试查看测试的错误以及测试的每个步骤。默认情况下,如果某些测试失败,HTML 报告会自动打开。

也可以输入以下命令打开报告页面:

sql 复制代码
npx playwright show-report

示例

在百度中搜索 Playwright,验证第一条是不是官方地址:

js 复制代码
import { test, expect } from '@playwright/test';

test('在百度中搜索Playwright', async ({ page }) => {
  // 打开百度搜索页面
  await page.goto('https://www.baidu.com/');
  
  // 查看标题中是否有「百度一下,你就知道」文案
  await expect(page).toHaveTitle(/百度一下,你就知道/);

  // 找到搜索框元素并输入「Playwright」
  await page.locator('input#kw').fill('Playwright');

  // 找到「百度一下」按钮并点击
  await page.locator('input[value=百度一下]').click();

  // 找到结果列表中第一条 这里使用的 Xpath
  const result = await page.locator('/html/body/div[2]/div[3]/div[1]/div[3]/div[1]/div[3]/a/span');
  
  // 验证第一条是不是官方地址
  expect(result).toHaveText('https://github.com/microsoft/playwright');
});
相关推荐
Tech Synapse30 分钟前
Java根据前端返回的字段名进行查询数据的方法
java·开发语言·后端
.生产的驴30 分钟前
SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
spring boot·后端·spring·spring cloud·微服务·架构
微信-since811921 小时前
[ruby on rails] 安装docker
后端·docker·ruby on rails
代码吐槽菌3 小时前
基于SSM的毕业论文管理系统【附源码】
java·开发语言·数据库·后端·ssm
豌豆花下猫3 小时前
Python 潮流周刊#78:async/await 是糟糕的设计(摘要)
后端·python·ai
YMWM_3 小时前
第一章 Go语言简介
开发语言·后端·golang
码蜂窝编程官方3 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
hummhumm3 小时前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
J老熊4 小时前
JavaFX:简介、使用场景、常见问题及对比其他框架分析
java·开发语言·后端·面试·系统架构·软件工程
AuroraI'ncoding4 小时前
时间请求参数、响应
java·后端·spring