使用Cypress脚本无法点击Google.com的Sign in按钮求助

一、修正按钮定位问题 #

Google页面的元素类名（如.gb_ja）是动态生成的，每次加载可能变化，导致定位失效。推荐用以下更稳定的定位方式：

方式1：文本+上下文定位 #

先处理页面的Cookie提示（如果有），再定位右上角的Sign in按钮：

describe('My First Test', () => {
  it('Sign In to Google.com', () => {
    cy.visit('https://www.google.com')
    // 处理Cookie提示（页面显示时执行）
    cy.contains('Accept all').click({ force: true })
    // 定位右上角区域的Sign in按钮
    cy.get('header').contains('Sign in').click()
  })
})

方式2：aria-label属性定位 #

Google的Sign in按钮通常带有明确的aria-label属性，直接用这个定位更可靠：

describe('My First Test', () => {
  it('Sign In to Google.com', () => {
    cy.visit('https://www.google.com')
    cy.contains('Accept all').click({ force: true })
    // 通过aria-label精准定位按钮
    cy.get('[aria-label="Sign in"]').click()
  })
})

二、留在原页面验证点击结果 #

点击Sign in按钮后页面会自动跳转到账号登录页，可通过以下方法阻止跳转或暂停执行，验证按钮是否被成功点击：

方法1：用.pause()暂停测试流程 #

在点击命令后添加.pause()，Cypress会暂停执行，你可以手动查看页面状态：

describe('My First Test', () => {
  it('Sign In to Google.com', () => {
    cy.visit('https://www.google.com')
    cy.contains('Accept all').click({ force: true })
    cy.get('[aria-label="Sign in"]').click().pause()
  })
})

方法2：拦截跳转请求并中止 #

通过cy.intercept拦截跳转到Google账号页的请求，阻止页面跳转：

describe('My First Test', () => {
  it('Sign In to Google.com', () => {
    cy.visit('https://www.google.com')
    cy.contains('Accept all').click({ force: true })

    // 拦截跳转请求并中止
    cy.intercept('GET', 'https://accounts.google.com/**', (req) => {
      req.abort()
    }).as('signInRedirect')

    cy.get('[aria-label="Sign in"]').click()
    // 验证是否成功拦截到跳转请求
    cy.wait('@signInRedirect')
  })
})

方法3：阻止按钮点击的默认跳转行为 #

通过preventDefault参数阻止点击后触发的跳转事件，保留在当前页面，还可添加断言验证按钮状态：

describe('My First Test', () => {
  it('Sign In to Google.com', () => {
    cy.visit('https://www.google.com')
    cy.contains('Accept all').click({ force: true })

    // 阻止按钮的默认跳转行为
    cy.get('[aria-label="Sign in"]').click({ preventDefault: true })
    // 断言验证按钮点击后的样式变化（示例）
    cy.get('[aria-label="Sign in"]').should('have.css', 'background-color', 'rgba(66, 133, 244, 1)')
  })
})

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