7. .E2E工具-＜剧作家＞-CI

约定不等于承诺〃 2024-03-16 12:00 80阅读 0赞

您好，

今天我想谈谈将 Playwright 集成到您的 GitHub 操作 CI 中。

所以不要浪费时间，让我们开始吧。

首先，您必须创建一个playwright.yml在此路径中调用的文件.github/workflows。

'路径.github/workflows用于保存 GitHub 操作的文件，文件名对于 GitHub 并不重要，因为它的值在文件内部。

让我们开始将这段代码复制并粘贴到 playwright.yml 中

name: Playwright Tests
    on: [push]

这两个信息用于为 CI 命名并定义触发此 CI 的内容。

这些是您可以在世界上每个 GitHub Action 中找到的标准字段。

在这种情况下，CI 将触发项目中的每一次推送。

现在是时候添加第一个作业来在 CI 中运行端到端测试了。

为此，请将其添加到您的文件中。

jobs:
      test-e2e:
        timeout-minutes: 60
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
              node-version: 16
          - name: Install dependencies
            run: npm ci
          - name: Install Playwright Browsers
            run: npx playwright install --with-deps
          - name: Run Playwright tests
            run: npx playwright test
          - uses: actions/upload-artifact@v3
            if: always()
            with:
              name: playwright-e2e-report
              path: playwright-report/
              retention-days: 30

GitHub Action 中使用作业来运行不同的东西，例如构建、测试、部署等。

在此示例中， 的test-e2e作业创建了一个步骤列表以在 CI 中运行测试。

但是这项工作的作用是：

1.runs-on用于指示作业必须在哪个平台上运行

2.actions/checkout@v3签出代码

3.actions/setup-node@v3为作业设置节点版本

4.Install dependencies安装所有依赖项node\_modules

5.Install Playwright Browsers为 Playwright 安装浏览器

6.Run Playwright tests运行端到端测试

7.actions/upload-artifact@v3将测试结果上传到 GitHub Artifact

好的，这是 e2e 测试的工作；现在是时候为组件测试添加作业了。

为此，复制并粘贴以下代码

test-ct:
        timeout-minutes: 60
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
              node-version: 16
          - name: Install dependencies
            run: npm ci
          - name: Install Playwright Browsers
            run: npx playwright install --with-deps
          - name: Run Playwright tests
            run: npx playwright test -c playwright-ct.config.ts
          - uses: actions/upload-artifact@v3
            if: always()
            with:
              name: playwright-ct-report
              path: playwright-report/
              retention-days: 30

如您所见，它与之前的作业类似，但配置不同，因此我不深入研究。

现在有了这两个作业，您就有了一个可以运行的 CI。

为此，git add++git commit并git push进入您的在线 GitHub 存储库。在选项卡 Actions 中，您可以找到正在运行的 CI，如果单击它，您可以看到正在运行的两个作业。  
![在这里插入图片描述][89e81edfaa90488a9642e38c03ac6b4c.png]  
当 CI 结束时，您确定您的测试如预期的那样正常。结果会是这样的  
![在这里插入图片描述][f206910c3a0041c2be31c601aba42861.png]  
完美，现在您已配置第一个 GitHub 操作以使用 Playwright 运行测试。

好，这就是所有的人，我认为您拥有将 Playwright 集成到您的 CI 中的所有信息，没有任何问题。

如果你喜欢我的文章，记得关注获取更多的信息。感谢您的阅读，祝您有美好的一天！

[89e81edfaa90488a9642e38c03ac6b4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b34dcace953a494597ebbd4f8c83fbe9.png
[f206910c3a0041c2be31c601aba42861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e3d1ae70bb804aa291e34ed5264aade8.png