Cypress自动化Apple登录输入用户名后卡顿问题求助

在使用Cypress自动化Apple登录流程时，输入用户名后出现卡顿，无法继续后续操作。已尝试添加硬编码等待时间，也试过Cypress官方Issue中提供的解决方案，但问题仍未解决。需要自动化的流程如下：

• 定位邮箱输入框并输入邮箱地址
• 点击箭头图标使密码框显示
• 输入密码后再次点击箭头图标，进入OTP验证页面完成登录

问题分析与解决方案 #

Apple登录页面存在较强的防自动化机制，硬编码等待（cy.wait()）无法适配动态的页面状态变化，以下是针对性的优化方案：

1. 替换硬等待为元素状态驱动的等待
   避免使用固定时长的cy.wait()，改为等待元素处于可交互状态（可见、可点击），确保页面完全就绪后再执行操作。

2. 触发输入框的原生事件
   Apple的输入框依赖原生input或change事件触发状态更新，输入内容后手动触发这些事件，确保页面识别到输入变化。

3. 监听页面核心请求
   使用cy.intercept监听Apple登录页面的核心加载请求，等待请求完成后再进行下一步操作，确保页面资源加载完毕。

4. 优化元素选择器
   使用更稳定的属性选择器（如data-testid）定位按钮，避免依赖易变化的类名组合。

调整后的测试代码 #

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

describe('Paid Ticket Test Suite', () => {
  it('Login to mds', function () {
    cy.visit("https://test.milliondollarsellers.com/")
    
    // 点击Apple登录按钮，等待页面跳转
    cy.get('.apple-btn').click()

    cy.origin("https://appleid.apple.com/auth/", () => {
      // 监听登录页面核心加载请求，确保页面初始化完成
      cy.intercept('GET', '/auth/v1/authorize').as('appleAuthLoad')
      cy.wait('@appleAuthLoad')

      // 等待邮箱输入框可见，输入内容后触发原生事件
      cy.get('#account_name_text_field')
        .should('be.visible')
        .type("your-email@example.com")
        .trigger('input')
        .blur()

      // 等待箭头按钮可点击后执行点击操作
      cy.get('#sign-in [data-testid="sign-in-button"]')
        .should('be.enabled')
        .click()

      // 等待密码框可见，输入密码并触发状态更新
      cy.get('#password_text_field')
        .should('be.visible')
        .type('your-password-here')
        .trigger('input')

      // 点击箭头进入OTP验证页面
      cy.get('#sign-in [data-testid="sign-in-button"]')
        .should('be.enabled')
        .click()

      // 扩展：OTP验证流程（根据实际页面结构调整）
      // cy.get('#verification_code').should('be.visible').type('your-otp-code')
      // cy.get('#sign-in [data-testid="sign-in-button"]').click()
    })
  })
})

额外注意事项 #

• 确保使用较新的Cypress稳定版本，避免兼容性问题
• 如果仍存在卡顿，可在cypress.config.js中临时禁用chromeWebSecurity（仅测试环境使用）：

  module.exports = defineConfig({
    e2e: {
      chromeWebSecurity: false,
    },
  })
  

• Apple登录页面的元素结构可能会动态调整，需根据实际页面DOM结构及时更新选择器

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