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

介绍

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/130735.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代码随想录算法训练营第23期day38|动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

代码随想录算法训练营第23期day38|动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

目录 一、动态规划理论基础 1.动态规划的解题步骤 2.动态规划应该如何debug 二、（leetcode 509）斐波那契数 1.递归解法 2.动态规划 1）确定dp数组以及下标的含义 2）确定递推公式 3）dp数组如何初始化 4&#x…
阅读更多...
C++虚表与虚表指针详解

C++虚表与虚表指针详解

类的虚表 每个包含了虚函数的类都包含一个虚表。 当一个类（B）继承另一个类（A）时，类B会继承类A的函数的调用权。所以如果一个基类包含了虚函数，那么其继承类也可调用这些虚函数，换句话说&…
阅读更多...
基于ASP.NET MVC + Bootstrap的仓库管理系统

基于ASP.NET MVC + Bootstrap的仓库管理系统

基于ASP.NET MVC Bootstrap的仓库管理系统。源码亲测可用，含有简单的说明文档。 适合单仓库，基本的仓库入库管理，出库管理，盘点，报损，移库，库位等管理，有着可视化图表。 系统采用Bo…
阅读更多...
MySQL导入数据库报错Error Code: 2006

MySQL导入数据库报错Error Code: 2006

Error Code: 2006 - MySQL server has gone away 因为导入的某张表数据过大导致导入中途失败 , 修改max_allowed_packet 即可解决。 SET GLOBAL max_allowed_packet 1024*1024*200;
阅读更多...
Asp.Net Core服务端处理请求过来的压缩格式

Asp.Net Core服务端处理请求过来的压缩格式

之前是直接传没有经过压缩的文件字节，有时文件过大的话，可能占宽带就多，宽带流量都是钱。后来有个想法，在客户端把文件进行压缩，把压缩的文件流发给服务端进行解压。 1，先修改项目中Startup.cs文件中Confi…
阅读更多...
【数据结构】数组和字符串（十五）：字符串匹配2：KMP算法（Knuth-Morris-Pratt）

【数据结构】数组和字符串（十五）：字符串匹配2：KMP算法（Knuth-Morris-Pratt）

文章目录 4.3 字符串4.3.1 字符串的定义与存储4.3.2 字符串的基本操作4.3.3 模式匹配算法0. 朴素模式匹配算法1. ADL语言2. KMP算法分析3. 手动求失败函数定义例1例2例3 4. 自动求失败函数（C语言）5. KMP算法（C语言）6. 失败函数答案…
阅读更多...
STM32F103C8T6第二天：按键点灯轮询法和中断法、RCC、电动车报警器（振动传感器、继电器、喇叭、433M无线接收发射模块）

STM32F103C8T6第二天：按键点灯轮询法和中断法、RCC、电动车报警器（振动传感器、继电器、喇叭、433M无线接收发射模块）

1. 点亮LED灯详解（307.11） 标号一样的导线在物理上是连接在一起的。 将 PB8 或 PB9 拉低，就可以实现将对应的 LED 灯点亮。常用的GPIO HAL库函数： void HAL_GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_InitTypeDef *GPIO_Init);//I/…
阅读更多...
产品经理入门学习（二）：产品经理问题思考维度

产品经理入门学习（二）：产品经理问题思考维度

参考引用 黑马-产品经理入门基础课程 1. 抓住核心用户 1.1 为什么要抓住核心用户 什么是用户？ 所有和产品有关系的群体就是用户，他们是一群既有共性，又有差异的群体组合 做产品为什么要了解用户？ 了解用户的付费点、更好的优化产…
阅读更多...
linux下构建rocketmq-dashboard多架构镜像——筑梦之路

linux下构建rocketmq-dashboard多架构镜像——筑梦之路

接上篇：linux上构建任意版本的rocketmq多架构x86 arm镜像——筑梦之路-CSDN博客 这里来记录下构建rocketmq-dashboard多架构镜像的方法步骤。 当前rocketmq-dashboard只有一个版本，源码地址如下： https://dist.apache.org/repos/dist/rele…
阅读更多...
uniapp页面间传参的方法

uniapp页面间传参的方法

在uniapp中，常见的页面传参方式有以下几种： URL传参 可以在跳转页面时，在url中添加参数，通过在目标页面的onLoad函数中的options参数获取传递的参数。示例代码如下： 在源页面中： uni.navigateTo({url: …
阅读更多...
从零实现的浏览器Web脚本

从零实现的浏览器Web脚本

从零实现的浏览器Web脚本 在之前我们介绍了从零实现Chrome扩展，而实际上浏览器级别的扩展整体架构非常复杂，尽管当前有统一规范但不同浏览器的具体实现不尽相同，并且成为开发者并上架Chrome应用商店需要支付5$的注册费，如果我们只…
阅读更多...
【软考中级】软件设计师-下午题

【软考中级】软件设计师-下午题

下午题 试题一 黑洞：加工有输入无输出 白洞(奇迹)：加工有输出无输入 灰洞：数据流输入的加工不足以产生输出 结构化语言： IF *** THEN ELSE IF *** THEN ******* END IF END IF 数据流的父子图平衡，如果父子图平衡就不…
阅读更多...
Mybatis 概述

Mybatis 概述

一、Mybatis 概述 1.Mybatis是什么？ MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息&#xff0…
阅读更多...
Python虚拟环境相关

Python虚拟环境相关

写深度学习代码前，总要把Github上许多开源代码下下来跑一下。不同的项目有不同的运行环境，因此，就免不了为每个项目配置不同的库。本科的时候嫌虚拟环境太麻烦，就直接略过没学，现在还是得来补课。 一般而言&#xff0…
阅读更多...
队列实现(基于内存池思想)

队列实现(基于内存池思想)

1. 阅读公司代码的时候，发现公司代码向串口打印，先把数据加载到数组中，进入临界区，然后通过串口输出，退出临界区。 2. 当然还有向flash写数据，直接一次性原文写入，也没进入临界区，挂…
阅读更多...
【CIO人物展】黄淮学院副CIO周鹏：构建数智化平台赋能学校高质量发展

【CIO人物展】黄淮学院副CIO周鹏：构建数智化平台赋能学校高质量发展

周鹏 本文由黄淮学院副CIO周鹏投递并参与《2023中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业—锐捷网络 大数据产业创新服务媒体 ——聚焦数据 改变商业 黄淮学院是2004年经教育部批准成立的一所省属全日制普通本科高校。学校位于素有“豫州之腹地、天下之最中”之美…
阅读更多...
第十七节——指令

第十七节——指令

一、概念 在Vue.js中，指令（Directives）是一种特殊的语法，用于为HTML元素添加特定的行为和功能。指令以v-作为前缀，通过在HTML标签中使用这些指令来操作DOM，修改元素的属性、样式或行为。 Vue.js提供了一组…
阅读更多...
地理信息系统原理-空间数据结构（7）

地理信息系统原理-空间数据结构（7）

​四叉树编码 1.四叉树编码定义 四叉树数据结构是一种对栅格数据的压缩编码方法，其基本思想是将一幅栅格数据层或图像等分为四部分，逐块检查其格网属性值（或灰度）；如果某个子区的所有格网值都具有相同的值&#xff0…
阅读更多...
Linux----------------Shell重定向输入输出

Linux----------------Shell重定向输入输出

（一） 标准输入 以键盘读取用户输入的数据，然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据，这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…
阅读更多...
Flink SQL Over 聚合详解

Flink SQL Over 聚合详解

Over 聚合定义（⽀持 Batch\Streaming）：**特殊的滑动窗⼝聚合函数，拿 Over 聚合 与 窗⼝聚合 做对⽐。 窗⼝聚合：不在 group by 中的字段，不能直接在 select 中拿到 Over 聚合：能够保留原始字段…
阅读更多...
最新文章

Copyright @ 2022~2023