cy.get() 如何在 Cypress 中放置 2 个参数？答案

【问题标题】：cy.get() how to place 2 arguments in Cypress?cy.get() 如何在 Cypress 中放置 2 个参数？
【发布时间】：2021-05-12 12:30:40
【问题描述】：

嗨，我想改进这段代码以避免重复！有什么想法吗？

 const captureEmailModal = email => {
        When(`I type ${email.fullName}`, () => {
            cy.wait(1000)
            cy.get(email.dataCyModalFullName).should(exist)
                .type(email.fullName)
                .invoke('val')
                .should('match', /^(?! )[A-Za-z\s]+$/)
            cy.get(email.dataCyModalEmail).should(exist)
                .type(email.email)
                .invoke('val')
                .should('match', /^(([^<>()\[\]\\.,;:\s@"]
            cy.get(email.dataCyModalPhone).should(exist)
                .type(email.phone)
                .invoke('val')
                .should('match', /^[0-9]+$/)
                .should('have.length', 10)
        })

只是更改的 email.dataCyFaqFullName / email.dataCyFaqEmail 和 email.dataCyFaqPhone

        And(`I type ${email.fullName} in FAQ page`, () => {
            cy.wait(1000)
            cy.get(email.dataCyFaqFullName).should(exist)
                .type(email.fullName)
                .invoke('val')
                .should('match', /^(?! )[A-Za-z\s]+$/)
            cy.get(email.dataCyFaqEmail).should(exist)
                .type(email.email)
                .invoke('val')
                .should('match', /^(([^<>()\[\]\\.,;:\s@"]
            cy.get(email.dataCyFaqPhone).should(exist)
                .type(email.phone)
                .invoke('val')
                .should('match', /^[0-9]+$/)
                .should('have.length', 10)
        })
    }

【问题讨论】：

标签： javascript cypress

【解决方案1】：

您可以使用三个参数创建custom command：选择器、您输入的文本和正则表达式值。

转到cypress/support/commands.js

Cypress.Commands.add('matchElement', (selector, text, regex) => {
  cy.get(selector).should(exist)
    .type(text)
    .invoke('val')
    .should('match', regex)
})

在你的测试中你可以写：

cy.matchElement(email.dataCyFaqFullName, email.fullName, /^(?! )[A-Za-z\s]+$/)

【讨论】：

感谢您的回答！但是我的函数 captureEmailModal 重新组合了所有这些代码！我想改进我的所有功能以避免重复！我认为您的 cypress.command 适合这样的一个块：cy.get(email.dataCyModalFullName).should(exist) ` .type(email.fullName) ` ` .invoke('val') ` ` .should('match', /^(?! )[ A-Za-z\s]+$/)` 谢谢
您可以在一个 cypress 命令下添加多个步骤，如多个cy.get()。

【解决方案2】：

如何通过在 javascript 对象中创建映射来采用数据驱动的方法

const validations = [
  {
    name: 'fullName',
    selector: 'dataCyFaqFullName',
    pattern: '^(?! )[A-Za-z\s]+$'
  },
  {
    name: 'email',
    selector: 'dataCyFaqEmail',
    pattern: '^(([^<>()\[\]\\.,;:\s@'
  },
  {
    name: 'phone',
    selector: 'dataCyFaqPhone',
    pattern: '^[0-9]{10}$'           // Note - added length check to regex
}


const captureEmailModal = email => {
  When(`I type ${email.fullName}`, () => {
    cy.wait(1000)
    validations.forEach(v => {
      cy.get(email[v.selector]).should(exist)
        .type(email[v.name])
        .invoke('val')
        .should('match', new Regexp(v.pattern))
    })
  })

我不使用黄瓜，所以可能会抱怨validations.forEach(...)，如果是这样你应该可以替换.each()

const captureEmailModal = email => {
  When(`I type ${email.fullName}`, () => {
    cy.wait(1000)
    cy.wrap(validations).each(v => {
      cy.get(email[v.selector]).should(exist)
        .type(email[v.name])
        .invoke('val')
        .should('match', new Regexp(v.pattern))
    })
  })

如果您更喜欢复杂性较低，只需将所有常见代码移至纯 javascript 函数（不是自定义命令）

const validateEmail = (email) => {

  cy.get(email.dataCyFaqFullName)
    ...
  cy.get(email.dataCyFaqEmail)
    ...
  cy.get(email.dataCyFaqPhone)
    ...
}

const captureEmailModal = email => {
  When(`I type ${email.fullName}`, () => {
    cy.wait(1000)
    validateEmail(email)
  })

  And(`I type ${email.fullName} in FAQ page`, () => {
    cy.wait(1000)
    validateEmail(email)
  })

【讨论】：