Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create Aliases for DOM Elements in Cypress Tests

    Andy Van SlaarsAndy Van Slaars

    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.

    cypressCypress
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss