Cypress测试访问Powerapps相关页面报错无法打开如何解决

核心原因 #

你遇到的加载失败问题本质是Power Apps站点的安全限制与Cypress默认运行机制冲突导致，具体原因及对应解决方法如下：

• 站点嵌入拦截：Power Apps默认设置了X-Frame-Options和内容安全策略(CSP)，禁止页面被嵌入到第三方iframe中，而Cypress默认就是将被测页面放在iframe内执行测试，直接访问就会被拦截。
  解决方法：在Cypress配置文件（cypress.config.js/旧版cypress.json）中添加配置：

  // cypress.config.js示例
  const { defineConfig } = require('cypress')
  module.exports = defineConfig({
    e2e: {
      baseUrl: "https://apps.powerapps.com/play/f1t75er8-03c9-4cc7-996d-6743cd7eac4a",
      experimentalModifyObstructiveThirdPartyCode: true,
      chromeWebSecurity: false
    }
  })
  

  其中experimentalModifyObstructiveThirdPartyCode配置会自动修改站点返回的拦截规则，允许页面嵌入Cypress的iframe；chromeWebSecurity: false会关闭浏览器同源校验，适配Power Apps跳转到Office 365登录页的跨域场景。
• 状态码报错拦截：Power Apps访问时会触发302跳转等非200状态码，Cypress默认遇到非200/300范围的状态码会直接抛出错误终止测试。
  解决方法：修改cy.visit代码，添加跳过状态码校验的参数：

  cy.visit("/", {failOnStatusCode: false})
  

• Cypress浏览器网络配置异常：Cypress默认使用的Electron浏览器可能没有继承你本地的网络代理、证书配置，导致无法访问微软云服务。
  解决方法：先在Cypress打开的测试浏览器窗口中手动输入Power Apps地址，确认是否可以正常加载，如果手动也无法访问，可以在启动Cypress时指定代理配置，或者切换使用你本地已配置好网络的Chrome/Edge浏览器执行测试。
• 反爬机制拦截：Power Apps的防护规则可能识别到Cypress的自动化测试请求特征，直接拦截请求。
  解决方法：在Cypress配置中修改User-Agent请求头，模拟普通浏览器请求：

  // 添加到e2e配置项中
  userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
  

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