如何在Cypress项目中读取JSON文件及解决JQuery导入问题？

嘿，刚接触Cypress确实会碰到一些新手小问题，别慌，我来帮你搞定这两个需求！

一、读取../example/vehicle.json文件 #

Cypress提供了原生的cy.readFile()命令来读取文件，这是最符合Cypress异步测试流程的方式，推荐优先使用：

方法1：使用cy.readFile()（推荐） #

// 注意：路径是相对于你的项目根目录（即cypress.config.js所在的目录）
cy.readFile('example/vehicle.json').then((vehicleData) => {
  // 读取成功后，vehicleData就是解析好的JSON对象
  console.log('读取到的车辆数据:', vehicleData);
  
  // 举个例子：访问JSON里的属性
  cy.log(`车辆品牌: ${vehicleData.brand}`);
  cy.log(`车辆年份: ${vehicleData.year}`);
});

小提醒：如果你的项目结构是项目根目录/example/vehicle.json，那直接写example/vehicle.json就行，不用加../——因为cy.readFile默认从项目根目录开始查找文件。如果路径不对，Cypress会在控制台报错，你可以根据提示调整路径。

方法2：ES模块同步导入 #

如果你习惯用ES模块的方式导入，Cypress 10+版本默认支持直接导入JSON文件：

// 在测试文件顶部导入（路径相对于当前测试文件的位置）
import vehicleData from '../example/vehicle.json';

it('使用导入的JSON数据', () => {
  console.log('导入的车辆数据:', vehicleData);
  cy.wrap(vehicleData.model).should('eq', 'Tesla Model 3');
});

这种方式是同步的，适合在测试开始前就需要用到数据的场景，但要注意路径是相对于当前测试文件的位置，和cy.readFile的路径基准不同。

二、关于jQuery的问题 #

其实你完全不需要额外导入jQuery！Cypress已经内置了jQuery，直接就能在测试中使用：

直接使用内置的jQuery #

// 方式1：在cy.get()的回调中使用$（自动传入jQuery对象）
cy.get('.nav-bar').then(($nav) => {
  // $nav就是jQuery包装后的元素
  $nav.find('li').first().addClass('selected');
});

// 方式2：直接用Cypress.$全局调用
const $footer = Cypress.$('footer');
cy.log(`页脚包含的链接数: ${$footer.find('a').length}`);

如果你之前尝试手动导入jQuery导致报错，那赶紧停止这么做——内置的版本已经和Cypress深度集成，手动导入反而可能引发版本冲突或其他问题。

内容的提问来源于stack exchange，提问作者Chema Lopez