Cypress v10.2.0访问特定银行站点时无法检测元素报错如何解决

Ulster Bank的网银站点部署了严格的反自动化检测机制，会识别Cypress默认注入的全局变量、浏览器WebDriver自动化特征、测试扩展注入痕迹，触发风控后会主动拦截脚本运行、隔离DOM结构，最终导致元素选择器Playground失效、页面元素无法识别、控制台抛出大量扩展相关错误。其余未部署反自动化检测的普通站点不会触发这类拦截，因此可以正常运行。

按优先级依次尝试以下配置调整：

• 抹除浏览器层自动化标识
  Cypress v10+版本在cypress.config.js中添加浏览器启动钩子，给Chromium内核（Chrome/Edge）添加启动参数禁用自动化检测，同时开启跨源测试支持：

  const { defineConfig } = require("cypress");
  
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        on('before:browser:launch', (browser, launchOptions) => {
          if (browser.family === 'chromium' && browser.name !== 'electron') {
            // 禁用Blink引擎的自动化控制特征暴露
            launchOptions.args.push('--disable-blink-features=AutomationControlled')
            // 关闭同源安全策略，避免跨iframe/跨源拦截
            launchOptions.args.push('--disable-web-security')
            launchOptions.args.push('--allow-running-insecure-content')
            // 禁用默认扩展加载，避免扩展注入痕迹被检测
            launchOptions.args.push('--disable-extensions')
          }
          return launchOptions
        })
      },
      // 开启跨源会话支持，适配银行站点多域名跳转逻辑
      experimentalSessionAndOrigin: true,
      testIsolation: false
    },
  });
  

• 抹除页面层Cypress暴露特征
  修改测试用例的cy.visit逻辑，在页面加载前删除Cypress全局变量、伪造普通用户UA、隐藏WebDriver标识：

  describe('Online Banking spec', () => {
    it('opens the site', () => {
      cy.visit('https://www.anytimebanking.ulsterbank.co.uk', {
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36',
        onBeforeLoad(win) {
          // 隐藏navigator.webdriver自动化标识
          Object.defineProperty(win.navigator, 'webdriver', {
            get: () => false
          });
          // 删除Cypress暴露在window上的全局特征
          delete win.Cypress;
          delete win.cy;
        }
      })
    })
  })
  

• 排查访问风控限制
  先在Cypress启动的独立浏览器窗口中手动访问目标站点，确认是否存在IP地区限制、人机验证环节：该银行站点仅对英国/爱尔兰地区IP提供服务，非服务区IP、代理IP触发风控后会返回异常拦截页，页面结构完全异于正常网银页，也会导致元素无法识别。
• 适配iframe嵌套场景
  银行站点通常会用iframe嵌套核心业务页面，Cypress默认无法直接穿透iframe查找元素，需要先定位iframe容器，获取内部文档后再执行元素操作，示例逻辑：

  // 替换为站点实际的iframe选择器
  cy.get('iframe[title="Online Banking Core"]')
    .its('0.contentDocument.body')
    .should('be.visible')
    .as('bankAppBody')
  // 后续所有元素操作都从iframe body下查找
  cy.get('@bankAppBody').find('#customer-id-input').type('your-test-id')
  

注意：对银行类生产站点做自动化测试前请确认符合站点服务条款，避免触发账号封禁、法律风险。

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