playwright是微软开发的web ui自动化测试框架。
它旨在提供一个跨平台、跨语言、跨浏览器的自动化测试框架，同时也支持移动浏览器。
如其官方主页所述：
- 自动等待、页面元素智能断言、执行追踪等功能，在处理网页不稳定方面非常有效。
- 它在与运行测试的进程不同的进程中控制浏览器，消除了进程内测试运行器的限制并支持 shadow dom 渗透。
- playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件，可以实现零成本的全面测试隔离。创建新的浏览器上下文只需几毫秒。
- 提供代码生成、逐步调试和跟踪查看器等功能。
playwright vs. selenium vs. cypress
当今最好的 web ui 自动化测试框架是什么？杰出的选项包括已有十年历史的 selenium、最近流行的 cypress 以及我们在这里介绍的 playwright。它们有何不同？以下是总结对比供大家参考
| feature | playwright | selenium | cypress |
|---|---|---|---|
| supported languages | Javascript, java, c#, python | JavaScript, java, c#, python, ruby | javascript/typescript |
| supported browsers | chrome, edge, firefox, safari | chrome, edge, firefox, safari, ie | chrome, edge, firefox, safari |
| testing framework | frameworks for supported languages | frameworks for supported languages | frameworks for supported languages |
| usability | easy to use and configure | complex setup with a learning curve | easy to use and configure |
| code complexity | simple | moderate | simple |
| dom manipulation | simple | moderate | simple |
| community maturity | improving gradually | highly mature | fairly mature |
| headless mode support | yes | yes | yes |
| concurrency support | supported | supported | depends on ci/cd tools |
| iframe support | supported | supported | supported via plugins |
| driver | not required | requires a browser-specific driver | not required |
| multi-tab operations | supported | not supported | supported |
| drag and drop | supported | supported | supported |
| built-in reporting | yes | no | yes |
| cross-origin support | supported | supported | supported |
| built-in debugging | yes | no | yes |
| automatic wait | yes | no | yes |
| built-in screenshot/video | yes | no video recording | yes |
主要比较：
- 支持的语言：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。
安装与演示
# using npm npm init playwright@latest # using yarn yarn create playwright
- 按照提示操作：
- 选择 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。
每种测试方法都有：
- 测试名称（例如“有标题”）。
- 一个函数来执行测试逻辑。
主要方法包括：
从命令行运行测试
以下是常用命令：
- 运行所有测试：
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方法进行文本输入，主要针对、
// 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 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();
拖放
拖放过程涉及四个步骤：
- 将鼠标悬停在可拖动元素上。
- 按下鼠标左键。
- 将鼠标移动到目标位置。
- 松开鼠标左键。
您可以使用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 对剧作家应用的独特优势
-
成本效益
- 按需付费：低流量时避免资源浪费，高峰时自动扩容。
- 真实示例：例如，根据 getdeploying.com 的计算，在传统云服务中租用 1 vcpu 和 2 gb ram 虚拟机的费用约为每月 25 美元。在 leapcell 上，25 美元可以支持处理 694 万个请求、平均响应时间为 60 毫秒的服务，让您物有所值。
-
开发者体验
- 易于使用：直观的界面，设置要求极低。
- 自动化：简化开发、测试和部署。
- 无缝集成：支持 go、python、node.js、rust 等。
-
可扩展性和性能
更多部署示例，请参阅文档。
