使用剧作家，Argos和GitHub动作自动进行视觉测试-DEV365 开发者社区

视觉测试使开发人员可以在应用程序成为问题之前识别和修复视觉错误。通过自动化视觉测试，开发人员可以确保其Web应用程序在进行更改和更新时看起来和功能。

在本指南中，我们将展示如何使用Playwright，Argos和GitHub Actions自动进行视觉测试。目的是将直接在GitHub内的每次拉普斯上的视觉更改通知，并在将视觉错误用于生产之前修复视觉错误。

安装Argos GitHub应用程序

要开始Argos，您首先需要安装Argos GitHub应用程序。这将允许Argos访问您的存储库，在抽取重试时添加测试状态，并在检测到视觉更改时通知您。

要安装Argos应用，请转到GitHub Marketplace，订阅Argos计划并完成安装。

剧作家和Argos设置

Playwright是一个强大的测试框架，可为端到端测试提供出色的开发人员体验和良好的开箱即用功能。要安装剧作家，请在您的终端中执行以下命令，然后在提示中回答问题：

npm init playwright@latest

要将剧作家与argos一起使用，您还必须安装以下软件包：

npm install --save-dev @argos-ci/cli  @argos-ci/playwright

@argos-ci/cli：将屏幕截图上传到Argos的最简单，最快的方法。
@argos-ci/playwright：提高屏幕截图稳定性并暴露CSS隐藏内容。

捕获屏幕截图

一旦安装了剧作家和Argos应用程序，就可以创建测试文件以捕获应用程序的屏幕截图。使用@argos-ci/playwright提供的argosScreenshot函数。

例如，以下测试文件将在主页上进行屏幕截图：

// tests/homepage.spec.ts
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
test.describe("Homepage", () => {
  test("take screenshot", async ({ page }) => {
    await page.goto("http://localhost:3000/");
    await argosScreenshot(page, "homepage");
  });
});

要运行测试，请使用剧作家测试命令：

npx playwright test

如果所有内容都正确设置了，则测试应通过，您应该在/screenshots文件夹中找到新的屏幕截图。

与github动作集成

通过捕获屏幕截图，您现在可以将视觉测试集成到github操作中连续集成。为此，您必须创建一个新的github操作工作流量文件，该文件运行剧作家测试并将屏幕截图上传到argos。

在您的存储库的根目录中创建一个名为.github/workflows/main.yml的新文件，并使用以下内容：

# file: .github/workflows/main.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npx playwright test
      - name: Upload screenshots to Argos
        run: npx @argos-ci/cli upload screenshots

此工作流定义了一项作业，该作业在拉动请求上运行到主分支。工作执行以下操作：

从GitHub查看代码
setup node.js 18
安装依赖项
与剧作家一起进行测试
将屏幕截图上传到argos

添加了工作流文件后，您可以提交并将更改推向存储库。 GitHub将自动开始在每个拉请求上运行工作流程。

监视视觉变化

您现在可以开始监视Web应用程序中的视觉更改。 Argos将检测并报告您的拉请求分支与main分支之间的任何视觉更改。

github检查状态

通过单击“详细信息”链接，您可以查看Argos中的比较结果。

argos示例构建

阅读this documentation如果您需要有关视觉测试工作流程的更多信息。

结论

在本指南中，我们向您展示了如何与剧作家，Argos和GitHub动作自动化视觉测试。通过将视觉测试集成到CI工作流程中，您可以在将视觉错误用于生产之前捕获和修复视觉错误。使用Argos，您可以轻松地配置基线，监视视觉更改并与您的团队合作解决问题。通过遵循本指南中概述的步骤，您可以确保您的Web应用程序外观和功能按预期进行外观和功能，即使您进行更改和更新。

我们希望这篇文章对此有所帮助。如果您有兴趣了解Argos如何帮助您提高Web应用程序的质量，请查看我们的documentation。而且，如果您准备开始自动化视觉测试，请随时注册free trial，看看Argos如何帮助您捕捉错误。

如果您需要有关视觉测试的更多信息，很高兴能在我们的Discord community上为您提供帮助。