Test a search input in an e2e test with cypress
In this quick lesson we're going to learn how we can use type and clear commands from cypress API in order to test a search input and what kind of tricks we can use in order to make our tests less brittle and more resilient.
Tomasz Łakomy: [00:00] We have this Emoji Search app, and I would like to test the search functionality. I'm going to write a test that every single time I search for Joy, I am getting those three items and nothing more. Let's go to Cypress.
[00:09] First up, I would like to get the input, and I'm going to type("joy") inside of this input. Next up, I would like to assert that we have three items in this list. Luckily, we have a test over here that is going to test for the number of items, so I'm going to copy that, paste it over here and change it, because we want to have three items. Let me save that and run the test.
[00:29] If we take a look, our test is going to pass, because we do have three items over here, but we don't know which items are those. If those are random items, this test should fail. Luckily, we do know what items should be returned in this case, so I'm going to write cy.contains("Joy"), copy that, "Joy Cat" and "Joystick".
[00:50] If I save that, our test is going to pass, and right now we do know that our test functionality works as intended. This is not a complete test, because we have to test whether is possible to search for something else.
[00:59] I'm going to copy the cy over here and I'm going to search for cactus. Let me save that and run the test. The problem that we have right now is that we are searching for Joycactus, which is not an actual word. We have to clear the input first.
[01:14] I'm going to use the clear command in order to clear the input. Right now, we can assert that there's only one item on the list, so I'm going to copy that, paste it over here. It should have one item, and we're going to assert whether it contains("Cactus"), and we have a passing test.
[01:32] There's one more thing to fix, because right now we are getting this input via tag name, which is not a good idea, because if we are going to have a second input on this page, this test is going to break.
[01:41] To make our test less breakable, we are going to use the data-cy as we did over here. I am going to go to our search-input component and add a data-cy "emoji-search-input", save that, and instead of searching by input, we're going to search by [data-cy='emoji-search-input'] .
[01:59] Let me close that, save that, and right now we have a passing test.