一 在自动化测试报告中标注出已提单的问题

type：备注“issue”，或者更多详细内容
describe:可以贴上问题单链接

Info Annotation_1.png

注释之后将在报告中展示issue信息

Info Annotation_2.png

二 设置debug选项

在terminal用命令配置debug

debug option_1.png

命令执行后会分别吊起调试窗口（如下图左侧）和指定的浏览器（右侧）

debug option_2.png

三 soft Assertions

当我们在测试脚本中用expect来执行多个断言，如果前面的断言出现了错误，之后的脚本将无法执行下去

soft assertions_1.png soft assertions_2.png

为了解决这个问题，我们可以用 expect.soft 来代替expect 执行断言

soft assertions_3.png soft assertions_4.png

四 UI Mode

npx playwright test --ui

UI Mode_1.png

在terminal 执行命令 npx playwright test ./tests/demo-to-app.spec.ts --ui
将会吊起可是户测试模型

UI Mode_2.png

五 接口测试

https://www.youtube.com/watch?v=dFLEHJq9iCE&list=PLYDwWPRvXB89caN5PHWDLrXJuyugu5Mg_&index=4

六 mock API requests

1. abort

Abort requests_1.png

await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
// Abort based on the request type
await page.route('**/*', route => {
  return route.request().resourceType() === 'image' ? route.abort() : route.continue();
});

以下事例是mock掉包含css的请求

Abort requests_2.png

以豆瓣网页为例

image.png image.png

执行结果显示成功，并且已经去掉了css文件

image.png

2. Fulfill 截取request，并返回自定义response

image.png

示例

image.png

执行之后，查看该接口的response已经被修改

image.png image.png

此外，官网还提供了 截取response并修改的方法
https://playwright.dev/docs/mock#modify-api-responses