四、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
相关推荐
程序员爱钓鱼4 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子6 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆6 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了7 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆12 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆13 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆13 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆14 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er21 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子21 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript