一、playwright 的概述
首先了解什么是 e2e 测试。
E2E，是“End to End”的缩写，可以翻译成“端到端”测试。它模仿用户，从某个入口开始，逐步执行操作，直到完成某项工作。与单元测试不同，后者通常需要测试参数、参数类型、参数值、参数数量、返回值、抛出错误等，目的在于保证特定函数能够在任何情况下都稳定可靠完成工作。单元测试假定只要所有函数都正常工作，那么整个产品就能正常工作。
相对来说，E2E 测试并没有那么强调要覆盖全部使用场景，它关注的是?一个完整的操作链是否能够完成。对于 Web 前端来说，还关注?界面布局、内容信息是否符合预期。
比如，登陆界面的 E2E 测试，关注用户是否能够正常输入，正常登录；登陆失败的话，是否能够正确显示错误信息。至于输入不合法的内容是否处理，没有很大的关系。
playwright 是由微软公司 2020 年初发布的新一代自动化测试工具，playwright 基于 jest 的 e2e 测试框架，其在 jest 的基础上集成了仅用一个 API 即可自动执行 Chromium、Firefox、WebKit 等主流浏览器自动化操作，从而实现便捷化自动化测试。
其可以实现检测页面交互是否如预期。
二、playwright 的环境介绍
playwright 支持以 chromium、firefox 和 webkit 为内核的浏览器进行自动化测试。
浏览器内核对应关系为：
综上可以看出，其能支持市面上的大部分浏览器。
通过执行以下指令可以将网站运行在不同的浏览器上。
指令格式：npx playwright [browser] [website]
指令示例：npx playwright cr wikipedia.org
该指令指代在以 chromium 为内核的浏览器运行 wikipedia.org。
环境要求：
三、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 ，可以得到如下：
如示例所示，输入完指令后，我们可以从右上角的面板中得到所有关于本次用户操作的指令，在右上角的 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 就可以正常运行。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
