How to type and press ENTER with Cypress

Today, in “Pinches of Cypress”, learn how to test a search functionality like a real user

When writing end-to-end tests, the tests must simulate using the application as closest to a real user.

Take the DuckDuckGo search site as an example.

When a user searches, they typically type what they are looking for and then press ENTER.

Note: Nothing prevents you from typing in the search field and pressing the magnifying glass button, but normally, users use the ENTER key.

However, both scenarios must be covered by tests.

Let's see how to test such scenarios with Cypress.

// search.cy.js

describe('DuckDuckGo', () => {
  beforeEach(() => {
    cy.visit('http://duckduckgo.com')
  })

  it('searches by typing and pressing ENTER', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io{enter}')

    cy.get('.results')
      .should('contain', 'cypress.io')
  })

  it('searches by typing and clicking the magnifying glass button', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io')
    cy.get('#search_button_homepage')
      .should('be.visible')
      .click()

    cy.get('.results')
      .should('contain', 'cypress.io')
  })
})

As you can see in the first test (searches by typing and pressing ENTER), when I call the type() method, in addition to passing the term I want to search for (cypress.io), I pass the text enter wrapped in curly braces ({enter}). This way, Cypress will type the text and simulate the ENTER key is pressed.

🎉🎉🎉

There is nothing new in the other test (searches by typing and clicking the magnifying glass button). First, I type in the field, and then I click the magnifying glass button.

Done!

The takeaway here's, test the application as your real users use it and cover as many scenarios as possible. That way, you will be safe to modify the application and know if everything continues to work as expected or if you have broken something and need to fix it before moving on.

To learn more about the cy.type() functionality, I recommend reading the official Cypress.io documentation.

Finally, as an alternative for pressing enter (or other keyboard keys), have a look at the @walmyr-filho/cy-press plugin and its .press() custom command.

Did you like it?

Leave a comment.

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.

Happy testing! 🎉