持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

#摘要

当自己代码的编写水平达到瓶颈，我们应该如何继续提高我们的代码质量呢？代码测试，单元测试、集成测试、e2e测试。这些测试有利的保证了我们的代码的稳定性。对于单元测试，目前比较流程的就是JEST了。对于e2e测试大多数人肯定会想到puppeteer，但是今天我打算学习一下PlayWright。下面我们来进行学习。

文档是英文文档，我会逐个翻译。
说明：本人是前端开发者，因此这里会基于node的文档进行描述。大家需要Java、paython等可以去官方查找

# 1.测试用例编写

import { test, expect } from '@playwright/test';

// 测试登录功能
test('登录页面是否成功登录', async ({ page }) => {
// 前往登录页面
  await page.goto('http://localhost:8002/user/login');
  
  // 判断登录界面是否有“登录页面”标题
  await expect(page).toHaveTitle(/登录页面/);

  // 屏幕截屏
  await page.screenshot({ path: `example.png` });
  
  // 生成PDF文件
  await page.pdf({ path: `document.pdf` }); //生成pdf必须无头模式
  
  // 在ID为username的dom元素的input中添加“123456”
  await page.fill('#username', '123456');

  // 在ID为password的dom元素的input中添加“123456”
  await page.fill('#password', '123456');

  // 对类名为ant-btn-lg的dom元素触发点击事件
  await page.click('.ant-btn-lg');

  // 判断页面是否有”后台管理系统“这几个字
  await expect(page).toHaveTitle(/后台管理系统/);
});

上面是一个测试用例，可能我们看不懂上面的意思。下面我们给大家说明一下。 test函数接受两个参数，测试名称、测试方法。上面的用来测试名称为“登录页面是否成功登录”，在运行测试用来的时候，会执行后面的方法。

2.如何运行测试用例

全局测试：npx playwright test
运行单个测试用例：npx playwright test landing-page.spec.ts
运行一组测试用例：npx playwright test tests/todo-page/ tests/landing-page/

当然还有很多大家可以到这里来进行查看

如果测试失败归给我对应的提示，可以让我们快速的找到测试所出现的问题。

同时会在浏览器中自动给我们打开一个测试报告。

3.关于Debugger模式

调试所有测试用例 npx playwright test --debug

会开启无头浏览器以及调试工具，每一个测试用例每一步都会运行并触发调试。

调试单个测试用例 ： npx playwright test example.spec.ts --debug
调试单个测试用例的多少行 npx playwright test example.spec.ts:42 --debug

4.如何查看测试报告

查看测试报告：npx playwright show-report

会在本地启动测试服务，在展示测试报告。

总结

前面一开始会比较基础，后面会逐步加深，一步一步的来搞懂playWright。