Cypress .intercept()本地运行正常但在CircleCI环境中不生效问题求助

常见原因及修复方案 #

• 匹配规则兼容性问题

  你当前写死完整带编码参数的URL匹配规则非常脆弱，不同环境下前端发起请求时的参数顺序、编码格式可能存在差异，比如CI环境中status参数可能放在context之前，或者参数编码格式不同，都会导致匹配失效。
  建议改用Cypress拦截的对象匹配写法，自动适配参数顺序和编码：

  before( () => {
    cy.intercept({
      method: 'GET',
      path: '**/wp-json/wp/v2/pages',
      query: {
        context: 'edit',
        status: ['publish']
      }
    }).as('getPages');
    cy.intercept({
      method: 'GET',
      path: '**/wp-json/wp/v2/posts',
      query: {
        context: 'edit',
        status: ['publish']
      }
    }).as('getPosts');
  
    // 先确认页面核心元素加载完成再操作
    cy.get('.edit-site-layout').should('be.visible');
    openComplementaryArea( 'Site contents' );
    // 确认侧边栏已经成功打开
    cy.get('.components-panel__header').contains('Site contents').should('be.visible');
  
    cy.wait( '@getPages' ).its( 'response.statusCode' ).should( 'eq', 200 );
    cy.wait( '@getPosts' ).its( 'response.statusCode' ).should( 'eq', 200 );
  } );
  

• 操作执行时机差异

  CI环境的运行速度和本地不一致，很可能出现页面还没完全挂载、相关按钮还未就绪的情况，就执行了openComplementaryArea，导致侧边栏没有成功打开，自然不会触发对应请求。需要在操作前加前置断言确认页面状态就绪。

• 权限/环境配置差异

  CI环境的测试登录账号可能没有编辑权限，context=edit的接口需要编辑权限才能访问，如果权限不足，前端会直接跳过请求发起，或者接口返回403/401后前端不再加载对应数据。可以在测试中加步骤打印当前用户权限，确认和本地测试账号权限一致。

• 前端缓存问题

  CI环境如果开启了前端静态缓存或者数据持久化缓存，之前的测试运行已经加载过pages/posts数据，第二次打开侧边栏时就不会重新发起请求。建议在每个测试用例执行前清理站点的localStorage、sessionStorage和IndexedDB缓存，或者配置测试环境禁用数据缓存。

• 版本差异问题

  确认本地和CI环境的Cypress版本、WordPress版本完全一致，旧版本Cypress的intercept对编码参数的匹配存在已知bug，升级到最新稳定版即可解决。

快速排查步骤 #

1. 在CircleCI的Cypress录制面板中查看所有网络请求，确认是否存在wp-json/wp/v2/pages、wp-json/wp/v2/posts相关请求，若存在则对比参数和你的匹配规则是否一致
2. 临时把拦截规则放宽为**/wp-json/wp/v2/pages**，测试是否能成功拦截，确认是匹配规则问题还是请求真的未发起
3. 在CI运行时增加侧边栏的可见性断言，确认openComplementaryArea执行后侧边栏确实正常展示

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