使用 Playwright Codegen 进行自动化测试脚本录制

简介：

Playwright 是一个强大的自动化测试工具，它可以帮助您轻松测试各种 web 应用程序。Playwright 的一个重要功能是 codegen，它可以自动生成测试代码，从而节省您编写测试代码的时间和精力。

在本文中，我们将介绍如何使用 Playwright Codegen 进行自动化测试。我们将演示如何录制用户操作、生成测试代码以及运行测试。

前提条件

在开始之前，请确保您已经安装了 Playwright 和 Node.js。您可以按照 Playwright 的官方文档进行安装： https://playwright.dev/docs/intro

步骤

1. 启动 Playwright Codegen

打开终端，并导航到您的项目目录。然后，运行以下命令启动 Playwright Codegen：

npx playwright codegen

启动后，电脑屏幕上将出现两个窗口（一个空白的浏览器窗口和一个Playwright Inspector窗口）。

2. 录制用户操作并生成测试脚本

在浏览器窗口中，打开你想要录制脚本的网站，并在页面上进行操作。Playwright将自动记录你的操作，并在Playwright Inspector窗口中生成对应的脚本。

Playwright Codegen 自动生成以下测试代码：

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

test('test', async ({ page }) => {
  await page.goto('https://www.baidu.com/');
  await page.locator('#kw').click();
  await page.locator('#kw').fill('test');
  await page.locator('#kw').press('CapsLock');
  await page.locator('#kw').fill('test');
  await page.getByRole('button', { name: '百度一下' }).click();
  const page1Promise = page.waitForEvent('popup');
  await page.getByRole('link', { name: 'test - 百度翻译 ' }).click();
  const page1 = await page1Promise;
  await page1.locator('.f9WVaz_4').click();
});

4. 运行测试

将生成的测试代码保存到文件中。用以下命令在本地进行运行测试。

npx playwright test test1

Playwright Codegen 的优势

• 可以快速生成测试代码，从而节省时间和精力。
• 可以生成易于理解和维护的测试代码。
• 可以测试各种 web 应用程序，包括单页应用程序和传统web 应用程序。