一、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)，我们将立即处理
21天更文挑战，赢取价值500元大礼，还有机会成为签约作者！
