使用Cypress加载Salesforce页面遇测试停滞问题求助

问题现象 #

使用Cypress执行Salesforce登录测试时，测试始终卡在“Your tests are loading....”无法完成，同时无法选中登录后的目标导航按钮。

相关代码与配置 #

测试代码（spec文件） #

describe('Salesforce Login', () => {
  it('should login to Salesforce', () => {
    // Visit the Salesforce login page
    console.log('Clicked on Login button');
    cy.visit('');
 
    // Fill in the username and password
    cy.get('#username').type('');
    cy.get('#password').type('');
 
    cy.get('#Login').click();

    cy.wait(10000);
  
    cy.get('button.slds-button[title="Show Navigation Menu"]').click();

    console.log('Clicked on element after login');
  })
});

support/index.js #

import './commands';
require('cypress-xpath');

Cypress.on('uncaught:exception', (err, runnable) => {
  // Check for the specific error message
  if (err.message.includes('Cannot read properties of undefined (reading \'addEventHandler\')')) {
    // Prevent Cypress from failing the test
    return false;
  }
  // Let other errors fail the test
  return true;
}); 

cypress.config.js #

const { defineConfig } = require('vite');
const react = require('@vitejs/plugin-react');

module.exports = defineConfig({
  e2e: {
    // Enable experimental studio mode for Cypress
    experimentalStudio: true,
    // Specify the path to the Cypress support file
    supportFile: 'cypress/support/index.js',
  },
  // Set the viewport dimensions for the tests
  viewportHeight: 768,
  viewportWidth: 1366,
  component: {
    devServer: {
      // Specify the framework being used
      framework: "react",
      // Specify the bundler being used
      bundler: "vite",
      viteConfig: {
        // Add the React plugin for Vite
        plugins: [react()],
        server: {
          // Set the development server port
          port: 3000,
        },
        // Disable Chrome web security for tests (use with caution)
        chromeWebSecurity: false,
      },
    },
  },
});

问题排查与解决步骤 #

1. 修复Cypress配置文件错误 #

当前配置错误使用了Vite的defineConfig，需替换为Cypress官方的配置导出方式，同时调整chromeWebSecurity的位置：

const { defineConfig } = require('cypress');
const react = require('@vitejs/plugin-react');

module.exports = defineConfig({
  e2e: {
    experimentalStudio: true,
    supportFile: 'cypress/support/index.js',
    chromeWebSecurity: false, // 移至e2e配置下，解决跨域问题
  },
  viewportHeight: 768,
  viewportWidth: 1366,
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
      viteConfig: {
        plugins: [react()],
        server: {
          port: 3000,
        },
      },
    },
  },
});

2. 完善测试代码逻辑 #

• 补充Salesforce登录页完整URL：cy.visit('https://login.salesforce.com')（沙箱环境替换为对应域名）
• 填入有效的测试账号用户名和密码
• 替换硬编码等待为登录成功断言，确保页面加载完成后再操作：

cy.get('#Login').click();
// 断言登录后URL包含Salesforce主页标识，确认登录完成
cy.url().should('include', '.salesforce.com/lightning/');
// 再定位导航按钮
cy.get('button.slds-button[title="Show Navigation Menu"]').click();

3. 验证元素定位准确性 #

登录后使用Cypress测试界面的Inspect工具查看目标按钮的实际DOM结构，确认选择器是否正确。若Salesforce元素动态变化，可改用更稳定的定位方式：

• 按按钮文本定位：cy.contains('Show Navigation Menu').click()
• 若有权限，给按钮添加data-testid属性后用cy.get('[data-testid="nav-menu-button"]').click()

4. 处理Salesforce安全限制 #

• 确保测试环境为Salesforce沙箱，而非生产环境
• 关闭测试账号的MFA验证，或配置免MFA的IP范围
• 检查是否触发Salesforce的反爬机制，可适当调整测试执行速度，避免操作过于频繁

5. 检查版本兼容性 #

确保Cypress版本与cypress-xpath插件版本兼容，建议更新至Cypress稳定版（如13.x系列），并同步更新依赖插件。

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