Cypress中cy.get()如何传入2个参数？如何优化重复测试代码？

问题1：cy.get()方法传入2个参数的用法 #

cy.get()方法本身支持传入2个参数，规则如下：

• 第一个参数：必填，为元素选择器，可以是CSS选择器字符串、@别名格式的元素别名
• 第二个参数：可选，为配置对象，常用配置项如下：
  • timeout：自定义等待元素出现的超时时间，单位毫秒，默认值为4000
  • includeShadowDom：指定是否从Shadow DOM中查找元素，默认继承全局配置
  • withinSubject：指定查找的父级上下文，限制仅在指定父元素内部查找子元素
  • log：控制是否将该命令打印到Cypress运行日志，默认值为true

举两个常用示例：

// 自定义超时时间，最长等待10秒找到目标元素
cy.get('.submit-btn', { timeout: 10000 }).click()

// 限定在指定父元素内查找子元素
cy.get('.form-container').then($form => {
  cy.get('.input-username', { withinSubject: $form }).type('test')
})

问题2：重复测试代码优化方案 #

两段代码仅选择器存在差异，核心的填充、校验逻辑完全一致，可以将公共逻辑抽离为独立的通用函数，仅把差异化的选择器作为参数传入即可，优化后代码如下：

首先抽离通用表单填充校验函数：

// 公共表单填充校验逻辑，仅需传入对应场景的选择器集合、表单数据即可
const fillContactForm = (selectors, formData) => {
  cy.wait(1000) // 后续可优化为等待特定元素加载完成，替换硬等待逻辑
  // 姓名填充校验
  cy.get(selectors.fullName).should('exist')
    .type(formData.fullName)
    .invoke('val')
    .should('match', /^(?! )[A-Za-z\s]+$/)
  // 邮箱填充校验
  cy.get(selectors.email).should('exist')
    .type(formData.email)
    .invoke('val')
    .should('match', /^(([^<>()\[\]\\.,;:\s@"]/)
  // 手机号填充校验
  cy.get(selectors.phone).should('exist')
    .type(formData.phone)
    .invoke('val')
    .should('match', /^[0-9]+$/)
    .should('have.length', 10)
}

改造原有业务代码：

const captureEmailModal = email => {
  // 模态框场景选择器
  const modalSelectors = {
    fullName: email.dataCyModalFullName,
    email: email.dataCyModalEmail,
    phone: email.dataCyModalPhone
  }
  When(`I type ${email.fullName}`, () => {
    fillContactForm(modalSelectors, email)
  })

  // FAQ页面场景选择器
  const faqSelectors = {
    fullName: email.dataCyFaqFullName,
    email: email.dataCyFaqEmail,
    phone: email.dataCyFaqPhone
  }
  And(`I type ${email.fullName} in FAQ page`, () => {
    fillContactForm(faqSelectors, email)
  })
}

该方案实现了逻辑复用，后续如果需要调整填充逻辑、校验规则，仅需要修改一次通用函数即可，新增同类型的表单场景也只需要传入对应的选择器集合，无需重复编写核心逻辑。

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