持续 UI 测试管道：BrowserStack 与 GitHub Actions-js教程-PHP中文网

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions
您是否知道 88% 的用户不会返回体验不佳的网站，即使这些网站提供优质的服务和内容？是时候认识到无缝的用户界面 (UI) 和用户体验 (UX) 对于产品或公司的成功至关重要，而不仅仅是奢侈品。

这就是持续 UI 测试介入的地方。抛弃传统的测试方法，持续 UI 测试将自身集成到开发和部署的几乎每个步骤中。这不仅确保了所有浏览器和设备的完美性，而且在不减慢开发流程的情况下实现了精度。

在本博客中，我们将探讨角色 BrowserStack 和 GitHub Actions。前者（BrowserStack）允许您在真实的浏览器和设备上运行自动化测试，并确保无与伦比的准确性。而另一方面，GitHub Actions 会在您推送代码时无缝触发测试工作流程，从而自动执行此过程。让我们来探讨一下如何。

为什么持续的 UI 测试如此重要？

在当今的动态环境中，忽视定期 UI 测试会导致以下问题：

布局损坏：代码中的微小更改可能会无意中破坏设计、错放元素或导致界面无响应。
跨浏览器兼容性错误：您的应用程序可能在一种浏览器中无缝运行，但最终会在另一种浏览器中崩溃。这对于用户来说尤其令人沮丧。
糟糕的用户体验：有问题的界面需要几秒钟才能赶走用户。这直接影响您的品牌声誉和收入。

在任何给定的 CI/CD 工作流程中，风险会随着代码中的每次连续更改而成倍增加。定期的 UI 一致性检查可以提前突出此类问题和风险。在构建阶段投资这些测试和检查实际上是可行的，而无需承担昂贵的修复、最后一刻的更改、客户流失和延迟发布的麻烦。

一致 UI 检查的一些重要优势包括：

提高开发速度：如果着眼于长期运行路径，您不会随机调试，而是在构建阶段解决代码中的损坏问题。自动化测试提高了速度和创新。
更高的可靠性：持续测试肯定会减少可能已经溜进生产环境的 UI 错误。因此，您终于在所有环境中都获得了一致的性能！

手动测试与持续 UI 测试：

Aspect	Continuous UI Testing	Manual Test Techniques
Execution Time	Automated & faster	Slow & resource-intensive
Coverage	Comprehensive across browsers and devices	Limited to selected devices
Scalability	Scalable with CI/CD workflows.	Difficult to scale with frequent changes
Error Detection	Consistent & accurate error detection	Prone to human & other errors
Cost Efficiency	Lower with automation.	Expensive over time due to manual effort

方面持续 UI 测试手动测试技术标题> 执行时间自动化且更快缓慢且资源密集型覆盖范围跨浏览器和设备的全面性仅限选定的设备可扩展性可通过 CI/CD 工作流程进行扩展。频繁更改难以扩展错误检测一致且准确的错误检测容易出现人为错误和其他错误成本效率通过自动化降低。由于手动操作，随着时间的推移，成本会很高表>

什么是 BrowserStack ？

BrowserStack 被认为是领先的基于云的测试平台，它本质上允许开发人员跨各种浏览器、操作系统和设备测试他们的应用程序。它是任何内部设备实验室的完美替代品。 BrowserStack 的额外优势包括：

针对您平台的视觉测试：帮助您获得一致的用户体验，而无需担心平台碎片。无缝检测视觉回归并实现像素完美的设计。
支持自动化测试：您可以在 BrowserStack 上轻松运行 Cypress、Selenium 或任何其他测试框架，以进行干净、稳健的 UI 验证。
跨浏览器和设备测试：验证跨不同设备的不同浏览器和版本的无缝运行。

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

什么是 GitHub Actions？

它是一个与 GitHub 无缝集成的自动化工具。 “操作”可帮助开发人员启动、管理和触发工作流程，特别是基于代码推送、PR（拉取请求）或计划的触发器。 GitHub Actions 的一些主要功能是：

并行执行：它本质上有助于同时运行作业，以节省时间并加速交付。
可自定义管道：通过使用针对任何特定 CI/CD 需求定制的 YAML 文件，操作可以非常高效地定义项目工作流程。
广泛集成：您可以与 BrowserStack、AWS 等第三方工具无缝结合，实现任何类型的全面自动化。
事件驱动的工作流程：可能是最好的部分，它允许基于存储库事件实现任务自动化，例如运行测试或部署存储库代码。

先决条件：

以下是使用 BrowserStack 和 GitHub Actions 执行界面测试设置所需的工具列表：

GitHub 存储库。
访问 BrowserStack（自动化）。
Selenium/Cypress 测试脚本（或博客中提供的示例脚本）。

BrowserStack 如何与 GitHub Actions 集成？

最终了解选择 BrowserStack 和 GitHub Actions 的关键交付成果后，我们可以得出结论，它们一起可以证明是有效的健壮性和自动化的。进一步阅读以了解它如何让您的 UI 测试在不同的设备和浏览器上运行变得干净。欢迎来到集成过程的分步技术演练：

Step-1 :	Event Triggering: Activating Your Workflow
Step-2 :	Code Checkout: Preparing the Test Environment
Step-3 :	Test Execution on BrowserStack: Running UI Tests
Step-4 :	Results Collection and Reporting

让我们看看上面给出的四个步骤中每个步骤的详细方法：

第 1 步：事件触发器：激活您的工作流程

通过说“事件驱动”，我们本质上是指 GitHub Actions 中的工作流程是由存储库事件触发的。它的工作原理就像一个门铃——在它被激活并触发预定义的响应之前不会发生任何事情。

与此类似，GitHub Actions 有几个事件，可以通过它们以某种方式触发工作流程（取决于事件）。一些例子是：

- 推送：代码被推送到特定分支（例如，main、develop等）
  
  * 拉取请求 (PR)： 启动、同步或合并拉取请求。
  
  * 删除：删除分支或标签时。

您可以借助任何给定 .yml 文件中的配置来理解这些示例事件：

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

登录后复制

第二步：代码检查：准备测试环境

现在，此过程的下一步是使用 GitHub Actions 中的工作流程来获取您的存储库代码库。我们可以通过 actions/checkout 操作来实现它，这将进一步确保存储库的所有测试脚本和配置文件都可以成功执行。

YAML 片段的示例可以是：

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

登录后复制

？
默认情况下，签出操作仅获取最新提交以加快工作流程。如果需要，请使用 fetch-depth: 0 获取完整的存储库历史记录。

第 3 步：在 BrowserStack 上执行测试：运行 UI 测试

将 BrowserStack 与 GitHub Actions 集成的关键本质在于在 BrowserStack 强大的基础设施上无缝执行 UI 测试。这一关键的设置允许开发人员非常有效地自动化任何类型的跨浏览器测试。因此，您可以在任何不同的环境中获得一致的应用程序性能。以下详细介绍了如何在 BrowserStack 中配置测试执行：

设置 BrowserStack 凭据：

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

登录后复制

    ```yaml
    steps:
      - name: Set BrowserStack Credentials
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
    ```

登录后复制

安装依赖项：

* You must then install the project dependencies based on your project (e.g., Selenium, Cypress). This `.yml` file could be an example:

登录后复制

    ```yaml
    steps:
      - name: Install Dependencies
        run: |
          npm install
          npm run build
    ```

登录后复制

通过 BrowserStack CLI 或 API 执行测试：

* Configure the test runner to execute on BrowserStack Automate:  
    Example for Selenium:

登录后复制

    ```yaml
    steps:
      - name: Run Selenium Tests on BrowserStack
        run: |
          npx selenium-standalone start &
          npm test
    ```

登录后复制

* Example for Cypress (via BrowserStack Cypress CLI):

登录后复制

    ```yaml
    steps:
      - name: Run Cypress Tests on BrowserStack
        run: |
          browserstack-cypress run --sync
    ```

登录后复制

第四步：结果收集和报告

如上所述，BrowserStack 通过为您全面生成报告和分析来提供完美的报告和分析。其中主要包括：

执行日志：一组用于调试的分步日志。
屏幕截图：捕获关键测试步骤并将其提交给您。
视频：实时完成的测试执行的完整记录。
测试状态：应用程序通过、失败和跳过的测试的突出显示。

上述工件可以轻松链接到 GitHub Actions 工作流程，以便于访问。以下是我们如何以 .yml 文件为例。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

登录后复制

集成的高级功能

并行测试执行：

使用 BrowserStack Automate 的并行测试功能在不同的浏览器和设备上同时运行多个测试用例。这可以通过测试框架的设置进行配置（例如，Selenium 中的 maxInstances）。
动态浏览器和设备矩阵：

使用 JSON 配置动态定义测试矩阵，从而可以轻松更新被测浏览器和设备：
```
steps:
  - name: Checkout Repository
    uses: actions/checkout@v3
```
登录后复制
登录后复制
登录后复制

错误通知：

使用 Slack 或电子邮件等集成设置工作流程失败通知：

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

登录后复制

技术图

下图展示了集成工作流程

GitHub 事件： 代码推送或拉取请求触发工作流程。
CI Pipeline： GitHub Actions 获取代码和依赖项。
BrowserStack 执行： 在 BrowserStack Automate 上运行测试。
测试结果：生成日志、屏幕截图和报告并链接回工作流程。

通过利用 BrowserStack 和 GitHub Actions 的无缝集成，团队可以自动化他们的 UI 测试，确保跨设备和浏览器的全面覆盖，同时加速他们的 CI/CD 管道。

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

此集成简化了 UI 测试，使团队能够及早发现问题并更快地交付高质量的应用程序。

提高 UI 测试效率的专业技巧

利用并行测试：通过同时在多个浏览器和设备上运行测试来加快测试周期，减少运行时间并提高覆盖率。
实施重试机制：实施重试以减少片状测试影响，确保结果一致。
采用视觉回归测试：使用 Percy 等工具通过比较视觉快照来捕获意外的 UI 更改，确保无缝的用户界面。

常见问题及其解决方法

在实施持续 UI 测试时，您可能会遇到一些常见的挑战。以下是一些解决这些问题的故障排除技巧：

片状测试：

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

登录后复制

配置错误：

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

登录后复制

浏览器兼容性问题

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

登录后复制

在这种情况下您可以采用的最佳实践：

维护稳定的测试环境：设置专用的测试环境，确保结果一致。
监控测试性能：密切关注测试执行时间并避免运行不必要的测试。
查看日志：当测试无法清楚地了解问题所在时，始终检查日志。
并行测试：为了提高效率和覆盖范围，请同时跨多个浏览器和设备进行测试。

通过解决这些常见问题并遵循最佳实践，您可以提高 UI 测试的可靠性并确保更流畅的测试体验。

Keploy：简化测试自动化，重点关注速度和准确性

Keploy 是一个开源、无代码测试平台，旨在简化现代应用程序的测试生成和执行。通过自动捕获 API 交互，它有助于生成可靠且全面的测试用例，无需人工干预。

为什么在持续 UI 测试中使用 Keploy？

自动测试创建：Keploy 通过在运行时记录 API 调用自动生成测试用例，减少手动编写脚本的需要。
回归测试：它通过检测和标记偏差来确保您的应用程序保持一致的性能。
无缝 CI/CD 集成：Keploy 与 GitHub Actions 和 BrowserStack 等工具配合使用，提高 CI/CD 管道的效率。
更快的迭代：它能够减少测试脚本编写时间，使团队能够专注于开发和创新。

用例：

将 Keploy 与 BrowserStack 配对可提供全面的测试解决方案，涵盖 API 和 UI 元素，以实现一致的跨平台性能。通过将 Keploy 纳入您的工作流程，您可以进一步提高测试效率并加速交付，同时保持一流的应用程序质量。

结论

在当今快节奏的开发环境中，持续的 UI 测试不再是一种奢侈，而是一种必需品。 BrowserStack 和 GitHub Actions 等工具使团队能够通过自动化复杂的测试流程来提供无缝的跨平台用户体验。这些集成可实现更快的开发周期、更高的可靠性并降低成本，确保您的应用程序满足最高的质量标准。

通过将这些工具与 Keploy 等创新平台配对，您可以将测试策略提升到一个新的水平，在开发周期的早期捕获 UI 和 API 级问题。这不仅可以加速您的 CI/CD 管道，还可以增强应用程序的整体弹性和用户满意度。