Check out a free preview of the full Testing Web Apps with Cypress course

The "Aliases" Lesson is part of the full, Testing Web Apps with Cypress course featured in this preview video. Here's what you'd learn in this lesson:

Steve explains how aliases can easily reference objects like DOM nodes, fixture data, or network requests in tests. The "as" method is used to create an alias. When aliases are used in a selector, they are prefixed with the "@" symbol.


Transcript from the "Aliases" Lesson

>> Let's talk a little bit about what I just mentioned, which is aliases which will take a little bit of the tediousness out of this as well. So if I go over to this one, we can go back and look at aliases. Aliases basically give you a way to say, I wanna give this thing a name, so I can refer to it later.

Effectively, giving us a way to get the basic idea of a variable, but something that works with the program model in Cyprus. Now, what I should mention is, mocha has the ability to put any value you want on this, right? So before each you can say this dot whatever equals a value and you can reference it wherever you want.

That works, right? There is a caveat, which it doesn't work with arrow functions because arrow functions are lexically scoped. Which means you don't have access to this or it's own this. So if you want to write just regular function declarations, rather than arrow functions, you can just say this dot a value and get access to it as well.

But if you like to use arrow functions, or somebody in your team like to use arrow functions, or maybe just the ES lint configuration, that was installed by whatever framework prefers to use arrow functions, this is another way to do it. I personally also like this one more.

So I'm not gonna kinda oversell it, but unpacked and packed items were things that we were kinda doing fairly frequently. Like, is this on the unpacked item list? Is it on the packed item list, so on and so forth. You can see that anytime I have a value in that Cypress chain, I can use the as method, right?

I say as and I give it a name, right? Now, Cyprus is holding onto it. So if you look right here, you can see that now if I get, and I put an at symbol before it, it will get that value that I stored, right? So storing these selections and variables will not work with the programming model, but we can basically label those values and effectively store them on an object.

In this case of this and get access to them later. One of the things I will point out even though we're not totally there yet, is that this works for selectors. It also works for when you're mocking and stubbing network requests and a few other places as well, right?

So you can be like, hey, here's the stub that I have made for this API call, you might want to be able to use it somewhere as well. You would give it an alias, and then you can reference it using side I get with that at symbol, and it will work in this case, right?

So you're gonna have an example where it's gonna hold on to it. One of the things you saw before, we went through the each block, and we called the .text method on the jQuery object, right? But then we lost all that Cypress chaining ability. So we had to like wrap stuff, and that was weird and it felt a little bit wrong.

The other option you have is invoke, which we'll call a method on the underlying object. So instead of doing list item .text you can say invoke text and we'll call that method but still put, basically wraps it again for you, right? Before we wrapped it ourselves invoke will call the method take as return value wrap it so you can continue chaining.

So here we're saying like, hey go get the first item I wish is apparently on unpacked items find the label, find the first one, alias it first items, right? Now we can call it at first item will get its actual text, not the actual jQuery element, will store that as a value called text.

Or you find the checkbox of that first item and click it. So in this case, we can kinda go ahead and basically get the value, wrap it and continue everywhere in the chain. The other one that we'll see a little bit later is invoke works for methods. But sometimes you have an object that has properties, there's another one called ITs.

So just to kinda put that like mental bookmark in there, invoke is if you wanna call a method and continue the chain. It's as if you just wanna get a particular property off that object and continue the chain, right? So for instance, requests and responses, maybe I just want the body.

So it'd be like, get the request its body, and then I wanna make a bunch of assertions on the request body of the response body, so on and so forth. I'd use these methods as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now