像专业人士一样调试 Playwright 测试

介绍

调试是任何开发人员的必备技能，尤其是在使用自动化测试时。Playwright 具有强大的调试功能，可以更轻松地识别和修复测试中的问题。在本文中，我们将探讨各种技术和工具，以有效地调试 Playwright 测试并确保您的测试套件顺利运行。

1. 使用 Playwright 的内置调试工具

Playwright 提供了几个内置功能来帮助调试测试：

**a. --debug 模式**

在调试模式下运行测试以在出现错误时暂停并手动与浏览器交互。

npx playwright test --debug

此模式以非无头状态启动浏览器并打开 Playwright Inspector，允许您逐步完成测试代码。

**b. 剧作家督察**

Playwright Inspector 是一款交互式工具，可让您：

逐步执行测试。

突出显示页面上的元素。

查看 DOM 的当前状态。

在您的代码中启用检查器：

const { test } = require('@playwright/test');

test('example test', async ({ page }) => {
  await page.pause(); // Launches Playwright Inspector
  await page.goto('https://example.com');
  await page.click('#button');
});

**c. 慢动作模式**

以慢动作运行测试以观察每个步骤。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 100 });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.click('#button');
  await browser.close();
})();

2. 增强日志记录

**a. 调试日志**

启用调试日志以获取有关测试执行的详细信息。

DEBUG=pw:api npx playwright test

这会记录所有 Playwright API 调用，帮助您了解测试期间发生的情况。

**b. 自定义日志记录**

在测试中添加自定义日志来跟踪变量值和执行流：

console.log('Navigating to example.com');
await page.goto('https://example.com');
console.log('Clicked the button');
await page.click('#button');

3. 截图和视频

捕获屏幕截图和视频来回顾测试执行期间发生的情况。

**a. 失败时捕获**

配置 Playwright 在测试失败时截取屏幕截图或录制视频：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

**b. 手动截图**

在测试中的特定点截取屏幕截图：

await page.screenshot({ path: 'screenshot.png' });

4. 使用断点进行调试

**a. 在 IDE 中使用断点**

如果您使用的是 VS Code 之类的 IDE，请在测试代码中设置断点并在调试模式下运行 Playwright 测试：

在测试中添加调试器语句：

debugger;

在 VS Code 中启动调试器。b. 附加到 Node.js

使用Node.js调试工具附加到测试进程：

node --inspect-brk node_modules/.bin/playwright test

5.分析网络和控制台日志

**a. 捕获网络流量**

拦截并分析网络请求以调试 API 交互：

page.on('request', request => console.log('Request:', request.url()));
page.on('response', response => console.log('Response:', response.url()));

**b. 监听控制台日志**

从浏览器捕获并打印控制台日志：

page.on('console', msg => console.log('Console log:', msg.text()));

6. 处理不稳定的测试

不稳定的测试可能很难调试。下面介绍如何解决这些问题：

**a. 重试失败的测试**

启用重试来捕获间歇性故障：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  retries: 2,
});

**b. 调试特定测试**

运行启用调试的单个测试：

npx playwright test --project=chromium --grep "test name"

**c. 使用测试钩子**

添加钩子来在不稳定测试期间记录附加信息：

test.beforeEach(async ({ page }) => {
  console.log('Starting test');
});

test.afterEach(async ({ page }) => {
  await page.screenshot({ path: `test-failure.png` });
});

7. 调试的最佳实践

在本地重现问题：使用与 CI 环境相同的配置在本地运行测试。

检查依赖项：确保所有浏览器版本和 Playwright 依赖项都是最新的。

隔离测试：单独运行测试以隔离问题。

分析报告：使用 HTML 测试报告来追踪故障。

结论

调试 Playwright 测试并非一项艰巨的任务。借助 Playwright Inspector、详细日志记录和网络分析等功能，您可以快速识别和解决问题。通过采用这些调试技术，您不仅可以节省时间，还可以提高测试套件的可靠性。

您最喜欢的 Playwright 调试技巧是什么？请在下方评论中分享！

CLIS.CC