Quasar2 Vue3 Cypress组件测试：component-index.html问题与配置

1. component-index.html文件示例及创建 #

直接在test/cypress/support目录下创建component-index.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Cypress Component Test</title>
</head>
<body>
  <!-- 挂载组件的根容器，必须带[data-cy-root]属性 -->
  <div data-cy-root></div>
</body>
</html>

2. 测试报错的解决 #

找不到[data-cy-root]选择器 #

上述示例文件中已包含带[data-cy-root]属性的根元素，直接使用即可解决该错误。

Webpack编译找不到component-index.html文件 #

修改Cypress配置文件（通常为cypress.config.js或cypress.config.ts），在component配置项中指定indexHtmlFile的正确路径：

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    // 自定义component-index.html的路径
    indexHtmlFile: 'test/cypress/support/component-index.html',
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      // 可根据Quasar项目需求添加额外Webpack配置
    }
  }
})

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