Playwright：Web UI 自动化测试框架全面概述

playwright是微软开发的web ui自动化测试框架。

它旨在提供一个跨平台、跨语言、跨浏览器的自动化测试框架，同时也支持移动浏览器。

如其官方主页所述：

• 自动等待、页面元素智能断言、执行追踪等功能，在处理网页不稳定方面非常有效。
• 它在与运行测试的进程不同的进程中控制浏览器，消除了进程内测试运行器的限制并支持 shadow dom 渗透。
• playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件，可以实现零成本的全面测试隔离。创建新的浏览器上下文只需几毫秒。
• 提供代码生成、逐步调试和跟踪查看器等功能。

---

playwright vs. selenium v​​s. cypress

当今最好的 web ui 自动化测试框架是什么？杰出的选项包括已有十年历史的 selenium、最近流行的 cypress 以及我们在这里介绍的 playwright。它们有何不同？以下是总结对比供大家参考

主要比较：

• 支持的语言：playwright 和 selenium 支持 java、c# 和 python，这使得它们在可能不熟悉 javascript/typescript 的测试工程师中更受欢迎。
• 技术方法：playwright 和 selenium 都使用 google 的远程调试协议来控制基于 chromium 的浏览器。对于像 firefox 这样的浏览器，如果没有这样的协议，它们就会使用 javascript 注入。 selenium 将其封装在 driver 中，而 playwright 直接调用它。另一方面，cypress 使用 javascript 来控制浏览器。
• 浏览器支持：selenium 支持 internet explorer，这与 ie 逐渐被淘汰无关。
• 易于使用：所有三个框架都有一个学习曲线。然而，与 selenium 相比，playwright 和 cypress 对于简单场景更加用户友好。

---

入门

虽然 playwright 支持多种语言，但它严重依赖 node.js。无论您使用python还是java版本，playwright在初始化时都需要node.js环境，下载node.js驱动程序。因此，本指南我们将重点关注 javascript/typescript。

安装与演示

1. 确保已安装 node.js。
2. 使用npm或yarn初始化playwright项目：

   # using npm
   npm init playwright@latest

   # using yarn
   yarn create playwright

1. 按照提示操作：
   • 选择 typescript 或 javascript（默认：typescript）。
   • 指定测试目录名称。
   • 决定是否安装playwright支持的浏览器（默认：true）。

如果您选择下载浏览器，playwright 将下载 chromium、firefox 和 webkit，这可能需要一些时间。此过程仅在第一次设置期间发生，除非 playwright 版本已更新。

项目结构

初始化后，您将得到一个项目模板：

playwright.config.ts    # playwright configuration file
package.json            # node.js configuration file
package-lock.json       # node.js dependency lock file
tests/                  # your test directory
  example.spec.ts       # template test case
tests-examples/         # example tests directory
  demo-todo-app.spec.ts # example test case

运行示例测试用例：

npx playwright test

测试静默执行（在无头模式下），结果显示为：

running 6 tests using 6 workers

  6 passed (10s)

to open the last html report run:

  npx playwright show-report

---

示例源代码

这是 example.spec.ts 测试用例：

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).tohavetitle(/playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getbyrole('link', { name: 'get started' }).click();
  await expect(page).tohaveurl(/.*intro/);
});

• 第一次测试：验证页面标题包含“剧作家”。
• 第二次测试：单击“开始”链接并验证 url。

每种测试方法都有：

• 测试名称（例如“有标题”）。
• 一个函数来执行测试逻辑。

主要方法包括：

• page.goto：导航到 url。
• expect(page).tohavetitle：断言页面标题。
• page.getbyrole：通过角色定位元素。
• wait：等待异步操作完成。

---

从命令行运行测试

以下是常用命令：

• 运行所有测试：

  npx playwright test

• 运行特定的测试文件：

  npx playwright test landing-page.spec.ts

• 调试测试用例：

  npx playwright test --debug

---

代码录制

使用codegen功能记录交互：

npx playwright codegen https://leapcell.io/

录制的代码可以复制到您的文件中。注意：记录器可能无法处理悬停等复杂操作。

---

深入剧作家指南

行动和行为

本节介绍一些与页面元素交互的典型 playwright 操作。请注意，前面介绍的定位器对象在创建过程中实际上并没有在页面上定位该元素。即使页面上不存在该元素，使用元素定位器方法获取定位器对象也不会引发任何异常。实际的元素查找仅在交互期间发生。这与 selenium 的 findelement 方法不同，后者直接在页面上搜索元素，如果找不到元素则抛出异常。

文字输入

使用fill方法进行文本输入，主要针对<input>、<textarea>，或者具有[contenteditable]属性的元素：

// text input
await page.getbyrole('textbox').fill('peter');

复选框和单选按钮

使用 locator.setchecked() 或 locator.check() 与 input[type=checkbox]、input[type=radio] 或具有 [role=checkbox] 属性的元素进行交互：

await page.getbylabel('i agree to the terms above').check();

expect(await page.getbylabel('subscribe to newsletter').ischecked()).tobetruthy();

// uncheck
await page.getbylabel('xl').setchecked(false);

选择控制

使用 locator.selectoption() 与 <select> 元素交互：

// select by value
await page.getbylabel('choose a color').selectoption('blue');

// select by label
await page.getbylabel('choose a color').selectoption({ label: 'blue' });

// multi-select
await page.getbylabel('choose multiple colors').selectoption(['red', 'green', 'blue']);

鼠标点击

基本操作：

// left click
await page.getbyrole('button').click();

// double click
await page.getbytext('item').dblclick();

// right click
await page.getbytext('item').click({ button: 'right' });

// shift+click
await page.getbytext('item').click({ modifiers: ['shift'] });

// hover
await page.getbytext('item').hover();

// click at specific position
await page.getbytext('item').click({ position: { x: 0, y: 0 } });

对于被其他人覆盖的元素，请用力点击：

await page.getbyrole('button').click({ force: true });

或者以编程方式触发点击事件：

await page.getbyrole('button').dispatchevent('click');

键入字符

locator.type() 方法模拟逐个字符输入，触发 keydown、keyup 和 keypress 事件：

await page.locator('#area').type('hello world!');

特殊按键

使用 locator.press() 作为特殊键：

// enter key
await page.getbytext('submit').press('enter');

// ctrl+right arrow
await page.getbyrole('textbox').press('control+arrowright');

// dollar key
await page.getbyrole('textbox').press('$');

支持的按键包括反引号、减号、等于、反斜杠、退格、制表符、删除、转义、arrowdown、end、enter、home、insert、pagedown、pageup、arrowright、arrowup、f1-f12、digit0-digit9 和 keya -keyz。

文件上传

使用locator.setinputfiles()指定要上传的文件。支持多个文件：

// upload a file
await page.getbylabel('upload file').setinputfiles('myfile.pdf');

// upload multiple files
await page.getbylabel('upload files').setinputfiles(['file1.txt', 'file2.txt']);

// remove files
await page.getbylabel('upload file').setinputfiles([]);

// upload from buffer
await page.getbylabel('upload file').setinputfiles({
  name: 'file.txt',
  mimetype: 'text/plain',
  buffer: buffer.from('this is test')
});

焦点元素

使用 locator.focus() 聚焦于某个元素：

await page.getbylabel('password').focus();

拖放

拖放过程涉及四个步骤：

1. 将鼠标悬停在可拖动元素上。
2. 按下鼠标左键。
3. 将鼠标移动到目标位置。
4. 松开鼠标左键。

您可以使用locator.dragto()方法：

await page.locator('#item-to-be-dragged').dragto(page.locator('#item-to-drop-at'));

或者，手动实施该过程：

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

对话框处理

默认情况下，playwright 会自动取消警告、确认和提示等对话框。您可以预先注册一个对话框处理程序来接受对话框：

page.on('dialog', dialog => dialog.accept());
await page.getbyrole('button').click();

处理新页面

当弹出新页面时，可以使用popup事件来处理：

const newPagePromise = page.waitForEvent('popup');
await page.getByText('Click me').click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

---

剧作家最佳平台：leapcell

leapcell 是一个专为分布式应用程序设计的现代云计算平台。它采用按量付费模式，无闲置成本，确保您只需为使用的资源付费。

leapcell 对剧作家应用的独特优势

1. 成本效益

   • 按需付费：低流量时避免资源浪费，高峰时自动扩容。
   • 真实示例：例如，根据 getdeploying.com 的计算，在传统云服务中租用 1 vcpu 和 2 gb ram 虚拟机的费用约为每月 25 美元。在 leapcell 上，25 美元可以支持处理 694 万个请求、平均响应时间为 60 毫秒的服务，让您物有所值。

2. 开发者体验

   • 易于使用：直观的界面，设置要求极低。
   • 自动化：简化开发、测试和部署。
   • 无缝集成：支持 go、python、node.js、rust 等。

3. 可扩展性和性能

   • 自动缩放：动态调整资源以保持最佳性能。
   • 异步优化：轻松处理高并发任务。
   • 全球覆盖：分布式数据中心支持低延迟访问。

更多部署示例，请参阅文档。