使用 Playwright-Network-Cache 增强您的 ETests

首页 > 编程 > 使用 Playwright-Network-Cache 增强您的 ETests

使用 Playwright-Network-Cache 增强您的 ETests

发布于2024-11-07

Supercharge Your ETests with Playwright-Network-Cache

简介

当使用像 Playwright 这样的端到端测试框架时，处理网络请求通常是一项复杂的任务。依赖外部 API 的测试可能会很慢且不一致，从而引入不必要的不稳定。由于服务器缓慢或不可靠，在一次测试运行中成功的网络调用可能在下一次测试运行中失败，从而导致结果不一致。为了解决这个问题，开发人员经常诉诸模拟网络请求，这带来了另一个挑战：管理模拟。

如果有一种自动化的方式来处理缓存和重用网络响应而不需要设置复杂的模拟策略，这不是很棒吗？我研究了现有的方法并开发了一个我想介绍的工具。它通过在文件系统上缓存网络请求来解决这些具体问题，从而实现更快、更可靠的 Playwright 测试。

测试中网络请求的问题

网络请求通常是测试执行中最慢的部分。运行多个测试套件时，重复查询外部 API 会显着增加测试持续时间。此外，现实世界的 API 可能不稳定，偶尔会超时，使您的测试脆弱且不可靠。

缓解这种情况的常见方法是模拟 API 响应。虽然有用，但模拟需要手动干预 - 您需要仔细构建模拟响应，不断更新它们，并确保处理每个潜在的网络场景。随着 API 的发展或测试用例的变化，这可能会成为巨大的维护负担。 Playwright 支持 HAR 文件来捕获和重放网络流量，但使用 HAR 可能很乏味，并且缺乏动态修改响应的灵活性。

输入剧作家网络缓存

playwright-network-cache 旨在简化 Playwright 测试中缓存网络响应的过程，消除对手动模拟或严格的 HAR 文件的需要。有了这个库，网络响应在第一次测试运行期间会自动存储在文件系统上，并且可以在后续运行中重用，从而显着加快测试执行速度。此外，响应保存在清晰、有组织的文件夹结构中，以便根据需要轻松检查和修改它们。

它如何解决问题

自动缓存：第一次运行测试时，库会自动缓存网络响应。这意味着您的测试在将来的运行中不必等待外部 API 响应 - 将使用缓存的数据，从而实现更快、更可靠的测试。
动态修改：需要调整特定测试用例的响应？ playwright-network-cache 允许您动态修改缓存的响应。无论您想要更改状态代码、标头还是响应正文，该库都提供了即时调整缓存数据的选项，而无需手动维护单独的模拟。
灵活的结构：缓存系统根据主机名、请求方法和 URL 路径组织文件，确保您可以轻松浏览和管理缓存数据。对于更复杂的情况，您甚至可以按请求查询参数、请求正文或其他自定义字段拆分缓存文件，确保数据存储和重用方式的完全灵活性。
速度提升：通过重用缓存的响应，您的测试不再需要等待网络调用完成，从而使测试速度显着加快。当使用大型测试套件或在速度至关重要的 CI 环境中运行测试时，这特别有用。
不再有模拟地狱：忘记手动维护模拟。该库会为您处理一切 - 从缓存到重放，甚至修改响应。您不再需要为每个测试场景手动制作模拟响应，并且可以更多地关注测试逻辑。
无 HAR 复杂性：HAR 文件对于记录和重放网络交互非常有用，但它们很快就会变得很麻烦，尤其是当您需要修改响应时。 playwright-network-cache 提供了一种更干净、更灵活的 HAR 替代方案，让您可以将各个响应作为简单的 JSON 文件进行管理。

例子

假设您正在测试一个从 API 获取猫列表的应用程序。如果没有缓存，每次测试运行都需要向 API 发出实时请求，从而为您的测试增加延迟和潜在的故障点。

使用 playwright-network-cache，您可以轻松缓存 API 响应：

test('test', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats');
  // Perform usual test actions...
});

第一次运行时，响应被缓存在 .network-cache 目录中，其结构如下：

.network-cache
└── example.com
    └── api-cats
        └── GET
            ├── headers.json
            └── body.json

在后续运行中，缓存的响应将被重用，从而使测试速度更快，并且无需访问实际的 API。

您可以根据特定测试需求修改缓存的响应：

test('test', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats', {
    modify: async (route, response) => {
      const json = await response.json();
      json[0].name = 'Kitty-1';
      await route.fulfill({ json });
    }
  });
  // Perform usual test actions...
});

要在测试中获取可用的 cacheRoute 变量，请像任何其他 Playwright 固定装置一样实例化它：

// fixtures.js
import { test as base } from '@playwright/test';
import { CacheRoute } from 'playwright-network-cache';

export const test = base.extend({
  cacheRoute: async ({ page }, use) => {
    const cacheRoute = new CacheRoute(page, { /* cache options */ });
    await use(cacheRoute);
  },
});

库文档中还有许多其他示例和用例。