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

news2024/11/29 2:38:58

介绍

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

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

相关文章

2023-11 | 短视频批量下载/爬取某个用户的所有视频 | Python

2023-11 | 短视频批量下载/爬取某个用户的所有视频 | Python

这里以鞠婧祎的个人主页为demo https://www.douyin.com/user/MS4wLjABAAAACV5Em110SiusElwKlIpUd-MRSi8rBYyg0NfpPrqZmykHY8wLPQ8O4pv3wPL6A-oz 【2023-11-4 23:02:52 星期六】可能后面随着XX的调整, 方法不再适用, 请注意 找到接口 找到https://www.douyin.com/aweme/v1/web/…
阅读更多...
rust入门基础案例：猜数字游戏

rust入门基础案例：猜数字游戏

案例出处是《Rust权威指南》，书中有更加详细的解释。从这个例子中，我们可以了解到 rust 的两个操作： 如何从控制台读取用户输入rust 如何生成随机数 代码格式化 编译器可在保存时对代码做格式化处理，底层调用 rustfmt 来实现&a…
阅读更多...
【gpt redis】原理篇

【gpt redis】原理篇

用的黑马程序员redis课程的目录，但是不想听讲了。后续都是用gpt文档获取的。 1.课程介绍(Av766995956,P145) 2.Redis数据结构-动态字符串(Av766995956,P146) sds 1M是个界限 其实他是个由c语言实现的结构体 有这么几个参数 len alloc flag char[] len是实际长度 …
阅读更多...
【漏洞复现】Apache Log4j Server 反序列化命令执行漏洞（CVE-2017-5645）

【漏洞复现】Apache Log4j Server 反序列化命令执行漏洞（CVE-2017-5645）

感谢互联网提供分享知识与智慧，在法治的社会里，请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 1.5、深度利用1、反弹Shell 说明内容漏洞编号CVE-2017-5645漏洞名称Log4j Server …
阅读更多...
Python 中的 Gzip 解压

Python 中的 Gzip 解压

我们将介绍Python中的gzip解压。 我们还将介绍如何使用 gzip 解压缩来解压缩压缩内容。 Python 中的 Gzip 解压 Python 中构建了许多用于压缩和解压缩目的的库，但我们将介绍 Gzip 库。 它是一种流行的数据压缩工具。 我们可以使用 gzip 通过将数据编码为人类无法读…
阅读更多...
字符型液晶显示器LCD 1602的显示控制（Keil+Proteus）

字符型液晶显示器LCD 1602的显示控制（Keil+Proteus）

前言 趁机把LCD 1602的实验完成了，那个电路图有几个地方没弄懂，但是去掉也没有报错，就没管了。 LCD1602_百度百科 (baidu.com)https://baike.baidu.com/item/LCD1602/6014393?frge_ala LCD1602液晶显示屏通过电压来改变填充在两块平行板之…
阅读更多...
Python算法例5 x的n次幂

Python算法例5 x的n次幂

1. 问题描述 实现函数Pow（x，n），计算并返回x的n次幂。 2. 问题示例 Pow（2.1，2）4.41；Pow（0，1）0；Pow（1，0&…
阅读更多...
C++——类和对象之运算符重载

C++——类和对象之运算符重载

运算符重载 本章思维导图： 注：本章思维导图对应的xmind文件和.png文件都已同步导入至”资源“ 文章目录 运算符重载[toc] 1. 运算符重载的意义2. 函数的声明2.1 声明运算符重载的注意事项 3. 函数的调用4. const成员函数4.1 const成员函数的声明4.2 注意…
阅读更多...
C++查漏补缺与新标准（C++20,C++17,C++11）02 C++快速回顾（二）

C++查漏补缺与新标准（C++20,C++17,C++11）02 C++快速回顾（二）

本内容参考C20高级编程 C风格的数组 //形如 int myArray[3]{2};一个比较新颖的获取C风格数组大小的函数std::size()&#xff0c;返回size_t类型&#xff08;在中定义的无符号整数&#xff09; #include <iostream> using namespace std;int main() {int myArray[5] {…
阅读更多...
UML---用例图

UML---用例图

UML–用例图 0.用例图简介 用例图是一种UML&#xff08;统一建模语言&#xff09;的图形化表示方法&#xff0c;用于描述系统的功能和行为。它可以帮助系统分析师和开发人员理解系统的需求&#xff0c;用例图由参与者、用例和它们之间的关系组成。 1.用例图的组成部分 系统…
阅读更多...
【RabbitMQ】RabbitMQ 消息的可靠性 —— 生产者和消费者消息的确认，消息的持久化以及消费失败的重试机制

【RabbitMQ】RabbitMQ 消息的可靠性 —— 生产者和消费者消息的确认，消息的持久化以及消费失败的重试机制

文章目录 前言&#xff1a;消息的可靠性问题一、生产者消息的确认1.1 生产者确认机制1.2 实现生产者消息的确认1.3 验证生产者消息的确认 二、消息的持久化2.1 演示消息的丢失2.2 声明持久化的交换机和队列2.3 发送持久化的消息 三、消费者消息的确认3.1 配置消费者消息确认3.2…
阅读更多...
订单业务和系统设计（一）

订单业务和系统设计（一）

一、背景简介 订单其实很常见&#xff0c;在电商购物、外卖点餐、手机话费充值等生活场景中&#xff0c;都能见到它的影子。那么&#xff0c;一笔订单的交易过程是什么样子的呢&#xff1f;文章尝试从订单业务架构和产品功能流程&#xff0c;描述对订单的理解。 二、订单业务…
阅读更多...
飞书开发学习笔记(二)-云文档简单开发练习

飞书开发学习笔记(二)-云文档简单开发练习

飞书开发学习笔记(二)-云文档简单开发练习 一.云文档飞书开发环境API 首先还是进入开放平台 飞书开放平台&#xff1a;https://open.feishu.cn/app?langzh-CN 云文档相关API都在“云文档”目录中&#xff0c;之下又有"云空间",“文档”&#xff0c;“电子表格”&a…
阅读更多...
LLM系列 | 26：阿里千问Qwen模型解读、本地部署

LLM系列 | 26：阿里千问Qwen模型解读、本地部署

引言 简介 预训练 数据来源 预处理 分词 模型设计 外推能力 模型训练 实验结果 部署实测 对齐 监督微调(SFT) RM 模型 强化学习 对齐结果(自动和人工评估) 自动评估 人工评估 部署实测 总结 引言 人生自是有情痴&#xff0c;此恨不关风与月。 ​ 今天这篇小…
阅读更多...
从零开始：开发你的第一个抖音小程序

从零开始：开发你的第一个抖音小程序

抖音小程序提供了独特的机会&#xff0c;能够让你将自己的创意和内容传播给数百万的抖音用户。本文将带你走一趟开发抖音小程序的旅程&#xff0c;从零开始&#xff0c;无需编程经验。你将了解到如何准备开发环境、创建你的第一个小程序&#xff0c;以及如何将它发布到抖音平台…
阅读更多...
辅助驾驶功能开发-功能规范篇(22)-9-L2级辅助驾驶方案功能规范

辅助驾驶功能开发-功能规范篇(22)-9-L2级辅助驾驶方案功能规范

1.3.7.2 行人、骑行者（横向）AEB 系统 1.3.7.2.1 状态机 1.3.7.2.2 信号需求列表 同 1.3.2.1.2。 1.3.7.2.3 系统开启关闭 同 1.3.2.1.3。 触发横向 AEB 的目标包括横向运动的行人、骑行者（包括自行车、摩托车、电瓶车和平衡车上的行人）。 1.3.7.2.4 制动预填充 制动系统…
阅读更多...
Global-aware siamese network for change detection on remote sensing images

Global-aware siamese network for change detection on remote sensing images

遥感图像中的变化检测是以有效的方式识别观测变化的最重要的技术选择之一。CD具有广泛的应用&#xff0c;如土地利用调查、城市规划、环境监测和灾害测绘。然而&#xff0c;频繁出现的类不平衡问题给变化检测应用带来了巨大的挑战。为了解决这个问题&#xff0c;我们开发了一种…
阅读更多...
Spring Boot 整合SpringSecurity和JWT和Redis实现统一鉴权认证

Spring Boot 整合SpringSecurity和JWT和Redis实现统一鉴权认证

&#x1f4d1;前言 本文主要讲了Spring Security文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力…
阅读更多...
VPN网络环境下 本地客户端能连上mysql 本地启服务连不上mysql的原因

VPN网络环境下 本地客户端能连上mysql 本地启服务连不上mysql的原因

背景 公司mysql使用的是华为云RDS&#xff0c;由于要做一些测试验证&#xff0c;需要本地通过VPN直连华为RDS节点&#xff1b;找运维配置好网络后&#xff0c;本地 telnet 内网ip 3306 以及通过navicat客户端都能正常连接数据库&#xff1b;但是本地启动的服务就是连接不上。问…
阅读更多...
【PyQt学习篇 · ⑩】：QAbstractButton的使用

【PyQt学习篇 · ⑩】：QAbstractButton的使用

文章目录 QAbstractButton简介子类化抽象类图标设置快捷键设置自动重复状态设置排他性点击设置点击有效区域可用信号 QAbstractButton简介 QAbstractButton 是一个抽象类&#xff0c;无法直接实例化&#xff0c;但它提供了很多在 PyQt 中使用按钮时常用的功能和特性。开发人员…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023