CI环境下Cypress测试无法加载Nuxt组件内Contentful数据

• 此前运行正常的Cypress测试近一周在GitHub CI环境中失败，但本地通过localhost:3000运行测试完全正常。
• 核心问题：/layouts/default.vue布局内，<Nuxt />组件无法加载Contentful数据，但同布局的SkipLink和GlobalFooter组件能正常获取并展示Contentful数据，导致依赖该数据的测试用例不通过。

相关代码 #

布局文件 /layouts/default.vue #

<template>
  <div :class="layout-body">
    <SkipLink />
    <Nuxt />
    <GlobalFooter />
  </div>
</template>

GitHub Workflow 配置 #

run-cypress:
    runs-on: ubuntu-22.04
    env:
      AWS_ACCESS_KEY_ID: ${{ ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ SECRET_ACCESS_KEY }}
      AWS_REGION: "eu-west-2"
    strategy:
      matrix:
        node: [16]
    name: E2E on Node v${{ matrix.node }}
    steps:
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
      - name: Checkout
        uses: actions/checkout@v4
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          start: npm run dev
          wait-on: http://localhost:3000
          wait-on-timeout: 360
          browser: electron
          config: video=false,pageLoadTimeout=100000,defaultCommandTimeout=60000
        env:
          CYPRESS_ENVIRONMENT: local

已尝试的无效方案 #

• 增加Cypress的pageLoadTimeout和defaultCommandTimeout配置
• 升级cypress-io/github-action到v6版本
• 升级actions/setup-node到v3版本
• 指定Node.js 16版本运行
• 校验Contentful API密钥有效性
• 改用Electron浏览器运行测试

1. 验证页面组件的数据加载时机 #

SkipLink和GlobalFooter属于全局布局组件，可能在Nuxt初始化阶段完成数据请求，而<Nuxt />渲染的页面组件若采用客户端异步加载逻辑（如asyncData、fetch钩子），CI环境的网络延迟或资源加载顺序可能导致数据未及时返回：

• 在测试中添加精准等待逻辑，等待页面组件中Contentful数据渲染的元素出现：

cy.get('.target-content-element').should('be.visible').contains('预期的Contentful内容')

• 检查页面组件是否依赖process.client做环境判断，确认CI环境下是否触发了正确的加载逻辑。

2. 排查CI环境的Contentful访问权限 #

即使API密钥本地正常，仍需确认CI服务器IP是否在Contentful的IP白名单中（若配置了IP限制）。可在CI步骤中添加API连通性测试：

- name: Test Contentful API connectivity
  run: |
    curl -H "Authorization: Bearer $CONTENTFUL_ACCESS_TOKEN" https://cdn.contentful.com/spaces/[你的Space ID]/entries
  env:
    CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}

3. 优化Nuxt启动等待逻辑 #

当前wait-on仅等待localhost:3000返回200，但Nuxt可能在页面返回后仍在异步加载数据：

• 修改wait-on规则，等待页面中Contentful数据对应的标记元素出现，或监听Nuxt的ready事件；
• 在npm run dev启动后增加额外等待时间，或添加脚本监听应用启动完成状态。

4. 校验CI环境的环境变量 #

确认CI环境中是否正确配置了所有Contentful相关变量（如CONTENTFUL_SPACE_ID、CONTENTFUL_ACCESS_TOKEN），可在CI步骤中打印变量验证：

- name: Print environment variables
  run: |
    echo "CONTENTFUL_SPACE_ID: $CONTENTFUL_SPACE_ID"
    echo "CONTENTFUL_ACCESS_TOKEN: $CONTENTFUL_ACCESS_TOKEN"

5. 捕获CI环境的请求日志 #

在Cypress测试中开启网络拦截，查看页面组件是否发送Contentful请求及响应状态：

cy.intercept('GET', 'https://cdn.contentful.com/**').as('contentfulRequest')
cy.visit('/目标页面路径')
cy.wait('@contentfulRequest').then((interception) => {
  console.log('Contentful请求响应:', interception.response)
})

导出CI运行日志，分析请求是否存在失败、超时或返回空数据的情况。

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