下一代 E2E 测试工具 Playwright

前言

Playwright 是微软于 2020 年发布的一款 E2E testing 工具，跟社区成熟的 Cypress 相比，稍显年轻。然而 Playwright 的主要优势有：

1. 支持多语言：Node.js、Java、Python，也即它并非是前端工程师专属的工具
2. 开箱即用的代码生成功能（Cypress 现在也支持，不过要修改配置或安装插件）

另外，Playwright 的安装没什么门槛，不像 Cypress 可能需要黑魔法。

综上所述，笔者认为 Playwright 是值得在研发过程中引入的一款测试工具，它可以帮助研发、测试团队较平滑地走上自动化测试之路。它适用的典型场景之一，就是做回归测试——测试人员再也不用在界面上使用鼠标进行“点点点”，解放双手，提高测试效率。

安装

yarn create playwright

根据命令提示，输入如下：

默认会下载所有浏览器，如果没有浏览器兼容性测试的需求，推荐如上图所示，手动安装一个浏览器。

以安装 chromium 为例，相应操作步骤如下：

1. 修改配置

vi playwright.config.ts

注释掉以下内容：

2. 安装浏览器

yarn playwright install --with-deps chromium

等待一段时间即可，如果失败，请重试。

推荐再安装 VS Code 插件，获取更好的使用体验。

使用

代码生成

虽然可以参考 example.spec.ts去编写测试用例，但这不是 Playwright 独特之处。Playwright 最引入注目的，是代码生成功能。

yarn playwright codegen

上述命令会打开两个浏览器窗口：

1. 一个是普通的浏览器界面
2. 另一个是代码生成界面，在前一个窗口进行的任何操作，都会生成相应的代码

虽然默认生成代码是 Javascript，但可以选择切换语言：

注意到可以生成 Pytest 的代码，对测试工程师来说，简直是福音。这也提示我们，Playwright 既可以由前端研发来使用，也可以由测试人员来使用，并不限制使用者的职业身份。

点击"Copy"按钮

然后打开代码编辑器，把代码复制进去即可。

点击"Clear"按钮，

可以清空本次操作生成的代码，从而开始进行下一次操作的代码生成。

如果是使用 VS Code 插件，点击"Record new"即可。

修改代码

生成的代码，最好还是检查一下，也许需要去掉一些多余的操作记录。
如下面的代码，Tab的操作只是人工操作时为了方便而进行的按键，对机器而言，是多余的，应该去掉。

test('login', async ({
     page }) => {
   
  await page.goto('http://172.16.202.6:3000/#/login');
  await page.getByRole('textbox').first().click();
  await page.getByRole('textbox').first().fill('username');
  //await page.getByRole('textbox').first().press('Tab');
  await page.getByRole('textbox').nth(1).fill('code');
  //await page.getByRole('textbox').nth(1).press('Tab');
  await page.locator('input[type="password"]').fill('password');
  await page.getByRole('button', {
    name: '登录' }).click();
});

如果想基于现在的测试代码，继续生成新的代码，可以使用 VS Code：

• 把光标放到测试用例的最后一行
• 点击"Record at cursor"，即可继续录制

执行用例

yarn playwright test

如果用例失败了，想查看到底哪里错了，可以用以下命令显示浏览器，查看用例执行过程：

yarn playwright