网站建设步骤详解,与网站建立的连接不安全,如何把自己网站推广出去,企业简介介绍介绍 端到端测试是软件开发的一个重要方面#xff0c;因为它确保系统的所有组件都能正确运行。CodeceptJS是一个高效且强大的端到端自动化框架#xff0c;与Playwright 结合使用时#xff0c;它成为自动化Web、移动甚至桌面 (Electron.js) 应用程序比较好用的工具。 在本文中…介绍 端到端测试是软件开发的一个重要方面因为它确保系统的所有组件都能正确运行。CodeceptJS是一个高效且强大的端到端自动化框架与Playwright 结合使用时它成为自动化Web、移动甚至桌面 (Electron.js) 应用程序比较好用的工具。 在本文中作者探讨如何使用 CodeceptJS、Playwright 和 GitHub Actions 构建端到端测试流水线。
GitHub操作 GitHub Actions 是一个功能强大且灵活的 CI/CD 平台能够让软件开发工作实现自动化。借助 GitHub Actions大家可以直接在 GitHub 存储库中快速自动化你的开发、测试或操作流程。GitHub Actions 与 CodeceptJS 和 Playwright 无缝集成为项目的测试自动化需求提供可靠的解决方案。 准备环境 从配置环境变量开始这些环境变量将定义流水线的运行方式以及控制其行为。通常项目运行多个环境因此我们将定义BASE_URL变量作为在运行环境之间交替的最小值。 导航到 GitHub 存储库设置然后在Secrets and Variables部分下选择Actions。单击“变量”选项卡将显示此存储库的所有变量的列表。 GitHub存储库环境变量设置 单击“新存储库变量”New repository variable进行创建BASE_URL该变量会将测试自动化指向您的 Web 应用程序 URL。 可以使用环境变量实现的其他有用设置 HEADLESStrue- 在流水线内运行无头模式或在本地计算机上运行无头模式来调试测试场景。 DEVICE_SCALE_FACTOR1- 在本地开发测试场景时避免屏幕闪烁对于 MacBook 屏幕使用 2。 ACCESSIBILITYtrue- 在端到端测试中包含可访问性报告。 RECORD_HARtrue- 在 HTTP 存档中记录网络流量以用于调试目的。
流水线
创建一个 YAML 格式的新文件来配置流水线并将其放入.github/workflows文件夹中。
// e2e-test-automation.ymljobs: test-automation: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammysteps: - uses: actions/checkoutv4 - uses: actions/setup-nodev3 with: node-version: latest- name: Install dependencies run: npm ci- name: Run test automation run: npm run test env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output- uses: actions/upload-artifactv3 if: always() with: name: artifacts path: output retention-days: 30
多种浏览器
在 CodeceptJS 配置文件中定义 Web 浏览器配置文件。
// codecept.conf.ts{ //... multiple: { desktop: { browsers: [ { browser: chromium }, { browser: firefox }, { browser: webkit } ] }, }, //...} 为每个浏览器配置文件创建单独的 npm 脚本。
// package.jsontest:chrome: npx codeceptjs run-multiple desktop:chromium --steps,test:firefox: npx codeceptjs run-multiple desktop:firefox --steps,test:safari: npx codeceptjs run-multiple desktop:webkit --steps, 这种运行 CodeceptJS 场景的方式将为测试运行者尝试执行的每个步骤提供详细的反馈。 并行测试运行 为了使该过程更加高效请使用多个工作线程并行运行测试场景。
// package.jsontest:chrome: npx codeceptjs run-workers 3 desktop:chromium,test:firefox: npx codeceptjs run-workers 3 desktop:firefox --steps,test:safari: npx codeceptjs run-workers 3 desktop:webkit --steps CodeceptJS 将仅显示失败场景的详细步骤这是大多数情况下所需要的。 使用一致的帮助程序依赖项 在本例中我们使用 Playwright 作为 CodeceptJS 帮助程序因此请确保 Playwright npm 包版本与流水线中的 Docker 映像版本匹配。 // package.jsondevDependencies: { ... codeceptjs: ^3.5.5, playwright: ^1.38.1, ...} 仔细检查 GitHub Actions 流水线配置中的 Docker 映像版本。 // e2e-test-automation.ymljobs: test-automation: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammy 如果版本不一致将失败并显示一条不太明显的消息。 包含 Playwright 错误消息的 GitHub Actions 日志 每个浏览器都有一个单独的工作 在单独的 GitHub Actions 作业上运行每个浏览器以便在所有浏览器中高效测试您的应用程序。
// e2e-test-automation.ymljobs: chrome: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammysteps: - uses: actions/checkoutv4 - uses: actions/setup-nodev3 with: node-version: latest- name: Install dependencies run: npm ci- name: Run Google Chrome tests run: npm run test:chrome env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output-chrome- uses: actions/upload-artifactv3 if: always() with: name: chrome-artifacts path: output-chrome retention-days: 30firefox: ...safari: ... 修复Firefox在GitHub Actions上运行的问题 对于 Firefox在 Github Actions 中运行 Playwright 自动化失败并显示错误消息不支持在常规用户会话中以 root 身份运行 Nightly。 不支持在常规用户会话中以 root 身份每晚运行的GitHub Actions 日志错误 要解决此问题我们需要通过HOME在流水线中添加环境变量来解决该问题。 // e2e-test-automation.yml- name: Run Firefox scenarios run: npm run test:firefox env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output-firefox- HOME: /root 完整的GitHub Actions流水线 // e2e-test-automation.ymlname: E2E Test Automation
on: [ push ]
jobs: chrome: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammysteps: - uses: actions/checkoutv4 - uses: actions/setup-nodev3 with: node-version: latest- name: Install dependencies run: npm ci- name: Run Chrome scenarios run: npm run test:chrome env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output-chrome- uses: actions/upload-artifactv3 if: always() with: name: chrome-artifacts path: output-chrome retention-days: 30firefox: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammysteps: - uses: actions/checkoutv4 - uses: actions/setup-nodev3 with: node-version: latest- name: Install dependencies run: npm ci- name: Run Firefox scenarios run: npm run test:firefox env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output-firefox # Workaround to fix GitHub Actions issue: # Running Nightly as root in a regular users session is not supported. # See https://github.com/microsoft/playwright/issues/6500 HOME: /root- uses: actions/upload-artifactv3 if: always() with: name: firefox-artifacts path: output-firefox retention-days: 30safari: timeout-minutes: 30 runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.38.1-jammysteps: - uses: actions/checkoutv4 - uses: actions/setup-nodev3 with: node-version: latest- name: Install dependencies run: npm ci- name: Run Safari scenarios run: npm run test:safari env: BASE_URL: ${{ vars.BASE_URL }} HEADLESS: ${{ vars.HEADLESS }} OUTPUT_PATH: output-safari- uses: actions/upload-artifactv3 if: always() with: name: safari-artifacts path: output-safari retention-days: 30 总结 使用CodeceptJS、Playwright和GitHub Actions构建端到端测试流水线为自动化测试场景提供了强大的解决方案。通过利用 CodeceptJS 和 Playwright 的功能可以轻松地跨不同浏览器和环境进行自动化测试。GitHub Actions 允许在 GitHub 存储库中无缝集成和自动化测试流程。 本文中概述的配置和设置希望给大家提供参考。 相关地址 https://github.com/microsoft/playwright/issues/6500
https://github.com/bear-plus/codeceptjs-playwright-typescript-boilerplate
https://github.com/bear-plus
