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.