从GitHub授权返回后，Cypress无法识别原网站DOM元素求助

问题概述 #

测试console.internetcomputerservices.com时，完成GitHub授权跳转回原站点后，Cypress无法定位任何DOM元素，包括预期的placeholder="Search…"输入框。

排查步骤 #

1. 验证页面加载状态：授权跳转后页面可能未完全渲染，直接执行cy.get()会因元素未就绪失败。查看Cypress测试runner中的页面快照，确认返回后的页面是否正常加载。
2. 确认上下文切换：cy.origin()会隔离GitHub站点的测试上下文，返回原站点后需确保Cypress已切换回目标站点的上下文，可通过cy.url()断言当前URL是否包含目标域名。
3. 检查localStorage有效性：跳转过程中页面可能刷新，导致之前设置的token丢失，需验证localStorage.getItem('token')是否存在。
4. 校验元素定位器：确认input[placeholder="Search…"]的定位器是否准确，检查元素是否嵌套在iframe中，或是否为动态生成的元素。

解决方法 #

1. 添加页面加载断言与等待 #

在回到原站点后，先断言URL并等待核心元素出现，确保页面完全加载：

// 回到原站点后，先确认当前URL
cy.url().should('include', 'console.internetcomputerservices.com')
// 等待目标输入框可见后再操作
cy.get('input[placeholder="Search…"]').should('be.visible').type('intro-2')

2. 持久化localStorage（若刷新丢失） #

如果跳转后页面刷新导致token失效，可重新设置token：

cy.window().then(win => {
  win.localStorage.setItem('token', 'my-token')
})

3. 使用Cypress Session优化授权流程 #

GitHub授权属于重复操作，用cy.session()可持久化登录状态，避免重复授权并保持上下文稳定：

/// <reference types="cypress" />

describe("Basic tests", () => {
  before(() => {
    cy.session('github-auth', () => {
      cy.visit("https://console.internetcomputerservices.com", {
        onBeforeLoad(win) {
          win.localStorage.setItem("token", "my-token");
        },
      });
      cy.contains('Create DApp').click()
      cy.contains('Static Website').click()
      cy.contains('Connect with github').click()
      cy.origin('https://github.com', ()=>{
        cy.get('input[name="login"]').type('my-email')
        cy.get('input[name="password"]').type('my-password')
        cy.get('[type="submit"]').click()
        cy.get('[href="/settings/installations/29576211"]').click()
        cy.contains('Only select repositories').click()
        cy.contains('All repositories').click()
        cy.get('.js-integrations-install-form-submit.btn-primary.btn.float-left.mr-2').click()
      })
    })
  })

  it.only("should be able to run test 1", () => {
    cy.viewport(1280, 720)
    cy.visit("https://console.internetcomputerservices.com")
    cy.url().should('include', 'console.internetcomputerservices.com')
    cy.get('input[placeholder="Search…"]').should('be.visible').type('intro-2')
  })
})

4. 处理iframe嵌套场景 #

若目标输入框在iframe内，需先切换到iframe上下文：

cy.get('iframe').then($iframe => {
  const $body = $iframe.contents().find('body')
  cy.wrap($body).find('input[placeholder="Search…"]').type('intro-2')
})

5. 优化元素定位器 #

如果placeholder定位不稳定，改用更可靠的属性（如data-testid、id）或父元素定位：

// 示例：通过父容器定位
cy.get('.search-box-container').find('input').type('intro-2')

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