Testing Web Apps with Cypress

Generating Tests Solution

Steve Kinney

Steve Kinney

Testing Web Apps with Cypress

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

The "Generating Tests Solution" 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 live codes the solution to the Generating Tests exercise.


Transcript from the "Generating Tests Solution" Lesson

>> All right. So, the two other fields we had was the input field for the rating and the select field for the restaurants. There's a little trick that we got to figure out for the restaurants. Let's do that one first. So, what should happen is if I pick Chick-fil-A, I should only see super menu items from Chick- fil-A.

Make sense? But then like okay, like how do I do that? Now, the way I chose to do it was there is a piece of an attribute for Table cells for what header they correspond to. So, what I could do is figure out like find that that TD that corresponds to a header.

You could have also used data attributes as well. But sometimes data attributes are great like to just say the meaning of that piece of markup for your test, but also, if there's like a good attribute that also does that works too, right? So, we'll go ahead and we'll say, for Constant restaurant.

Of restaurants, Right? Just make sure that's called restaurants, because I didn't like the fact that auto complete wasn't there for me, that was fine. And so we'll go ahead and we'll do that. And now we'll say, as we go through that it should only display rows that match.

I don't know as the restaurant sub it in there, restaurant when selected. Cool and then we'll go ahead and we'll say, go ahead and get that restaurant filter which we have stored in alias and select the given restaurant. This select field will take the value for that option, it'll take an index for which one you want or will literally take the word that's the child as well.

So, this case, spoiler alert, the value and the word of the same. So, we've got that in place and we'll go ahead and we'll select that one. And now, I think I misspoke before, when I said that, if you select a selector that has multiple elements you can't click on all of them, but you can actually have them as a collection, right?

You can't like get all of the A's on thing and click them all with one command. You we saw that before when I had too many of the labels I tried to click, because I had the wrong selector, but you can go validate something about all of them as well.

So, we'll do go find me the table data's that have headers, that are word order. Column, right? So this is the TDs that are in that column, right? And so, we've got that in place and they might have another selector as well. I'm doing this a little bit from memory.

So, let's see, let's go ahead and look, because we can always that's the nice part about cybers is we've got the last version of the page up and running. I go ahead, and we can see it's got a yeah, I don't need nth child. They do have a class of where to order as well.

So that would theoretically work. You see I've got 203 of them. If I grab that other selector that I was playing around with here, we can verify that that will also work too. Right, there's 203. So they are effectively the same. And if you hover over that number, you'll see which ones are highlighted, which again gives you that sense of making sure that you have the right element.

If you're ever questionable, you can either select it on the page or you can pay something in there, and verify as well. Either one of them work, and the tool is there to help you, so you're not just taking random guesses and running the test. So, either class or you can do the attributes up to you.

And we're going to say that all the ones on the page, it should contain the restaurant.
>> Theoretically, we're the intent of our tests is to filter. So, which is to say we're eliminating something.
>> Yep.
>> I could think of like writing that in a way where the you could check the number, the length of the collection it gets returned.

But the approach I was struggling with personally was to try and like have the contrapositive that like some of the columns there do not contain that ahead of time and then say that they should all.
>> Yep.
>> How might I do something like that?
>> Yeah, so think about so the question was, cuz this will technically your point is right like this will pass if the filter doesn't do anything, right?

Because they'll still be on the page actually won't pass, right? Because there'll be one there'll be one that has a Taco Bell in it. That we're expecting Chick-fil-a.. So, it will actually, if the filter stops working, this will test that case. But let's take it as a given, right?

I can think of a few ways, right? You could verify that none of them, if you had let's say we're using a four H way of the index, right? You can grab the previous one in the array or something or just another one in the array or something like that and verify that that one does not appear.

We're also starting with an array as a data structure, you could theoretically just have it grab another one and verify that those don't show up as well. This will still do that, because if one shows up. And it's not if we were on Taco Bell KFC at this point, and it says, Burger King it will fail the test, so this one will accidentally do it.

>> For this one specifically like the the place it would fail where it shouldn't is, if the filter returned no results, because there were none to begin.
>> Yeah, so what we might do is say like yeah, I think in this case there will always be at least one in there, right?

Now, if we both set the rating to seven and pick anything but the butter beer frappuccino, we know that we'd have an empty set, right? So, I could also do actually check this out. I can do should Dot and, Have length At least one. Right, so this will now do both.

It should both appear on the page and there should be at least one of them. Let's verify that works, because that's a Let's see what we got, could not find an alias or restaurant filter, and Did I not make that an alias in this one? All right. So, let's just go ahead and, We can just grab it like I could make an alias I can also grab it.

As well that seems easier in this case. So it's going through. If I put the only in the for loop, obviously, it would do all of them, right? Because it's applied all of them, so let's verify. But that was a thought that I had as they were going and it felt equally as long just explain that and wait for it.

So yeah, now they are they're working. So, we're now making sure there is at least one that matches, right? And this is a case where it's a known data set, right? You might check for an empty state, like when we get to network requests, you can look at the network request.

You can mock in a network request, it's always gonna have what you think, right? You can basically control reality as you see fit to verify that you're getting the different excitations. You could have that network call, always return an empty array, verify the entity state. You can have it, always return a set of known objects, make sure they're on the page.

That's for the app that I work on, that's what I literally have. I stub out those network requests, sure, nothing comes back, I wanna see an empty state. We haven't loaded yet. It shouldn't show a loading, even if it's empty array. And so I can kind of time all these things.

We'll talk about how to wait for certain network requests to come back. Fairly soon, we'll have that in place and kind of get the rest of the pieces that we need to test those cases as well. So we have that and the other one was the ratings. And so what I might do is if I only wanted that alias, I could say something like, yeah, I could have done this earlier too and so I could say, hey, now we're testing the ratings filter And we'll say, Before each right, so everything in the other before each will still happen.

So visit the page, but we will also get side I get, and let's go see what it is in this case. I have the problem of two chrome at the Cypress Chrome and they my regular Chrome I keep picking the wrong one. So, writing filter we'll go ahead and again, we're just going to practice minimum writing filter in this case copy it over That's gonna be the entire command as- Reading this case, right?

Whatever is helpful for you, and now we don't have to get it each time. And so now for cost rating of ratings, well, say it should only display items with a rating of. Or hire. So, this is gonna like the process of iterating through the array is the same.

The assertion that we're gonna need to make, I mean we kind of accidentally, because the question was like get to see it, but we'll we'll see in another use case as well. And so cool, we'll have that in place, so we'll go through, should only have a rating a given rating or higher.

So, we'll decide, I guess we'll get that alias. Ratings filter and this phase we'll have to invoke vale property and we'll set it to rating and we'll trigger the change. Cool. And then we basically wanna make sure that anything that we find has the rating that we want.

So, you can do side dot get, I think before we did the popularity column, but I think it also has a class of- Have you learned it? And then I needed a text, right? I don't just need the element I need the text. So I could do a dot then and get the call the text or I could invoke the tax property on that field.

And then I can say, should, be, greater than or equal to, should it be GT E, that rating all right? Well, let's see kind of when that one a little bit and now I'm gonna do the only here. So, that only these tests run, because I have enough tests at this point, all right?

It is called just rating, is what I needed here. So we're invoking the text on that, I'm not finding it. And so, the big question is, I can stop this at this point. Do I have a TD with the popularity? This should be all of them should all have at least a rating of one.

And look at this. This is all of the ratings in this case, right? So that selector when I call text it's doing what jQuery does, it gives me just the text of each of them, right? So in this case, I do need to iterate through and get each one individually.

Because invoking the text method on the collection, gets me all of the ratings concatenated into one giant number, right? And that is, it's not necessarily so Cyprus limitation that is a jQuery behavior. So, in this case, we might choose to then go back to what we did earlier in our workshop, which is iterate over them, right?

So, we can say each and grab the element, and I could say, that I want to expect that the elements text. And then you turn that into a number if I want to use greater than or equal to, so I can put a plus in front of it, which will coerce it into a number.

You can see it's the same assertion, but slightly different syntax. When we're writing the expect, because we don't have the should chaining, we could figure it out. And that should be greater than or equal to the rating and now they're all passing. And so what's kind of cool about this is that, we've got effectively what?

Seven tests for each rating. We can have a set for each property, a set for all the restaurants. So, with not that many tests that we're writing, we could- Have a pretty like comprehensive, like set of tests on this, right? And yeah, it's only where it actually applies like this is all pretty similar, right?

Like you might not be able to get this much for free, but like, there will always be some cases we have different filters. And you can again programmatically kind of figure out how you wanna design this. So, at least you're hitting every case, right? Because it's one of those things where yeah, most the time they are gonna behave the way you think, but when they don't it's probably a big deal, right?

As well so we go through we basically get was probably a bit about 40 tests for really three assertions.

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