剧作家是验证您的应用程序最重要的用户流量是否按预期工作的绝佳工具。但是，您是否知道剧作家也可以帮助您验证这些流程看起来也如预期的那样？此过程称为视觉回归测试或简短的视觉测试。并且对于验证各种UI详细信息非常有帮助：响应式设计转移，跨浏览器/设备差异，本地化，动态内容等。
在这篇文章中，我们将介绍如何使用剧作家运行视觉回归测试。我们将在示例E2E测试中添加视觉测试，并在发生变化时穿过典型的工作流程。对于此练习，我们将假设您已经配置并运行了至少一个E2E测试。
视觉测试如何工作？
剧作家的视觉测试围绕屏幕截图比较的过程。当测试开始时，剧作家将对正在测试的所有内容进行屏幕截图，并将其作为基线存储。然后，每当您更改代码时，剧作家都会使用另一个屏幕截图并将其与基线进行比较。
如果更改看起来正确，则可以接受它们，然后设置新的基线。否则，您可以在对结果感到满意时继续更新代码并接受。
创建屏幕截图
要在剧作家中开始视觉测试，让我们从示例E2E测试开始，该测试打开对话框，然后单击其中的关闭按钮：
// tests/dashboard.spec.ts
import { test, expect } from "@playwright/test";
test("Dashboard", async ({ page }) => {
await page.goto("/dashboard/acme");
await expect(page).toHaveTitle(/Acme Dashboard/);
const expandButton = await page.locator(
".main .card:nth-child(0) .btn-expand"
);
await expandButton.click();
const dialog = await page.locator(".dialog");
const closeButton = await dialog.locator(".btn-close");
await closeButton.click();
});
剧作家提供了page.screenshot API，以进行您重新测试的页面屏幕截图。要使用它，请添加一条线，该行调用应在应拍摄屏幕截图的流处的部分：
// tests/dashboard.spec.ts
import { test, expect } from "@playwright/test";
test("Dashboard", async ({ page }) => {
await page.goto("/dashboard/acme");
await expect(page).toHaveTitle(/Acme Dashboard/);
const expandButton = await page.locator(
".main .card:nth-child(0) .btn-expand"
);
await expandButton.click();
const dialog = await page.locator(".dialog");
// 👇 Take a screenshot once the dialog is located
page.screenshot({ path: 'latencyExpanded.png' });
const closeButton = await dialog.locator(".btn-close");
await closeButton.click();
});
page.screenshot有一些可能对您有用的选项。您可以捕获完整的页面高度（而不是仅仅是视口高），并且可以配置保存屏幕截图的位置：
await page.screenshot({
fullPage: true, // Capture full page height
path: 'screenshot.png', // Provide save location
});
您还可以筛选一个特定元素，而不是整个页面：
await page.locator('.dialog').screenshot(...);
一旦您更新了测试，请运行测试命令以保存屏幕截图：
yarn playwright test
在上面的示例中，屏幕截图将保存在项目的根源中：
打开屏幕截图以确认其看起来正确：
现在，提交您的代码更改和新创建的屏幕截图。然后推动您的提交，使屏幕截图您的基线。
进行视觉测试
接下来，我们将使用该基线屏幕截图来验证更改。
首先，创建一个新的分支并进行代码更改。对于此示例，我们将更改主要图表颜色：
- fontFamily: 'system-ui, san-serif',
+ fontFamily: 'Inter, system-ui, san-serif',
进行更改后，再次运行测试命令以保存新的屏幕截图。再次打开屏幕截图以确认其看起来正确。
提交您的更改并为您的新分支机构制作PR。
现在，当我们查看该PR时，我们可以比较上一个基线屏幕截图和修改后的屏幕截图：
CI自动测试
到目前为止，在工作流程中，我们在本地计算机上创建了屏幕截图，然后将它们投入到您的存储库上。如果您正在与其他开发人员合作进行相同的E2E测试，这可能会导致问题，因为安装字体之类的设备差异可能会导致不必要的图像差异。
为了减轻这种情况，请在连续集成（CI）环境中获取屏幕截图，然后让您的CI作业处理屏幕截图并为您进行投入过程。然后，您可以像以前一样查看结果作为公关审查的一部分。
这里是使用github动作的示例：
# .github/workflows/e2e.yml
name: E2E tests
on: push
permissions:
contents: write
jobs:
E2E:
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v3
with:
node-version: '16'
- uses: actions/checkout@v3
- name: Install dependencies
run: yarn
- name: Install Playwright Browsers
run: yarn playwright install --with-deps
- name: Run tests
run: yarn playwright test
- name: Update E2E screenshots
run: |
git config --global user.name 'Your Name'
git config --global user.email 'you@example.com'
git commit -am "Update screenshots"
git push
屏幕截图仍然是您存储库的一部分（如果您有很多测试，可以占用很多空间），但是现在它们在共享，一致的环境中创建，消除了任何设备差异。
调试问题在此流程中可能很困难。静态屏幕截图通常没有提供足够的信息，并且调试真实页面需要通过登台环境导航并重新创建发生的任何互动。
与非发展者进行审查和合作也可能很棘手，因为这一切都发生在公关经验中，许多人都不熟悉。
可辩论的快照和协作评论
当您将剧作家与色彩作品集成时，您可以进一步采用此工作流程，这是一个基于云的视觉测试平台。
在上面的示例中，这里如何使用它：
// tests/dashboard.spec.ts
// ➖ Remove this line
// import { test, expect } from '@playwright/test';
// ➕ Add this line
import { test, expect, takeArchive } from "@chromaui/test-archiver";
test("Dashboard", async ({ page }) => {
await page.goto("/dashboard/acme");
await expect(page).toHaveTitle(/Acme Dashboard/);
const expandButton = await page.locator(
".main .card:nth-child(0) .btn-expand"
);
await expandButton.click();
const dialog = await page.locator(".dialog");
// 👇 Take a screenshot once the dialog is located
// ➖ Remove this line
// page.screenshot();
// ➕ Add this line
await takeArchive(page, testInfo);
const closeButton = await dialog.locator(".btn-close");
await closeButton.click();
});
，然后CI作业（在此处使用GitHub操作）是：
# .github/workflows/e2e.yml
name: E2E tests
on: push
jobs:
E2E:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Install dependencies
run: yarn
- name: Install Playwright Browsers
run: yarn playwright install --with-deps
# 👇 Run your E2E tests *before* running Chromatic for your E2E test archives
- name: Run tests
run: yarn playwright test
# 👇 Run Chromatic for your E2E test archives
- name: Publish E2E Archives to Chromatic
uses: chromaui/action@v1
with:
projectToken: ${{ secrets.CHROMATIC_ARCHIVE_PROJECT_TOKEN }}
buildScriptName: build-archive-storybook
现在，不用创建静态屏幕截图，而是运行测试将创建一个可以在浏览器中打开的页面的完全可疑的快照。这些快照是在专门的专业环境中创建的，从而使过程快速，一致，并保存在色彩数据库中，而不是使您的项目存储库混乱。一旦变色，快照就可以与您所有项目的所有利益相关者和贡献者都很容易共享。并且是一个用于查看视觉测试的网络应用程序，它与您的git提供商集成在一起。
现在，Chromatic's Playwright E2E testing integration is available to try in early access，在Beta期间免费使用。