playwright控制端到端执行速度

1. 引言

一次产品迭代结束后的复盘会上，产品团队在观看了有playwright实现的端到端自动化测试视频后，提出这样的问题：“视频不错，但是操作太快了，能不能慢一点？”

首先想到的单个操作是可以加delay: 300，如:

await page
    .locator('#id')
    .click({ delay: 100})

但是总不能每一步都加{delay: 100}吧。有没有在项目级配置的参数可以实现以上需求呢？是在操作比如click在Playwright中，我们可以通过使用 slowMo 选项来实现执行速度的减缓。本文将介绍如何在不同层次（全局、项目、用例）配置 slowMo，以及它的应用场景和实际操作。

2. slowMo 简介

查询到slowMo选项可以用于实现现执行速度的控制，默认值是0。

slowMo 是Playwright提供的一个选项，允许在测试执行时减缓整体速度，使得操作更容易观察和调试。这对于定位问题、截图和录制测试视频非常有帮助。

2.1 配置 slowMo 的三种方式

全局配置

你可以在全局配置文件中设置slowMo，这将影响所有项目和测试用例。在项目根目录下的 playwright.config.ts 或 playwright.config.js 中添加如下代码：

// playwright.config.ts

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

const config: PlaywrightTestConfig = {
  slowMo: 100, // 设置全局的 slowMo 毫秒数
};

export default config;

项目级配置

如果你只想在特定项目中减缓测试速度，可以在该项目的配置文件中设置 slowMo。在项目目录下的 playwright.config.ts 或 playwright.config.js 中添加如下代码：

// playwright.config.ts

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

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'project-with-slowMo',
      slowMo: 100, // 设置项目级别的 slowMo 毫秒数
    },
  ],
};

export default config;

用例级配置

如果你只想在特定测试用例中减缓速度，可以在测试文件中设置 slowMo。在测试文件中的 test 函数中添加如下代码：

// your-test-file.ts

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

test.use({ slowMo: 100 }); // 设置用例级别的 slowMo 毫秒数

test('your test case', async ({ page }) => {
  // your test logic
});

2.2 应用场景

调试和观察：在测试执行时减缓速度，有助于更好地观察浏览器的每一步操作，方便排查问题。视频录制：如果你需要录制测试执行过程制作演示视频，减缓速度可以确保视频更加清晰。

小总结

通过 slowMo 选项，我们可以在不同层次（全局、项目、用例）配置测试执行的速度，从而更好地满足调试和观察的需求。在实际应用中，根据具体情况选择合适的层次进行配置，提高测试的可观察性和调试效率。

gitlab ci环境运行自动化测试

1. 前置条件

开始之前，请确保满足以下前提条件：

• Playwright测试可以在本地环境中运行正常
• Gitlab账号及项目
• Node.js和npm基础

2. `Playwright`配置

2.1 `Playwright`环境

首先，确保在您的项目中安装了 Playwright。如果没有的话，可使用npm进行安装：

npm install playwright

2.2 `Playwright` 测试

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

test('basic test', async ({ page }) => {
  await page.goto('https://baidu.com');
  const title = await page.title();
  expect(title).toBe('百度一下，你就知道');
});

3.`Gitlab CI`配置

3.1 `.ymal`文件配置

在项目的根目录中创建 .gitlab-ci.yml 文件，并配置 GitLab CI 以运行 Playwright 测试。以下是一个示例配置：

image: mcr.microsoft.com/playwright:focal

stages:
- test

playwright_tests:
  stage: test
  script:
- npx playwright install --with-deps
- npx playwright test
  artifacts:
    paths:
- playwright-report/
    expire_in:1 week

说明如下

• image: 使用官方的 Playwright Docker 镜像，确保环境中包含运行 Playwright 测试所需的所有依赖项。
• stages: 定义了一个名为 test 的阶段。
• playwright_tests: 定义了一个作业 playwright_tests，它将在test阶段运行。
• script: 定义了在作业中运行的脚本，包括安装 Playwright 依赖项和运行测试。
• artifacts: 指定要保存的测试报告路径和过期时间。

3.2 更新到`Gitlab`仓库

将更改推送到 GitLab 仓库：

git add .
git commit -m "Add Playwright tests and GitLab CI configuration"
git push origin main

3.3 查看测试结果

• 每次推送代码到 GitLab 仓库时，GitLab CI 会自动触发 Playwright 测试并生成测试报告。
• 可以在 GitLab 项目的 CI/CD 部分查看作业的执行状态和详细日志。

3.4 环境变量

可以在 .gitlab-ci.yml 文件中添加环境变量，以便在测试中使用：

playwright_tests:
  stage: test
  script:
    - npx playwright install --with-deps
    - npx playwright test
  variables:
    BASE_URL: 'https://example.com'
  artifacts:
    paths:
      - playwright-report/
    expire_in: 1 week

3.5 并行设置

可以利用 GitLab CI 的并行作业功能，加快测试执行速度：

playwright_tests:
  stage: test
  script:
    - npx playwright install --with-deps
    - npx playwright test
  parallel: 3
  artifacts:
    paths:
      - playwright-report/
    expire_in: 1 week

3.6 监控

3.7 日志检查

3.8 日志下载

4. 结论

Playwrght不仅提供了本地环境自动化测试运行方式，还支持在docker、jenkins、gitlab运行，配置相对容易，能把自动化测试融合到研发cicd流水线，提高交付效率和质量。