CODEWITHSUNDEEP
javascriptcypress
Refsone
Refsone

Reputation: 3

cy.get() how to place 2 arguments in Cypress?

Hi, I want to improve this code to avoid repetition ! any ideas ?

 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)
        })

Just the email.dataCyFaqFullName / email.dataCyFaqEmail and email.dataCyFaqPhone who changes

        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)
        })
    }

Upvotes: 0

Views: 1513

Answers (2)

user14783414
user14783414

Reputation:

How about taking a data-driven approach by creating a mapping in a javascript object

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))
    })
  })

I don't use cucumber, so maybe it will complain about validations.forEach(...), if so you should be able to substitute .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))
    })
  })

If you prefer less complexity, just move all that common code into a plain javascript function (not a custom command)

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)
  })

Upvotes: 0

Alapan Das
Alapan Das

Reputation: 18650

You can create a custom command with three parameters the selector, the text you are typing, and the regex value.

Go to cypress/support/commands.js

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

And in your test you can write:

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

Upvotes: 2

Related Questions