使用playwright快速编写web自动化测试脚本Playwright是微软开源的一个自动化框架。支持`python`

介绍

Playwright是微软开源的一个自动化框架。与selenium不同的是Playwright内置了多种浏览器（不需要浏览器驱动），运行时Playwright也是调用内置的浏览器。Playwright支持python、js、java和C#语言，并且提供了codegen功能-记录对浏览器的操作并生成自动化代码。

这里使用js编写Playwright示例。

初始化项目

创建一个名为AutoTest的文件夹，并使用vscode打开。
在控制台运行npm init -y命令初始化项目。
在控制台运行npm i -D playwright命令添加playwright依赖
在控制台运行npm i -D @playwright/test命令添加@playwright/test依赖，@playwright/test依赖提供了录制操作自动生成代码的功能。

编写自动化测试脚本

@playwright/test依赖提供了录制操作的指令npx playwrighr codegen 网址 ，这个指令可以录制你对浏览器的操作，并生成对应语言的代码。可支持生成python、js、java和C#语言的代码。

示例

在控制台运行npx playwrighr codegen http://localhost:8080/#/login，随后弹出来一个谷歌浏览器和一个Playwright inspector窗口-用于记录对浏览器的操作、如图：
开始进行操作，输入用户名和密码，可以看到Playwright inspector窗口已经生成了对应的代码

由于这里使用的是js语言，所以在Playwright inspector窗口的Target处把语言选择JavaScript

登录之后进行新增用户操作，操作完成后，新建index.js文件，并将生成的代码复制到该文件。
在控制台运行node index.js命令，运行刚才生成的代码

生成的代码直接运行会报错，需要修改。上图的错误时超时，需要使用使用.catch()处理错误。

没有捕获到输入的中文，需要在代码中添加

完整代码

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 http://localhost:8080/#/login
  await page.goto('http://localhost:8080/#/login').catch(err => { });

  // Click input[type="input"]
  await page.locator('input[type="input"]').click();

  // Fill input[type="input"]
  await page.locator('input[type="input"]').fill('admin');

  // Click input[type="password"]
  await page.locator('input[type="password"]').click();

  // Fill input[type="password"]
  await page.locator('input[type="password"]').fill('1');

  // Click button:has-text("登 录")
  await page.locator('button:has-text("登 录")').click();
  await page.waitForURL('http://localhost:8080/#/');

  // Click span:has-text("用户管理") >> nth=0
  await page.locator('span:has-text("用户管理")').first().click();
  await page.waitForURL('http://localhost:8080/#/users');

  // Click button:has-text("新增用户")
  await page.locator('button:has-text("新增用户")').click();

  // Click #form_item_name
  await page.locator('#form_item_name').click();

  // Fill #form_item_name
  await page.locator('#form_item_name').fill('王二');

  // Click .ant-select-selection-item
  await page.locator('.ant-select-selection-item').click();

  // Click [id="\31 493496705998389248"] >> text=男
  await page.locator('[id="\\31 493496705998389248"] >> text=男').click();

  // Click #form_item_nickname
  await page.locator('#form_item_nickname').fill("哈哈哈");

  // Click #form_item_phone
  await page.locator('#form_item_phone').click();

  // Fill #form_item_phone
  await page.locator('#form_item_phone').fill('15968654515');

  // Click [placeholder="请选择日期"]
  await page.locator('[placeholder="请选择日期"]').click();

  // Click text=18
  await page.locator('text=18').click();

  // Click #form_item_username
  await page.locator('#form_item_username').click();

  // Fill #form_item_username
  await page.locator('#form_item_username').fill('aaa');

  // Click #form_item_password
  await page.locator('#form_item_password').click();

  // Fill #form_item_password
  await page.locator('#form_item_password').fill('1');

  // Click #form_item_confirmPassword
  await page.locator('#form_item_confirmPassword').click();

  // Fill #form_item_confirmPassword
  await page.locator('#form_item_confirmPassword').fill('1');

  // Click .ant-select-selection-overflow
  await page.locator('.ant-select-selection-overflow').click();

  // Click [id="\31 522400561922572288"] >> text=权限管理
  await page.locator('[id="\\31 522400561922572288"] >> text=权限管理').click();

  // Click [id="\31 522400561922572288"] >> text=权限管理
  await page.locator('[id="\\31 522400561922572288"] >> text=权限管理').click();

  // Click [id="\31 522400561922572288"] >> text=权限管理
  await page.locator('[id="\\31 522400561922572288"] >> text=权限管理').click();

  // Click div[role="document"] div:has-text("姓名性别男昵称手机号邮箱出生日期用户名密码确认密码角色权限管理") >> nth=1
  await page.locator('div[role="document"] div:has-text("姓名性别男昵称手机号邮箱出生日期用户名密码确认密码角色权限管理")').nth(1).click();

  // Click .ant-picker
  await page.locator('.ant-picker').click();

  // Click div[role="document"] form div:has-text("密码") >> nth=0
  await page.locator('div[role="document"] form div:has-text("密码")').first().click();

  // Click button:has-text("确 定")
  await page.locator('button:has-text("确 定")').click();

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

运行后若干截图

结语

可以使用fake包随机生成测试数据，配合playwright完成完成完整流程的测试。最后使用pkg打包成可执行文件，这样就可以随时随地到处运行啦。