Create Aliases for DOM Elements in Cypress Tests
We’ll often need to access the same DOM elements multiple times in one test. Your first instinct might be to use cy.get and assign the result to a variable for reuse. This might appear to work fine at first, but can lead to trouble. Everything in Cypress is done asynchronously and you’re interacting with an application’s DOM, which is changing as your tests interact with it. In this lesson, we’ll see how we can reference DOM elements in multiple places with the alias feature in Cypress.
Instructor: [00:00] If we look at this test -- and I'll just collapse this to get it out of the way -- you'll see that we have two different calls to cy.get, that are using the same CSS selector. You might see something like this and want to remove this duplication.
[00:13] You might be inclined to come up here and define a constant called list and assign that the result of cy.get. Then come down here and replace this with a reference to list, and then do the same thing again down here.
[00:34] This seems perfectly logical until you realize that everything in Cypress runs asynchronously. This synchronous approach isn't going to work. The other issue that we could run into here is that if this DOM reference goes stale, things we do later in our test are not going to reference the current state of our application.
[00:52] Let's undo those changes and see how we can remove this duplication in a safe way. If we expand this back out, we're stubbing out this route. We'll see we end it with a call to as, passing it the string delete.
[01:05] This gives us the alias delete that we get to use down here in our wait. We can also create aliases for DOM selections.
[01:12] I'm going to come up here. After this cy.get, I'm going to tack on an "as." I'm going to pass it list.
[01:24] Now I can use this list alias for my DOM elements in calls to cy.get. I'll prefix this with an @ symbol and use my list alias.
[01:33] Then I can scroll down. I can do the same thing down here, where I can replace this with @list.
[01:44] Cypress still has a reference to these list items. It'll reuse those. If it detects that that DOM has gone stale through a rerender, it'll reselect those items using the original passed-in selector.
[01:57] Now we have safe reuse. Let's save this.
[02:01] In the Cypress UI, let's run our test again just to make sure our refactor hasn't broken anything. Everything still passes. We can see here -- in the command log -- references to our alias and the uses of that alias in our gets.