《PlayWright全解析——从入门到精通》-6

1315 2023-07-17

参数 test page playwright 截图

我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。

查看原文：《PlayWright全解析——从入门到精通》-6

文章来源：

TestOps

扫码关注公众号

在软件开发过程中，有时我们需要对尚未完成或存在问题的后端API接口进行模拟（Mock）。例如，一个第三方接口没有测试环境或者正在开发中的接口还未上线。

Mock接口示例

以下是使用Playwright来模拟API接口响应的代码示例：

第一个示例简单地模拟了一个API接口的返回值：


    await page.route('https://dog.ceo/api/breeds/list/all', async route => {
      const json = { message: { 'test_breed': [] } };
      await route.fulfill({ json });
    });

第二个示例在模拟返回前，先执行了一个实际的请求，并修改了响应内容：


    await page.route('https://dog.ceo/api/breeds/list/all', async route => {
      const response = await route.fetch(); // 先去做请求
      const json = await response.json(); // 提取响应体
      json.message['big_red_dog'] = []; // 修改响应
      await route.fulfill({ response, json }); // 返回修改后的响应
    });

测试案例与配置

Playwright允许我们在测试案例文件中进行特定设置，比如阻止CSS文件的加载：


    import { test, expect } from '@playwright/test';
    
    test.beforeEach(async ({ context }) => {
      await context.route(/.css$/, route => route.abort()); // 阻止CSS文件加载
    });
    
    test('loads page without css', async ({ page }) => {
      await page.goto('https://playwright.dev'); // ...页面加载操作
    });

同时，我们可以在配置文件中设置全局代理：


    import { defineConfig } from '@playwright/test';
    export default defineConfig({
      use: {
        proxy: {
          server: 'http://myproxy.com:3128',
          username: 'usr',
          password: 'pwd'
        }
      }
    });

为了监控请求和响应，可以注册事件监听：


    page.on('request', request => console.log('>>', request.method(), request.url()));
    page.on('response', response => console.log('example-test-1-chromium-darwin.png', response.url()));

使用Playwright更新截图快照：


    npx playwright test --update-snapshots

截图对比

Playwright允许设置多种参数来实现截图的模糊对比，例如通过像素差异的最大允许值。

全局设置或测试案例中单独设置的参数包括截图名称、动画、缩放、差异接受程度（threshold）、超时时间（timeout）等。

视频录制

Playwright可以记录测试过程的视频，这在默认的test-results目录下，并且可以通过配置文件来启用。这一功能依赖于ffmpeg工具。

视频录制的配置示例如下：


    import { defineConfig } from '@playwright/test';
    export default defineConfig({
      use: {
        video: 'on-first-retry',
      },
    });

视频录制的模式包括不录制（'off'）、仅在失败时保留（'retain-on-failure'）等。