使用Cypress无法访问HTML元素、定位输入框报超时错误如何解决

Timed out retrying after 4000ms: Expected to find element: runner container, but never found it.

• 跨域访问限制：Cypress默认开启Chrome安全策略，禁止跨域访问，当你测试的目标站域名和Cypress运行器域名不一致时，页面会被拦截加载，DOM无法正常渲染，自然找不到任何元素
• 页面未完成渲染就执行查询：cy.visit()只会等待页面load事件触发，部分单页应用的动态DOM会在load事件后才挂载，此时提前执行cy.get()就会触发超时
• 选择器不匹配：你使用的[data-field=password]选择器如果和页面实际属性不符（比如属性名拼写错误、属性值带特殊符号未加引号），也会查询失败
• 元素嵌套在iframe内：如果密码输入框被放在iframe标签内部，Cypress默认不会扫描iframe内的DOM，无法直接查询到目标元素

• 关闭跨域安全限制：在cypress.config.js（Cypress 10+版本）中添加如下配置，关闭Chrome安全校验：

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false,
  },
});

如果是Cypress 9及更早版本，在cypress.json中添加：

{
  "chromeWebSecurity": false
}

• 增加页面加载等待逻辑，给元素查询设置合理超时时间，修改测试代码如下：

describe("User authentication", () => {
  beforeEach(() => {
    cy.visit("https://lmflf.com");
    // 等待页面body完成渲染再执行后续操作，超时时间设为10秒可根据实际情况调整
    cy.get("body", { timeout: 10000 }).should("be.visible");
  });
  it("it takes to the correct page", () => {
    // 给密码框查询增加超时时间，属性值统一加引号避免匹配异常
    cy.get('[data-field="password"]', { timeout: 10000 }).should("exist");
  });
});

• 适配iframe场景：如果确认密码框在iframe内，先获取iframe实例再查询内部元素：

cy.get("iframe")
  .its("0.contentDocument.body")
  .should("not.be.empty")
  .find('[data-field="password"]')
  .should("be.visible");

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