playwright 导航菜单，报告与Trace功能

最新推荐文章于 2025-04-07 16:00:55 发布

原创最新推荐文章于 2025-04-07 16:00:55 发布

· 1.4k 阅读

22 ·

版权

文章标签：

#前端 #单元测试 #测试工具 #集成测试

《playwright》专栏收录该内容

39 篇文章

订阅专栏

菜单是必不可少的组成部分，帮助用户在页面之间跳转。通过自动化测试确保用户点击菜单后能跳转到正确的页面是非常重要的

1. 在桌面端测试菜单

首先，我们可以通过Playwright的测试生成器快速开始测试。我通常使用Playwright的VS Code扩展来生成测试。在VS Code的测试侧栏中，点击“记录新测试”按钮，这将创建一个test-1.spec.ts文件，你可以重命名为navigation.spec.ts。

点击“记录新测试”按钮后，将出现一个浏览器窗口，你可以在其中输入要测试的URL。Playwright会记录用户操作并自动生成测试代码。你可以点击菜单中的“About”链接，Playwright将自动为你生成以下代码：

import { expect, test } from '@playwright/test';
test(`test`, async ({ page }) => {
  await page.goto('/debbie.codes');
  await page.getByRole('navigation').getByRole('link', { name: 'About' }).click();
})

接下来，你可以修改测试，添加断言以确保点击后跳转到正确的URL。我们还可以修改page.goto，将其设置为 /，因为基本URL已经在playwright.config.ts文件中配置好。

import { expect, test } from '@playwright/test';
test(`menu links to about page`, async ({ page }) => {
  await page.goto('/');
  await page.getByRole('navigation').getByRole('link', { name: 'About' }).click();
  await expect(page).toHaveURL(/about/);
})

2.创建循环测试多个链接

为了测试菜单中的每个链接，我们可以创建一个包含所有链接的数组，然后使用循环来减少重复代码：

import { expect, test } from '@playwright/test';
const links = ['about', 'videos', 'podcasts', 'blog', 'courses']
test('menu links to correct page', async ({ page }) => {
  await page.goto('/');
  for (const link of links) {
    await page.getByRole('navigation').getByRole('link', { name: link }).click();
    await expect(page).toHaveURL(link);
  }
})

这个测试可以通过VS Code测试侧栏中的播放按钮运行，并检查所有菜单链接的正确性。

3. 在移动端测试菜单

当我们想在移动端运行相同的测试时，Playwright允许轻松设置移动视口。在playwright.config.ts中，已经有注释掉的移动视口配置，我们只需要取消注释：

projects: [
  {
    name: 'Mobile Chrome',
    use: {
      ...devices['Pixel 5'],
    },
  },
  {
    name: 'Mobile Safari',
    use: {
      ...devices['iPhone 12'],
    },
  },
]

在VS Code测试侧栏中，你可以点击播放按钮旁边的箭头，选择“默认配置文件”为Mobile Safari，以便在移动Safari浏览器上运行测试。

4.处理移动端隐藏菜单

在移动设备上，菜单通常通过汉堡菜单隐藏。我们需要告诉Playwright在移动端点击汉堡菜单以显示导航链接。可以通过isMobile fixture来实现这一点：

if(isMobile){
  await page.getByRole('button', { name: 'open menu' }).click();
}

使用describe和beforeEach整理代码我们可以使用describe块将测试分组，并通过beforeEach块简化代码，每个测试执行前都运行beforeEach中的代码。如下所示：

import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test.describe('navigation', () => {
  const links = ['about', 'videos', 'podcasts', 'blog', 'courses']
  test(`header nav links to correct pages`, async ({ page, isMobile }) => {
    for (const link of links) {
      if(isMobile){
        await page.getByRole('button', { name: 'open menu' }).click();
      }
      await page.getByRole('navigation').getByRole('link', { name: link }).click();
      await expect(page).toHaveURL(link);
    }
  });
})

通过VS Code测试侧栏运行此代码，你将看到测试在移动端通过。要在桌面端测试，只需将默认配置文件切换回Chromium，或者选择“所有配置文件”，即可在桌面和移动设备上运行测试。

小结论

通过介绍，你学习了如何使用Playwright测试导航菜单，无论是在桌面端还是移动端。借助Playwright强大的配置和功能，我们能够轻松管理不同设备的自动化测试流程。

5. 生成`HTML`报告

在Playwright中，生成HTML报告非常简单。只需在终端中运行以下命令：

npx playwright show-report

此命令将打开一个浏览器窗口，展示您所有测试的报告。报告中详细列出了测试使用的浏览器、每个测试所需的时间以及测试步骤。您还可以点击每一步查看其详细的执行代码。

6. `Trace Viewer`：强大的调试工具

Trace Viewer是Playwright中最强大的功能之一，它允许您查看并与测试的trace文件进行交互。通过Trace Viewer，您可以逐步查看测试的执行过程、调试问题，甚至查看页面的DOM快照。

7. 在`Playwright`配置中启用`Trace`功能

要启用Trace功能，首先需要修改playwright.config.ts文件。您可以根据需要选择不同的Trace选项：

• 'off'：不记录trace
• 'on'：为每个测试记录trace
• 'retain-on-failure'：仅为失败的测试保留trace
• 'on-first-retry'：仅在第一次重试时记录trace 例如，我们将trace设置为'on'，以确保每次测试都会生成trace文件：

const config: PlaywrightTestConfig = {
  use: {
    trace: 'on'
  }
}
export default config;

8.重新生成包含`Trace`文件的报告

在生成了新的trace文件后，您可以再次运行以下命令来查看报告：

npx playwright show-report

这将打开HTML报告，并在报告底部显示一个包含Trace文件的部分。点击Trace链接，将打开一个新的浏览器窗口，展示测试的Trace。

9. 查看`Trace`文件

Trace Viewer通过一个本地托管的PWA（渐进式Web应用）运行，提供了全面的测试信息和可视化分析工具。

• 时间轴：顶部的时间轴展示了测试的不同阶段，页面的每个状态都以不同颜色区分，如绿色表示点击操作，红色表示选择操作。
• 操作与元数据：左侧栏列出了每个测试动作及其元数据，点击某个动作，您将看到该动作的结果。
• DOM快照：中间部分显示的是页面的DOM快照，包含操作前后的页面状态，您可以清楚地看到页面在操作前后的变化。详细信息：右侧显示该动作的选择器、控制台日志、网络请求以及测试的源代码。通过这种方式，您可以对每一步操作进行详细的检查和调试。