使用playwright进行自动化端到端测试

项目希望能接入自动化端到端测试提高可靠性，发现微软的 playwright 还挺好用的，推荐一下，顺便说下遇到的一些难点以及最佳实践。

难点

1. 登录
   • 项目不能帐号密码登录，只能扫二维码

     • 临时方案是先自己扫码保存 cookie 用于测试，大概几天后才过期。可以用 codegen 搭配 save-storage 命令保存 cookie

       • npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json 可以保存cookie 到 auth.json，用 npx playwright --load-storage=auth.json命令即可加载，也可以在测试文件中加载

     • 长期的方案应该是跟后台同学 py，搞个长期有效的 cookie 或者测试帐号，可以只在测试环境、内网生效，规避外网风险

2. 支付，项目有支付环节，目前有扫二维码支付、网银支付、转账，扫码应该是比较好测试的

   • 暂时想到的方案是生成支付二维码后，截图推送给触发测试的人去扫码支付

   • 对测试号配置一分钱测试商品方便测试

   • 如果能确保支付环节不会出错，支付是外部稳定的第三方模块，也可以考虑用免费订单跳过支付环节？

最佳实践

https://playwright.nodejs.cn/docs/best-practices

测试理念

• 测试用户能看到的，不要依赖实现细节
• 测试尽可能隔离
• 避免测试第三方依赖
• 有数据库相关的要考虑数据变化是否影响测试
• 视觉回归测试要考虑操作系统和浏览器版本

tips

• 使用定位器的时候
  • 支持链式，使用过滤搜索小范围
  • 优先用面向用户的属性，而不是 css 选择器
  • 用能够适应 dom 变化的定位器，比如ARIA role、 ARIA 参数和可访问的名称page.getByRole('tab', { name: '其它' })
  • 可以用codegen 功能来生成定位器，如npx playwright codegen github.com/microsoft/playwright，他会帮你找到最适合的定位器（太好用了！）
• 使用web first断言(assertions)，playwright 会等待，直到条件达成
  • 比如发了个取消请求，语气能看到取消成功的提示，可以这样写 await expect(page.getByText('取消成功')).toBeVisible()，toBeVisible()这种断言会等待和重试
  • await要写在 expect 前面，如果像expect(await page.getByText('welcome').isVisible()).toBe(true);这样，会立即检查定位器能否找到并返回结果，不会去等待重试
• 调试
  • 安装 VSCode 插件调试
  • trace viewer 能看截图，能看时间线
  • test 加 ui 命令能可视化测试过程
• 在配置里可以很方便的测多几种浏览器
• 及时更新 playwright 依赖
• CI 中跑测试
• 测试文件接入 lint
• 并行跑测试，playwright 对于一个文件的测试是按顺序跑的，可同时跑多个文件，如果对单个文件也想并行跑，可以这样写
• 用 soft 断言，可以不终止测试expect.soft

其他

无障碍访问

Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站的做法——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅处于某种不方便的环境。例如，在视频中添加字幕可以帮助失聪、有听力障碍或身处嘈杂环境而听不到手机的用户。同样地，确保文字样式没有处于太低的对比度，可以对低视力用户和在明亮的强光下使用手机的用户都有所帮助。
ARIA roles