如何使用CodeceptJS、Playwright和GitHub Actions构建端到端测试流水线

最新推荐文章于 2024-09-02 09:28:28 发布
最新推荐文章于 2024-09-02 09:28:28 发布
阅读量178 收藏
点赞数
分类专栏： 程序员 软件测试 程序人生 文章标签： github 测试工具 程序员 功能测试 python java 自动化测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx17343624830/article/details/134181885
版权
软件测试 同时被 3 个专栏收录
3313 篇文章 44 订阅
订阅专栏
程序员
2841 篇文章 6 订阅
订阅专栏
程序人生
2704 篇文章 27 订阅
订阅专栏

 

端到端测试是软件开发的一个重要方面，因为它确保系统的所有组件都能正确运行。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。

可以使用环境变量实现的其他有用设置：

  • HEADLESS=true- 在流水线内运行无头模式或在本地计算机上运行无头模式来调试测试场景。

  • DEVICE_SCALE_FACTOR=1- 在本地开发测试场景时避免屏幕闪烁（对于 MacBook 屏幕使用 2）。

  • ACCESSIBILITY=true- 在端到端测试中包含可访问性报告。

  • RECORD_HAR=true- 在 HTTP 存档中记录网络流量以用于调试目的。

流水线

创建一个 YAML 格式的新文件来配置流水线并将其放入.github/workflows文件夹中。

// e2e-test-automation.yml
jobs:
  test-automation:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.38.1-jammy

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        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-artifact@v3
        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.json
"test: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.json
"test: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.json
"devDependencies": {
  ...
  "codeceptjs": "^3.5.5",
  "playwright": "^1.38.1",
  ...
}

仔细检查 GitHub Actions 流水线配置中的 Docker 映像版本。

// e2e-test-automation.yml
jobs:
  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.yml
jobs:
  chrome:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.38.1-jammy

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        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-artifact@v3
        if: always()
        with:
          name: chrome-artifacts
          path: output-chrome
          retention-days: 30

  firefox:
    ...

  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.yml
name: E2E Test Automation

on: [ push ]

jobs:
  chrome:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.38.1-jammy

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        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-artifact@v3
        if: always()
        with:
          name: chrome-artifacts
          path: output-chrome
          retention-days: 30

  firefox:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.38.1-jammy

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        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 user's session is not supported.
          # See https://github.com/microsoft/playwright/issues/6500
          HOME: /root

      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: firefox-artifacts
          path: output-firefox
          retention-days: 30

  safari:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.38.1-jammy

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        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-artifact@v3
        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

行动吧，在路上总比一直观望的要好，未来的你肯定会感谢现在拼搏的自己！如果想学习提升找不到资料，没人答疑解惑时，请及时加入群： 786229024，里面有各种测试开发资料和技术可以一起交流哦。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

在这里插入图片描述

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

爱吃 香菜
关注
专栏目录
codeceptjs前端UI自动化测试
好好学习
06-07 1261
最近做UI自动化测试，就选择了codeceptjs。其框架好处文档里都有，比如 场景驱动——从用户的角度编写验收测试。使测试可读且易于遵循。 Driver Agnostic — 测试可以通过WebDriver、Puppeteer、TestCafe、Protractor、Appium等帮助程序运行。所有这些代码都是相同的。 初始化项目 npm init -y npm install -g allure-commandline npm i codeceptjs --save 一路回车键或者自行定义 .b
使用playwright进行自动化端到端测试
wrc的专栏
02-15 1049
项目希望能接入自动化端到端测试提高可靠性，发现微软的 playwright 还挺好用的，推荐一下，顺便说下遇到的一些难点以及最佳实践。
CodeceptJS入门
zhaofuyuan135的博客
07-22 1507
CodeceptJS入门安装nodejs安装CodeceptJS第一个自动化脚本 安装nodejs Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/ 安装CodeceptJS 在常用的工作目录新建一个文件夹（eg：codeceptdemo），打开控制台cd到该目录，然后初始化npm PS E:\Docoument> cd codeceptdemo PS E:\Docoument\codeceptdemo> npm init -y Wrote
开源项目推荐：构建高效32位流水线MIPS处理器
最新发布
gitblog_01132的博客
09-02 349
开源项目推荐：构建高效32位流水线MIPS处理器 项目地址:https://gitcode.com/gh_mirrors/mi/MIPS-Processor 项目介绍 在数字逻辑和计算机体系结构的探索之旅中，MIPS（Microprocessor without Interlocked Pipeline Stages）处理器因其简洁的设计和教学价值而备受青睐。今天，我们为您呈现一个基于Verilo...
前端-端到端自动化测试工具CodeceptJS介绍及使用
2301_76387166的博客
05-20 1153
CodeceptJS是一个基于Node.js的测试框架，用于进行端到端测试（End-to-End Testing）。它将浏览器交互抽象为简单直观的步骤，并可以在执行时通过传入--step参数输出它们，下面是一个简单的步骤示例。
测试开发——初识CodeceptJS
爱敲代码的三毛的博客
08-10 692
CodeceptJS
Github Actions自动化部署——自动上服流水线
大家好鸭！这里记录着Java女预备程序猿学习路程和心路。
07-14 1107
Github Actions自动化部署——自动上服流水线，关于CI/DI
Pytest + Playwright + Allure + BDD 框架与GitHub Action集成并以GitHub Pages发布Allure测试报告
笑笑的博客
01-29 1632
本文主要是想通过以Pytest + Playwright + Allure + BDD框架为demo的项目，介绍项目怎样与 Github的持续集成工具GitHub Action进行集成并展示allure report，如果大家对框架搭建感兴趣，可以参考另一篇文章。
使用 Playwright 为企业 Web 应用程序提供可靠的端到端测试
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
03-06 444
对测试和开发的跨浏览器支持也是一个很大的挑战，尤其是在测试并非所有浏览器都支持的移动应用程序时。此外，还有其他与实施相关的成本，例如当出现问题时的维护成本完全是由于开发人员的测试实践不当，而不是由于这些方面的任何技术问题。大多数开发人员使用多种浏览器来测试他们的应用程序，但最终用户也会根据他们使用的设备（例如，台式机与移动设备）使用不同的浏览器。端到端测试是用于测试应用程序在不同平台和浏览器上的行为的过程。在不同的浏览器和平台上测试你的应用程序以确保它在将要使用它的所有环境中正常运行是很重要的。
playwright-pytest:Pytest插件可使用Playwright编写端到端浏览器测试
04-13
使用和为您的Web应用编写端到端测试。 支持所有现代浏览器，包括Chromium，W​​ebKit和Firefox。 支持无头和有头的执行。 提供浏览器原语以测试功能的内置固定装置。 用法 pip install pytest-playwright 使用...
playwright-typescript-ts-jest-jest-expect:使用TypeScript，Jest和Expect的Playwright端到端测试自动化样板
03-04
Playwright的端到端测试自动化样板，使用 ， ， 和Expect。 克隆或派生此存储库。 入门 1. git clone git@github.com:e2e-boilerplate/playwright-typescript-ts-jest-jest-expect.git 2. cd playwright-...
codeceptjs.zip
08-27
demo采用pageobject模式构建的e2e测试，框架采用的是codeceptjs+webdriver+mochasowe，包括在Jenkins上运行的命令
codeceptjs-bdd:Javascript BDD UI 自动化框架。 独家 LWC Shadow DOM 支持。 剧作家、Webdriver.io、Appium、Saucelabs
08-04
UI 测试自动化框架 框架与 BDD Cucumber、Webdriver、Playwright、SauceLabs 和 Selenoid 集成。 独家支持自动化 WebComponents、LWC 应用程序和轻松定位 #shadow-roots 元素。 这是 Javascript UI 自动化框架，用于自动化 Mocha 风格的低级集成测试或基于 Webdriver 的高级 E2E 测试（BDD 或传统）测试。 测试在各种平台上运行，例如 Playwright Mobile/Tablet 浏览器、SauceLabs、SelenoidGrid、Appium 和本地浏览器。 :rainbow: PWA 网站： :delivery_truck: :movie_camera: 如何视频 贡献者 感谢这些优秀的人，他们为这个很棒的项目做出了贡献！
Gitlab 流水线配置总结
weixin_42202310的博客
09-20 1172
Build是构建流程，可以在script 写下自己的脚步，package是打包流程，可以把打出的包进行归档，test、deploy 是测试和部署。CI/CD 流水线，点击运行流水线，选择分支配置变量，选择创建流水线，流水线就创建起来了，可以通过作业来查看流水线日志。安装完成之后就可以在ci/cd配置的runner中看到我们可用的runner了。4、使用以下命令将GitLab Runner链接到您的GitLab服务器。4、使用以下命令将GitLab Runner链接到您的GitLab服务器。
使用 GitHub Actions 构建 CI/CD 流水线
qq_36697163的博客
07-12 859
使用 GitHub Actions 构建 CI/CD 流水线
日常生产用项目一整套DevOps流水线搭建-笔记二(GithubAction实现自动化部署)
ZYM66的博客
01-13 638
GitHub Actions使你可以直接在你的GitHub库中创建自定义的工作流，工作流指的就是自动化的流程，比如构建、测试、打包、发布、部署等等，也就是说你可以直接进行 CI（持续集成）和 CD（持续部署）。简单地说，就是利用官方以及第三方提供的actions，组合action来实现一些你能做到的其他事情，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。借鉴:https://blog.csdn.net/Ber_Bai/article/details/120310024。
在 Kubernetes 上执行 GitHub Actions 流水线作业
hanfengzxh的博客
07-13 713
GitHub Actions 是一个功能强大、“免费” 的 CI（持续集成）工具。 与之前介绍的 Tekton 类似，GitHub Actions 的核心也是 Pipeline as Code 也就是所谓的流水线即代码。二者不同的是，GitHub Actions 本身就是一个 CI 平台，用户可以使用代码来定义流水线并在平台上运行；而 Tekton 本身是一个用于构建 CI/CD 平台的开源框架。 Pipeline as Code，既然与代码扯上了关系。那流水线的定义就可繁可简了，完全看需求。小到一个 G.
使用 docker+jenkins+codecept+seleniod 搭建前端测试框架
DJ355的博客
07-27 285
随着前端开发的不断发展，测试已经成为了一个非常重要的环节。为了保证前端应用的质量和稳定性，我们需要进行各种类型的测试，包括自动化测试、手动测试、端到端测试等。在实际的开发中，我们可以使用 Docker、Jenkins、Codecept 和 Selenium WebDriver 等工具来搭建一个前端测试平台，从而大大提高测试效率和质量。
使用Playwright和Python实现跨平台自动化测试
Playwright 提供了同步和异步的 API，使得开发者可以结合主流测试框架进行使用，进一步提高了自动化测试的灵活性和效率。 Playwright 的亮点之一是支持无头模式和有头模式的运行。无头模式是指浏览器在后台运行，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值