Use data-cy property to select elements in cypress tests to write more resilient e2e tests
When writing e2e tests, we have to select elements on the page somehow.
How resilient our tests are going to be depends on our choice of the way we select elements. One of the most obvious approaches is to use a classname to select a component but this is not a perfect solution - a test like this is going to fail if we change the name of the class, even though the functionality of the app is not affected at all.
In this lesson we're going to learn how to add a data-cy to a React component in order to write a better cypress test.
Tomasz Łakomy: [00:00] Currently, we have a simple Cypress test. It's going to open up the home page and check whether the Emoji Search header exists over here. Next up, we would like to test whether all those emojis are displayed in this list. In order to test that, we have to select those items somehow.
[00:12] Right now, we can see in the DevTools that each one of those items has a class of component-emoji-result-row. We could just copy this class and use it in our test. In order to get an item using a class, we can use the get command.
[00:23] We can do cy.get, paste in the name of this class and assert on it, so .should('have.length', 20) because there are 20 items on the list. If I save that, the test is going to run successfully. We can see over here that we have successfully asserted that.
[00:39] In fact, there are 20 items on this list over here, but this is not a perfect test. The issue is that if we decided to change the name of this class, this test would fail, even though the functionality of the app is not affected, but we can do better.
[00:51] Let's go to our emoji-result-row component. Over here, instead of using this class name, we're going to add a new data property. We're going to do data-cy "emoji-row".
[01:00] The idea behind that is to add a separate specific data property to an element that we want to assert with Cypress test. Right now, we are free to modify or even remove those class names. This test is going to continue to pass because the functionality of the app is not affected by those changes.
[01:15] Let's go back to our test. Let me move it to a different test because the first one is going to test whether the page header has been successfully rendered, and the second one is going to check whether it('renders the list of emojis').
[01:26] It's going to take a function. We're going to visit the home page. We're going to copy that, paste it over here. Instead of using this class, we're going to get the element via data-cy property. So, data-cy='emoji-row'. Let me close that, save it, and now, the test is going to pass even though we decided to rename the class name.
[01:44] If I rename the class name to emoji-result-row and apply those changes to all files, after restarting the test, it's going to successfully pass, and we are no longer asserting via a class name. This is how we are able to write a better test.