如何使用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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

虚拟机VirtualBox添加磁盘

虚拟机VirtualBox添加磁盘

一、创建虚拟硬盘 二、虚拟硬盘分区 fdisk -l 我们新添加的磁盘/dev/sdb，还没有分区 sdb磁盘分区 fdisk /dev/sdb n 创建一个新分区 选择p添加主分区 我们把所有10GB空间都格式化为一个分区了 。 w 键入w，保存…
阅读更多...
Windows安装WinDbg调试工具

Windows安装WinDbg调试工具

一.下载 微软官网下载SDK的地址，有win11，win10，win8，win7，其他 https://developer.microsoft.com/en-us/windows/downloads/sdk-archive/ 二.安装 打开windbg\Installers\X64 Debuggers And Tools-x64_en-us.msi 要安…
阅读更多...
如何将R128的lspsram频率提高至200M？

如何将R128的lspsram频率提高至200M？

一、修改频率方法 首先通过cboot0命令，跳转到boot0的代码中，路径为： ${root_dir}/lichee/brandy-2.0/spl/ 找到lspsram的代码，路径为： ${root_dir}/lichee/brandy-2.0/spl/drivers/psram 修改头文件，将2…
阅读更多...
SQL Server2000mdf升级SQL Server2005数据库还原

SQL Server2000mdf升级SQL Server2005数据库还原

SQL Server2000数据库还原sqlserver 2000mdf升级 sqlserver 2008数据库还原SQL Server2005数据库脚本 sqlserver数据库低版本升级成高版本 sqlserver数据库版本升级 数据库版本还原 如果本机安装了sqlserver2012或者sqlserver2019等高版本 怎么样才能运行sqlserver2000的数据库…
阅读更多...
开启AWS的ubuntu服务器的root用户登录权限

开启AWS的ubuntu服务器的root用户登录权限

设置root用户密码 输入以下命令修改root用户密码 sudo passwd root输入以下命令切换到root用户 su root仅允许root用户用密码登录 输入以下命令编辑ssh配置文件 vi /etc/ssh/sshd_config新增以下配置允许root用户登录 PermitRootLogin yes把PasswordAuthentication修改为…
阅读更多...
设计模式—结构型模式之适配器模式

设计模式—结构型模式之适配器模式

设计模式—结构型模式之适配器模式 将一个接口转换成客户希望的另一个接口，适配器模式使接口不兼容的那些类可以一起工作，适配器模式分为类结构型模式（继承）和对象结构型模式（组合）两种，前者&a…
阅读更多...
【教3妹学编程-算法题】重复的DNA序列

【教3妹学编程-算法题】重复的DNA序列

3妹：“太阳当空照，花儿对我笑，小鸟说早早早，你为什么背上炸药包” 2哥 :3妹，什么事呀这么开心呀。 3妹：2哥你看今天的天气多好啊，阳光明媚、万里无云、秋高气爽，适合秋游。 2哥&…
阅读更多...
语言的新启程之Solidity

语言的新启程之Solidity

官方网站 WTF-Solidity官网 编译器 区块链的基础 Gas 一经创建，每笔交易都收取一定数量的 gas，目的是限制执行交易所需要的工作量和为交易支付手续费。EVM 执行交易时，gas 将按特定规则逐渐耗尽。 gas price 是交易发送者设置的一个值&…
阅读更多...
python模块的介绍和导入

python模块的介绍和导入

python模块的介绍和导入 概念 在Python中，每个Python代码文件都是一个模块。写程序时，我们可以将代码分散在不同的模块(文件)中，然后在一个模块中引用另一个模块的内容。 导入格式 1、在一个模块中引用(导入)另一个模块可以使用import语句…
阅读更多...
抖音极速版app拉新一手申请渠道 附快手极速版app拉新申请资料

抖音极速版app拉新一手申请渠道 附快手极速版app拉新申请资料

抖音极速版app拉新一手申请渠道 附快手极速版app拉新申请资料 通过“聚量推客”申请，价格更高 抖音极速版app拉新是地推百搭项目，部分团队作为主打项目推广，流程简单只需要新设备即可，如果你能做次留或者7日留存价格还是很可观的…
阅读更多...
非线性【SVM】的创建和使用

非线性【SVM】的创建和使用

先来绘制散点图： from sklearn.datasets import make_circles X,y make_circles(100, factor0.1, noise.1) # 100个样本，factor:内圈和外圈的距离之比，noise:噪声 X.shape y.shape plt.scatter(X[:,0],X[:,1],cy,s50,cmap"rainbow&qu…
阅读更多...
zabbix6.4监控centos

zabbix6.4监控centos

1、关闭防火墙 setenforce 0 #关闭SELinux sed -i "s/SELINUX=enforcing/SELINUX=disabled/g" /etc/selinux/config #设置永久关闭SELinux systemctl stop firewalld.service #关闭防火墙 systemctl disable firewalld.service …
阅读更多...
腾讯云服务器CVM S5服务器CPU性能测评和优惠价格表

腾讯云服务器CVM S5服务器CPU性能测评和优惠价格表

腾讯云服务器CVM标准型S5有活动，CVM 2核2G S5优惠价280.8元一年自带1M带宽，15个月313.2元、2核4G配置748.2元15个月、4核8G配置1437.24元15个月、8核16G优惠价3048.48元15个月，公网带宽可选1M、3M、5M或10M，腾讯云服务器网txyfwq.…
阅读更多...
SpringBoot项目打包与运行

SpringBoot项目打包与运行

1.clean生命周期 说明：为了项目能够正确打包，先清理打包文件。 2.package生命周期 说明：打包后生成以下目录。 2.1问题 说明：springboot_08_ssmp-0.0.1-SNAPSHOT.jar中没有主清单属性。 2.2解决 说明：注释skip&…
阅读更多...
jar包的精细化运营，Java模块化简介 | 京东云技术团队

jar包的精细化运营，Java模块化简介 | 京东云技术团队

图：模块化手机概念 一、什么是Java模块化 Java模块化（module）是Java9及以后版本引入的新特性。 官方对模块的定义为：一个被命名的，代码和数据的自描述集合。（ the module, which is a named, self-descri…
阅读更多...
Rocky9 上安装 redis-dump 和redis-load 命令

Rocky9 上安装 redis-dump 和redis-load 命令

一、安装依赖环境 1、依赖包 dnf -y install perl gcc gcc-c zlib-devel2、编译openssl 1.X ### 下载编译 wget https://www.openssl.org/source/openssl-1.1.1t.tar.gz tar xf openssl-1.1.1t.tar.gz cd openssl-1.1.1t ./config --prefix/usr/local/openssl make make ins…
阅读更多...
【移远QuecPython】EC800M物联网开发板的硬件PWM和PWM输出BUG

【移远QuecPython】EC800M物联网开发板的硬件PWM和PWM输出BUG

【移远QuecPython】EC800M物联网开发板的硬件PWM和PWM输出BUG 文章目录 导入库初始化PWM开启PWMPWM硬件BUG附录：列表的赋值类型和py打包列表赋值BUG复现代码改进优化总结 py打包 导入库 from misc import PWM_V2或者 from misc import PWM但我觉得PWM_V2好用 初…
阅读更多...
【Linux】基础IO之文件操作（文件fd）——针对被打开的文件

【Linux】基础IO之文件操作（文件fd）——针对被打开的文件

系列文章目录 文章目录 系列文章目录前言浅谈文件的共识 一、 回忆c语言对文件操作的接口1.fopen接口和cwd路径2.fwrite接口和"w"，"a"方法3.fprintf接口和三个默认打开的输入输出流（文件） 二、过渡到系统，认识…
阅读更多...
嵌入式中利用VS Code 远程开发原理

嵌入式中利用VS Code 远程开发原理

VS Code几乎是所有的程序员必备的工具之一，据说全球一般的开发者都使用过VS Code这款工具。 今天分享一篇 VS Code 实现远程办公相关的文章。 1、概 述 通常，我们都是每天到工作的办公室进行办公，但是，如果下班回家&#x…
阅读更多...
chrome 扩展 popup 弹窗的使用

chrome 扩展 popup 弹窗的使用

popup的基本使用方法 popup介绍 popup 是点击 browser_action 或者 page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。 popup配置 V3版本中（V2版本是在 browser_action 中 ）&#x…
阅读更多...
最新文章

Copyright @ 2022~2023