playwright 实现前端自动化测试

Ⅰ、前言

• 自动化 功能测试 ，测试用用例的代码是非常复杂的；
• 编写耗费时间长 ，不易读，可维护性差；
• 下面我们来试试 微软开源playwright ， 有了它 切图仔 也可以玩的比 测试 6 👇

Ⅱ、什么是 playwright

废话不多说 ： 微软开源的 「自动化测试神器」 ，前端学习起来秒会 ！

Ⅲ、安装 playwright

• 初始化一个 playwright

npm init playwright@latest app_name

• 选择js 或 ts ，其他用途不大的选 false

• 首次创建 playwright 时 ，我们 Install Playwright browsers 要选择 Y ( true ) 👇，

• ( 下载时可能比较慢 ，可以换淘宝源)

• 如果没有选 true 时，初始化完成需要 （npx playwright install）去下载 ;
• 这时我们就创建成功了 ，将自动生成 以下目录；

Ⅳ、使用 playwright

• test 文件夹为我们 默认执行的文件夹 ，输入命令将会自动执行里面的全部用例
• playwright.config.js 为配置文件，我们可以先修改下 ，测试启动的浏览器‘

• 我们测试一个小功能 ：

输入 百度地址 ，搜索CSDN 然后在 ，点击CSDN 进入官网

修改 test 文件夹的默认 example.spec.js 文件 ，简单调用下 API

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

test('test', async ({ page }) => {
  await page.goto('https://www.baidu.com/');
  await page.locator('#kw').fill('csdn');
  await page.locator('#kw').press('Enter');
  const page1Promise = page.waitForEvent('popup');
  await page.getByRole('link', { name: 'CSDN - 专业开发者社区' }).click();
});

然后 运行以下命令 👇 将自动执行 tests 文件夹下的 .spec.js 文件

 npx playwright test --headed

Ⅴ、自动化生成 playwright 代码

• 我们可以发现自己敲代码调用 API 是比较慢的，可以通过 playwright 自动化生成代码
• 我们在tests 里面创建一个 test1.spec.ts

 npx playwright codegen -b chromium -o ./tests/test1.spec.ts

• 我们边操作 ，右边就会边自动生成测试代码
• 我们测试环境测完了， 把代码复制一遍（修改下地址）跑其他环境 ，就可以自动测试了

当然我们也要看看官网的API的使用 , 将测试代码封装的更好一些 ！！！ => 官网地址