2021.12.7 修改

一、playwright 的概述

首先了解什么是 e2e 测试。

E2E，是“End to End”的缩写，可以翻译成“端到端”测试。它模仿用户，从某个入口开始，逐步执行操作，直到完成某项工作。与单元测试不同，后者通常需要测试参数、参数类型、参数值、参数数量、返回值、抛出错误等，目的在于保证特定函数能够在任何情况下都稳定可靠完成工作。单元测试假定只要所有函数都正常工作，那么整个产品就能正常工作。

相对来说，E2E 测试并没有那么强调要覆盖全部使用场景，它关注的是 一个完整的操作链是否能够完成。对于 Web 前端来说，还关注 界面布局、内容信息是否符合预期。

比如，登陆界面的 E2E 测试，关注用户是否能够正常输入，正常登录；登陆失败的话，是否能够正确显示错误信息。至于输入不合法的内容是否处理，没有很大的关系。

playwright 是由微软公司 2020 年初发布的新一代自动化测试工具，playwright 基于 jest 的 e2e 测试框架，其在 jest 的基础上集成了仅用一个 API 即可自动执行 Chromium、Firefox、WebKit 等主流浏览器自动化操作，从而实现便捷化自动化测试。

其可以实现检测页面交互是否如预期。

二、playwright 的环境介绍

playwright 支持以 chromium、firefox 和 webkit 为内核的浏览器进行自动化测试。

浏览器内核对应关系为：

浏览器	内核
Chrome	统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink 内核
Firefox	Gecko 内核，俗称 Firefox 内核
Safari	Webkit 内核
Opera	最初是自己的 Presto 内核，后来是 Webkit，现在是 Blink 内核
IE	Trident 内核，也是俗称的IE内核
360浏览器、猎豹浏览器	IE + Chrome 双内核
搜狗、遨游、QQ浏览器	Trident（兼容模式）+ Webkit（高速模式）
百度浏览器、世界之窗	IE 内核
2345浏览器	以前是 IE 内核，现在也是 IE + Chrome 双内核

综上可以看出，其能支持市面上的大部分浏览器。

通过执行以下指令可以将网站运行在不同的浏览器上。

指令格式：npx playwright [browser] [website]

指令示例：npx playwright cr wikipedia.org

该指令指代在以 chromium 为内核的浏览器运行 wikipedia.org。

环境	指令
chromium	cr
firefox	ff
webkit	wk

环境要求：

环境	支持版本
nodejs	>= 12
Windows	✅
Windows Subsystem for Linux (WSL)	✅
macOS	Requires 10.14 (Mojave) or above
Linux	Only Ubuntu 18.04 and Ubuntu 20.04 are officially supported

三、playwright 的使用介绍

在一个项目中使用 playwright，需要有三个步骤，首先是进行安装、然后是进行指令的录制，再然后的集成在项目的 husky 或者流水线中，从而实现自动化测试。

3.1 playwright 的安装

在项目的根目录下执行以下指令进行安装。

npm 的安装方法为：

$ npm i -D playwright

yarn 的安装方法为：

$ yarn add -D playwright

然后执行

$ npx playwright install

3.2 playwright 的浏览器指令录制

在项目的根目录下执行以下指令进行录制。

指令格式：npx playwright codegen [website]

指令示例：npx playwright codegen wikipedia.org

使用示例：

在终端输入 npx playwright codegen wikipedia.org ，可以得到如下：

屏幕录制2021-07-21-上午11.23.30.gif

如示例所示，输入完指令后，我们可以从右上角的面板中得到所有关于本次用户操作的指令，在右上角的 target 可以对指令进行转换。

// 此部分为后补充的代码
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();

  // Open new page
  const page = await context.newPage();

  // Go to https://www.wikipedia.org/
  await page.goto('https://www.wikipedia.org/');

  // Click input[name="search"]
  await page.click('input[name="search"]');

  // Fill input[name="search"]
  await page.fill('input[name="search"]', 'test');

  // Click input[name="search"]
  await page.click('input[name="search"]');

  // Press ArrowDown
  await page.press('input[name="search"]', 'ArrowDown');

  // Press Enter
  await page.press('input[name="search"]', 'Enter');
  // assert.equal(page.url(), 'https://zh.wikipedia.org/wiki/TESTV');

  // Click text=TESTV是重庆市菲格文化传播有限公司推出的网络自媒体频道，其节目如《值不值得买》《BB Time》《值不值得吃》《值不值》等节目，在Bilibili、优酷、爱
  await page.click('text=TESTV是重庆市菲格文化传播有限公司推出的网络自媒体频道，其节目如《值不值得买》《BB Time》《值不值得吃》《值不值》等节目，在Bilibili、优酷、爱');

  // Click p >> text=爱奇艺
  await page.click('p >> text=爱奇艺');
  // assert.equal(page.url(), 'https://zh.wikipedia.org/wiki/%E7%88%B1%E5%A5%87%E8%89%BA');

  // ---------------------
  await context.close();
  await browser.close();
})();

我们点击 javascript 可以获得一个可以被执行的文件，将其中的代码拷贝到一个新建的 index.js 文件中，执行 node index.js 可以看到自动化执行操作。

3.3 playwright 实现自动化测试

说了这么多，playwright 如何集成在我们的项目之中呢？

目前有两个应用的方案

本地提交代码时通过钩子拦截，并将测试文件逐个运行。
上传代码后集成 CI 进行测试。

3.3.1 在本地实现测试

将上方的 playwright-test 复制到 js 文件中。

在项目根目录下执行 npm run test 或者 npx playwright test，其会自动执行 [filename].spec.js 或 [filename].test.js 的测试文件进行 e2e 测试，并自动输出测试报告。

3.3.2 在 ci 实现测试

编写 gitlab-ci.yml 文件

build:
  stage: build
  image: mcr.microsoft.com/playwright:focal
  cache:
    paths: 
      - node_modules
  script:
      - npx playwright install
      - yarn test

四、Q & A

4.1 页面跳转时 page.waitForNavigation 总报错怎么办？

答主将

await Promise.all([
   page.waitForNavigation(/*{ url: 'https://example' }*/),
   page.click('button:has-text("Log In")')
 ]);

换成了

await page.waitForTimeout(2000);
await page.click('button:has-text("Log In")')
await page.waitForTimeout(2000);

经过一番测试，发现只要删除 page.waitForNavigation 就可以正常运行。

新一代前端自动化测试工具 —— playwright