如何在Cypress中访问React src目录外的本地HTML文件？

安全阿岳

2026-7-19

如何在Cypress中直接加载本地HTML文件（避免自动添加baseURL前缀）

Cypress默认会将cy.visit()的路径拼接上配置的baseURL，导致本地HTML文件无法正确访问，以下是几种可行的解决方法：

方法1：使用绝对文件路径（推荐）

直接通过本地文件协议（file://）加载HTML文件的绝对路径，Cypress会识别为本地资源，不会添加baseURL前缀。可以借助Node.js的__dirname或path模块拼接路径，避免硬编码：

// cypress.test.ts
import path from 'path';

it('访问本地HTML文件', () => {
  // 拼接test目录下chat.html的绝对路径
  const filePath = path.resolve(__dirname, 'chat.html');
  cy.visit(`file://${filePath}`);
  cy.contains('local file');
});

如果不想引入path模块，也可以直接用__dirname拼接：

it('访问本地HTML文件', () => {
  cy.visit(`file://${__dirname}/chat.html`);
  cy.contains('local file');
});

方法2：修改Cypress配置指定文件根目录

如果有多个本地HTML文件都在test目录下，可以修改Cypress配置，将fileServerFolder指向test目录，之后直接用相对路径访问即可：

修改cypress.config.ts：

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    fileServerFolder: './test', // 设置文件服务根目录为test文件夹
    // 其他配置项...
  },
});

测试代码中直接访问文件名：

it('访问本地HTML文件', () => {
  cy.visit('/chat.html'); // 自动加载test/chat.html
  cy.contains('local file');
});

方法3：读取HTML内容注入到当前文档

如果HTML内容较为简单，也可以读取文件内容后直接写入当前测试页面的文档对象：

it('加载本地HTML内容', () => {
  cy.readFile('./test/chat.html').then((htmlContent) => {
    cy.document().then((doc) => {
      doc.write(htmlContent);
      doc.close();
    });
  });
  cy.contains('local file');
});