开始
观看视频演示
先决条件
@playwright/test (类型)
首先使用 @ playwright/ test 设置重播, 如果从新重播开始 https://playwright.dev/docs/intro (英语)
安装
npm install -D @dnvgl/playwright-live-recorder
#or
yarn add -D @dnvgl/playwright-live-recorder
#or
pnpm add -D @dnvgl/playwright-live-recorder
运行设置脚本
npx @dnvgl/playwright-live-recorder
确保将 baseURL 设置到您的网络应用的根 URL playwright.config.ts 譬如说.
//playwright.config.ts
export default defineConfig({
//...
use: {
baseURL: 'https://demo.playwright.dev/todomvc/#/',
//...
如何使用
测试的打字码
在剧作家测试中, 添加导入
import { PlaywrightLiveRecorder } from '@dnvgl/playwright-live-recorder';
然后在您想要录制的剧作家测试结束时添加此等待行
// note - recorded lines will be inserted here
await PlaywrightLiveRecorder.start(page, s => <undefined>eval(s));
以标题模式运行测试
如果您正在使用 vscode 插件
ms-playwright.playwright它将自动以标题模式运行,其中PWDEBUG设置为控制台(见修改.vscode/settings.json(中文(简体) )
如果您正在运行命令行, 请设置环境变量PWDEBUG=console在运行剧作家命令之前,例如.playwright test --ui
测试会运行, 当 PlaywrightLiveRecorder.start 已执行的 lib 功能将暴露在浏览器中,所有脚本将载入浏览器中。 测试执行等待浏览器关闭.
新录入的测试行被插入到测试文件中.
将创建新添加的页面对象模型文件,将新添加的项目插入页面对象模型文件.
以上新增加或修改的试验线 PlaywrightLiveRecorder.start 在保存文件时执行.
浏览器
Playwright活录器在浏览器页面上方增加了一个控制栏.
- 记录模式QQ/QQ可以通过点击图标来切换/ 打开, 或者按下 CTRL+ALT+SHIFT+R
- 标签是页面对象模型路径+文件名
- f(x) 按钮显示您页面对象模型文件中可用的公共帮助功能, 单击绿色 qq, 在文件中添加示例
当记录被切换在悬浮工具提示上时, 位置位于显示将生成的代码的光标旁边
如果录制器屏蔽了您的测试会话, 工作通过将记录调出, 点击, 然后重新调出
记录
正在切换记录, 请单击一个元素将其添加到测试中
- 如果元素不是Page对象模型的一部分,则会提示您给它一个名称
- 按下输入后,新属性将添加到页面对象模型文件,元素会突出显示(默认:鲑鱼颜色),以表示它是页面对象模型的一部分
- 按 [esc] 跳过添加到页面对象模型
- 如果元素是 Page 对象模型的一部分, 它将会被突出显示为沙门颜色
- 点击它会在测试的页面对象模型方法中添加一个调用
在点击元素后, 测试代码将被添加并保存到您的测试文件中 。 文件更改会自动被重新执行.
您总是可以修改文本代码并保存以重新执行已修改的行.这对修改一个
.click()呼叫一个.fill(),或包起来expect围绕您刚刚点击的元素。 保存文件并重新执行. 另一个强大的工作流程是编辑页面对象模型函数,保存文件,然后在测试文件中再添加同一行来强制重执行 在函数执行正确之前,您可以一直这样延时.当测试中执行代码行时,它们会在屏幕上显示覆盖
