如何使用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;
阅读更多...
【数据结构】数组和字符串（十五）：字符串匹配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 为什么要抓住核心用户 什么是用户？ 所有和产品有关系的群体就是用户，他们是一群既有共性，又有差异的群体组合 做产品为什么要了解用户？ 了解用户的付费点、更好的优化产…
阅读更多...
【软考中级】软件设计师-下午题

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

下午题 试题一 黑洞：加工有输入无输出 白洞(奇迹)：加工有输出无输入 灰洞：数据流输入的加工不足以产生输出 结构化语言： IF *** THEN ELSE IF *** THEN ******* END IF END IF 数据流的父子图平衡，如果父子图平衡就不…
阅读更多...
【CIO人物展】黄淮学院副CIO周鹏：构建数智化平台赋能学校高质量发展

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

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

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

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

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

（一） 标准输入 以键盘读取用户输入的数据，然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据，这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…
阅读更多...
【使用Python编写游戏辅助工具】第五篇：打造交互式游戏工具界面：PySide6/PyQT高效构建GUI工具

【使用Python编写游戏辅助工具】第五篇：打造交互式游戏工具界面：PySide6/PyQT高效构建GUI工具

前言 这里是【使用Python编写游戏辅助工具】的第五篇：打造交互式游戏工具界面：PySide6/PyQT高效构建GUI工具。本文主要介绍使用PySide6来实现构建GUI工具。 在前面，我们实现了两个实用的游戏辅助功能： 由键盘监听事件触发的鼠标连…
阅读更多...
IntelliJ IDEA 2023 最新版如何试用?IntelliJ IDEA 2023最新版试用方法及验证ja-netfilter配置成功提示

IntelliJ IDEA 2023 最新版如何试用?IntelliJ IDEA 2023最新版试用方法及验证ja-netfilter配置成功提示

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…
阅读更多...
[极客大挑战 2019]Http 1

[极客大挑战 2019]Http 1

题目环境： 看起来挺花里胡哨的 F12查看源代码寻找隐藏文件 这是啥子呀，果然防不胜防 点击隐藏文件Secret.php 它不是来自这个地址的请求 报头：https://Sycsecret.buuoj.cn 需要抓包，在抓包前了解部分数据包参数 GET:到 Host:来自 …
阅读更多...
ElementUI 自定义 Tree 树形控件背景

ElementUI 自定义 Tree 树形控件背景

在 template 中 <div class"container"><el-tree :data"treeList" :props"defaultProps" accordion node-click"handleNodeClick" /> </div> 在 script 中 treeList: [{ id: "-1", label: "区域选…
阅读更多...
由于flutter_app依赖于flutter_swiper＞=0.0.2，不支持零安全，版本解决失败。

由于flutter_app依赖于flutter_swiper＞=0.0.2，不支持零安全，版本解决失败。

参考 dart3.0使用flutter_swiper报错记录 flutter_swiper package - All Versions从官网的信息可以看到 Dart3版本不兼容 最小兼容的Dart SDK版本需要2.0 Flutter SDK 版本列表Flutter SDK 版本列表 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 说明&#xff1a;因…
阅读更多...
算法：Java构建二叉树并递归实现二叉树的前序、中序、后序遍历

算法：Java构建二叉树并递归实现二叉树的前序、中序、后序遍历

先自定义一下二叉树的类&#xff1a; // Definition for a binary tree node. public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left…
阅读更多...
对Java的多线程的理解

对Java的多线程的理解

说说对Java线程的理解 下面是AI的回答 Java线程就是Java程序里面可以同时运行多个任务。Java提供了几种创建和管理线程的方式&#xff0c;其中一种是继承Thread类&#xff0c;另一种是实现Runnable接口或Callable接口。jdk5提供了线程池&#xff0c;可以更方便地创建、启动和终…
阅读更多...
理解springboot那些过滤器与调用链、包装或封装、设计模式相关等命名规范，就可以读懂80%的springboot源代码，和其他Java框架代码

理解springboot那些过滤器与调用链、包装或封装、设计模式相关等命名规范，就可以读懂80%的springboot源代码，和其他Java框架代码

紧接上面《 理解springboot那些注册与回调、监控与统计等命名规范，就可以读懂70%的springboot源代码》、《 理解springboot那些约定俗成的框架类名、全局context等命名规范，就可以读懂一半springboot的源代码》2篇文章，此片将汇总springboot那些过滤器与调用链、包装或封装…
阅读更多...
【多线程】龟兔赛跑

【多线程】龟兔赛跑

package org.example;public class Race implements Runnable {//胜利者private static String winner;Overridepublic void run() {for(int i0;i<100;i){boolean flag gameOver(i);//如果flag>100,结束比赛if(flag){break;}System.out.println(Thread.currentThread().g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023