Cypress 10.11用Chrome打开测试URL时加载空白页问题

问题背景 #

在Cypress 10.11版本中，通过Chrome浏览器运行基础测试访问指定Salesforce站点URL时，页面加载为空白。但手动在Chrome中打开该URL可正常显示内容，且使用Firefox配合Cypress测试时页面能正常渲染加载。

当前配置文件与测试代码 #

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
   chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    "viewportWidth":1980,
    "viewportHeight":1020,
    "screenshotsFolder": "mochawesome-report/assets",
    "videosFolder": "mochawesome-report/assets",
     baseUrl: 'http://power-inspiration-1088-dev-ed.scratch.my.site.com/ebikes',
  },
});

login.cy.js

describe('Sales Force First Test', () => {
  it('Open page', () => {
    cy.visit('/')
  })
})

解决方案 #

• 添加Chrome兼容性启动参数
  Chrome的隐私沙箱、站点隔离特性可能与Cypress存在兼容性冲突，在配置中添加禁用参数：

  const { defineConfig } = require("cypress");
  
  module.exports = defineConfig({
    chromeWebSecurity: false,
    e2e: {
      setupNodeEvents(on, config) {
        // implement node event listeners here
      },
      viewportWidth: 1980,
      viewportHeight: 1020,
      screenshotsFolder: "mochawesome-report/assets",
      videosFolder: "mochawesome-report/assets",
      baseUrl: 'http://power-inspiration-1088-dev-ed.scratch.my.site.com/ebikes',
      // 新增Chrome启动参数
      browserLaunchOptions: {
        chrome: {
          args: ['--disable-site-isolation-trials', '--disable-features=PrivacySandboxSettings4']
        }
      }
    },
  });
  

• 清除Cypress缓存
  执行命令清除Cypress的浏览器缓存与临时文件，避免缓存导致的加载异常：

  npx cypress cache clear
  

• 延长页面加载超时并添加内容验证
  Salesforce站点加载可能存在延迟，修改测试代码延长超时时间并验证页面内容：

  describe('Sales Force First Test', () => {
    it('Open page', () => {
      cy.visit('/', { timeout: 30000 }); // 延长超时至30秒
      cy.get('body').should('not.be.empty'); // 验证页面已加载内容
    })
  })
  

• 关闭实验性特性
  若开启了Cypress的实验性会话特性，可能导致Chrome加载异常，关闭该设置：

  module.exports = defineConfig({
    experimentalSessionAndOrigin: false, // 关闭实验特性
    // 其他原有配置...
  });
  

• 检查Chrome版本兼容性
  确认Chrome版本为94及以上（Cypress 10.11的最低兼容版本），若版本过低建议升级至稳定版。

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