四、Cypress测试框架拆解

Cypress测试框架拆解

前面咱们已经跑通了第一个Cypress测试用例,这一章就来深入看看它的"内部构造"。就像拆一台家用小电器,搞懂每个部件的作用,才能更好地驾驭它解决实际问题。

一、默认文件结构:Cypress的"五脏六腑"

第一次启动Cypress时,它会自动生成一套标准的文件结构,就像盖房子先搭好框架。这些文件夹各司其职,让测试工作条理清晰:

  • cypress/fixtures :测试数据的"仓库"

    这里放的是JSON格式的静态数据文件,比如登录用的账号密码、接口返回的模拟数据等。举个例子,创建一个user.json,把用户名密码存进去,测试时用cy.fixture('user')就能直接调用,不用在代码里反复写这些数据,改起来也方便。

  • cypress/integration :测试用例的"主战场"

    所有测试脚本(.js、.jsx等格式)都放在这里,Cypress会自动识别并执行。咱们之前写的登录测试用例,就该放在这个文件夹下。如果项目大,还能建子文件夹分类,比如按"登录""购物车""支付"分开管理,找起来一目了然。

  • cypress/plugins :功能扩展的"工具箱"

    默认有个index.js文件,用来扩展Cypress的能力。比如想在测试前连接数据库清理数据,或者动态修改配置,都可以在这里写代码,Cypress会在测试开始前自动加载执行。

  • cypress/support:自定义命令的"加工厂"

    • commands.js:可以把重复的操作封装成命令,比如"输入用户名→输入密码→点击登录"这一串步骤,写成cy.login(),之后在所有测试用例里直接调用,不用重复写代码。
    • index.js:负责加载上面的自定义命令,还能放一些全局配置,比如设置每个用例运行前都自动访问某个页面。

二、自定义配置:给Cypress"调参数"

Cypress很灵活,就像手机的"设置"界面,能根据项目需求调整各种参数,主要通过cypress.json文件或代码来配置:

  • 基础配置项

    比如设置基础URL,之后访问页面就不用写完整地址了;调整浏览器窗口大小,模拟手机或平板的显示效果:

    json 复制代码
    {
      "baseUrl": "http://localhost:7077",  // 基础地址,简化访问路径
      "viewportWidth": 375,              // 模拟手机宽度
      "viewportHeight": 667,             // 模拟手机高度
      "testFiles": "login/**/*.js"       // 只运行登录相关的测试用例
    }
  • 动态改配置

    代码里用Cypress.config()能临时调整参数,比如测试某个慢接口时,延长超时时间:

    javascript 复制代码
    // 把页面加载超时从默认60秒改成100秒
    Cypress.config('pageLoadTimeout', 100000)

三、重试机制:Cypress的"智能等待"

写自动化测试最头疼的就是"元素还没加载出来,代码就执行完了",导致测试失败。但Cypress有个贴心的"自动重试"功能,就像有人帮你盯着页面,等元素准备好了再执行操作:

比如这段代码,检查页面上的h1标签是否包含"欢迎回来":

javascript 复制代码
cy.get('h1').should('contain', '欢迎回来')

如果h1暂时没有这段文字,Cypress会在4秒内(可以通过defaultCommandTimeout调整)反复检查,直到文字出现才继续,不用手动写sleep等待。

不过要注意:只有查询元素的命令(比如get find)会重试,像click()这种可能改变页面状态的命令不会重试,避免重复操作出问题。

四、测试报告:给测试结果"出份成绩单"

测试跑完了,怎么清晰地展示结果?Cypress支持好几种"成绩单"格式,满足不同场景:

  • 命令行报告:默认直接在控制台显示,能看到每个用例的成功失败情况,适合本地调试。
  • JUnit格式:生成XML文件,方便Jenkins等持续集成工具读取,在流水线里展示测试结果。
  • Mochawesome报告:生成带截图的HTML报告,失败的步骤一目了然,适合分享给团队看。

生成报告很简单,运行时加个参数就行,比如生成HTML报告:

bash 复制代码
npx cypress run --reporter mochawesome
相关推荐
CCF_NOI.42 分钟前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9494 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_4 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔7 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang7 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔7 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas