Chrome正常加载的网页在Cypress中无法加载问题求助

问题现象 #

• 目标登录页https://hptest.service-now.com/login.do在原生Chrome浏览器中可正常加载，在Cypress运行环境中加载失败
• 控制台报错截图：
  
• 曾尝试在配置中添加"modifyObstructiveCode" : false，添加后Cypress Runner无法识别已编写的测试用例
• 原测试代码：

/// <reference types="Cypress" />

describe("Service Now TEST login", () => {
    it("Login TEST", () => {
        cy.visit("https://hptest.service-now.com/login.do")
        cy.wait(2000)
        cy.get(".form-control", {
            timeout: 10000
        }).should("be.visible").then(() => {
            cy.get("#user_name").type("");
            cy.get("#user_password").type("");
            cy.get("#sysverb_login").click();
        });
    })
})

排查解决步骤 #

1. 先修复配置导致的用例无法识别问题 #

添加modifyObstructiveCode: false后用例丢失，90%以上是配置文件适配错误：

• 如果你用的是Cypress 10.0及以上版本，配置文件已经从cypress.json替换为cypress.config.js/cypress.config.ts，把配置写到旧版json文件中Cypress不会读取，冗余的旧配置文件还会干扰用例扫描逻辑，直接删除根目录下旧的cypress.json，在新配置文件中写配置即可。
• 如果你用的是Cypress 9及以下旧版本，检查json语法是否存在多余逗号、括号不匹配问题，显式指定用例扫描路径避免识别失败。

对应版本正确配置参考：
Cypress 10+ 版本配置（cypress.config.js）

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

module.exports = defineConfig({
  e2e: {
    modifyObstructiveCode: false,
    chromeWebSecurity: false, // 关闭同源策略拦截，适配ServiceNow的跨域资源加载
    pageLoadTimeout: 30000, // 加长页面加载超时时长，适配企业级应用加载速度
    experimentalSessionAndOrigin: true,
    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}" // 显式指定用例路径，避免识别失败
  },
});

Cypress 9及以下版本配置（cypress.json）

{
  "modifyObstructiveCode": false,
  "chromeWebSecurity": false,
  "pageLoadTimeout": 30000,
  "testFiles": "**/*.spec.js"
}

配置修改完成后，删除根目录下.cypress-cache缓存文件夹，重启Cypress Runner，确认用例可以被正常识别后再进行下一步。

2. 绕过ServiceNow反自动化检测，解决页面加载失败问题 #

ServiceNow自带Bot检测逻辑，会识别Cypress运行时注入的全局特征（window.Cypress、navigator.webdriver标记等），直接拦截页面渲染，仅修改modifyObstructiveCode无法绕过检测，需要在页面加载前隐藏自动化特征，同时优化测试代码逻辑：

• 删除硬编码的cy.wait(2000)，这类固定等待极不稳定，还容易触发元素查找超时
• 在window:before:load事件中清除Cypress相关特征标记
• 直接定位登录表单核心元素，减少冗余的父元素查找逻辑

修改后的可运行测试代码：

/// <reference types="Cypress" />

describe("Service Now TEST login", () => {
  beforeEach(() => {
    // 页面加载前清除自动化特征，绕过反爬检测
    cy.on('window:before:load', (win) => {
      // 隐藏Cypress全局变量
      Object.defineProperty(win, 'Cypress', {
        value: undefined,
        configurable: true
      })
      // 隐藏webdriver标记
      Object.defineProperty(navigator, 'webdriver', {
        get: () => false,
        configurable: true
      })
    })
  })

  it("Login TEST", () => {
    cy.visit("https://hptest.service-now.com/login.do", {
      failOnStatusCode: false,
      timeout: 30000
    })
    // 等待用户名输入框可见，确认页面加载完成
    cy.get("#user_name", { timeout: 15000 }).should("be.visible")
    // 替换为实际测试账号密码
    cy.get("#user_name").type("your_test_account");
    cy.get("#user_password").type("your_test_password");
    cy.get("#sysverb_login").click();
    // 可添加登录成功校验，比如校验跳转后URL包含首页路径
    cy.url().should('include', '/now/nav/')
  })
})

3. 额外检查项 #

如果按上述步骤修改后仍加载失败，逐一排查以下点：

• 运行测试时选择Chrome浏览器作为运行载体，不要用默认的Electron，Electron的自动化特征更容易被检测拦截
• 确认测试账号未开启MFA多因子认证，测试环境建议给测试账号临时关闭MFA验证
• 公司内网如果有网络代理，在Cypress配置中添加正确的代理参数，避免防火墙拦截资源请求
• 启动Cypress时使用干净的浏览器实例，禁用广告拦截、安全防护类扩展，避免资源被插件拦截

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