Range Sliders & Select Lists

[00:00:00]
>> One of the things that we kind of just alluded to that we haven't really talked about is input fields. Yeah, the normal one is super easy, you type into it, right? What do you do with a range or like a select, right? Clearly, you're going to need to be able to use these.

[00:00:25]
And so, there's different kinds of ways for each of them, and then there's the kind of there's typing into input field, super easy, right? Maybe we need something for checking a checkbox or radio button, right? Or something along those lines, probably a select, like a drop down, right?

[00:00:46]
And then we have the kind of nuclear option, right, for changing one. So let's I'm gonna do a few of them and then I have that input obstacle course where you can try a number of other ones. And then we'll kinda look at them and see how we might work with a few of these as we go through.

[00:01:10]
So, if I go into other inputs, specs, let me just swap that over in Cypress. And these will pass, right? Here I found some data set that the reference sources at the bottom of the page, if you wanna find the data set itself. But I found this data set, and it was apparently, all of the secret menu items at a number of fast food chains, right?

[00:01:42]
So not only will you learn Cypress today, you will learn that Chick-fil-A has an ice dream, which is a different kid's meal prize, apparently, just getting a two cheeseburger meal is the McDonald's secret menu item. I grew up in a world where that was just on the menu, apparently, it's not.

[00:02:01]
But anyway, at your leisure, during lunch, after you've eaten or something along those lines, you can peruse this list and possibly, learn something new. The more important part for our purposes is it's got a few of those squirrely input fields, right? It's got me filtering just by a restaurant, right?

[00:02:28]
Or I've got some checkboxes where I can hide columns or I can filter by a minimum rating. I believe that the only thing reading it's popularity that only a Butterbeer Frappuccino reaches the tier of a level seven is popularity rating, nothing else reaches that. Again, I will leave it to you to probably spend more time exploring the list itself than the Cypress implications around it.

[00:02:58]
But what I am going to seek to do right now is at least control these three sets of different inputs, and you can guess where this goes next, right? But this should cover most of the things that you need to know in order to kind of work with these.

[00:03:16]
So let's try it out. So if I go over, they pass cuz they're not doing anything. So, yeah, no ops are great. I do have some aliases, right? I did grab on to the minimum rating visibility that was that range filter, as well as the drop down, which is that select, which is the restaurant filter.

[00:03:42]
There's a bunch of textboxes, so like what else, just grab one at some point. So we have that in place. So actually, we're gonna do these a little bit of a reverse order. Let's do the select, right? Cuz that probably gonna be the first, yeah, with checkboxes you can text them to click on them.

[00:04:05]
But as you saw, we did before with the labels and that's how it kind of works, but let's go with the select of this point. So I can do side I get, and we'll say restaurant-filter, right? Which is that alias that we made up at the top, and we will select I'm not ready for the tweets, the best fast food chain in existence don't ask me.

[00:04:33]
Tanner is making faces like getting vegan Taco Bell is a matter of personal pride even when I'm not eating vegan, it's doable. So we wanted to go ahead and we want to select it, right? And then you might want also verify that in this case, if you select it, that's the value that it has.

[00:04:56]
Sometimes you want the act of changing it and sometimes you want to assert that it hasn't given value. In a later one, we will literally create a battalion of tests that goes through each one and then verifies that the stuff on the page is correct. But for now, I want to set it and then I wanna verify that Cypress didn't lie to me.

[00:05:12]
And that it actually if I go get that value, that it's what I think it is. So then we'll go and we'll get the same restaurant filter. And then I want to say, listen, if I select Taco Bell, it should have the value Taco Bell Right? So that's both how to change a select field and then how to read it.

[00:05:39]
It was verify that I didn't lie to you, you can argue you said Taco Bell was good, thereby you lied to me, that's I'm not doing that right now, I'm only talking about Cypress. So we can also do something with the checkbox, right? So this is kind of interesting, because I might want to, again, assert things.

[00:06:01]
We know that we can click on the checkbox, but you might also wanna assert. Like in HTML, a checkbox has an action accurate attribute called checked or it's either checked or not checked. And when we get to the other thing later, we'll see that radio buttons, you might wanna know different things about them as well.

[00:06:18]
So in this case, I'm just gonna get a checkbox, I don't really care which one. And careful viewers will notice I'm gonna do something tricky with the alias as well that I didn't show you before. So go ahead and get me an input of the type checkbox, in this given case, I don't care which one.

[00:06:39]
Save it cuz I'm gonna need to look at it later, right, as a checkbox, and then check it, right? So the active saving as an alias is effectively almost like a tap or a pass through, all right? And so, I can continue chaining it along like this. And then I could say, The actual checkbox, and I could say should be checked.

[00:07:15]
If you check the checkbox, if I didn't make up this check method, right? Then the act of calling it should in fact, check the checkbox in this case, right? Cool, so we've got that in there as well. One of the things I'm kinda curious about if I could do is, again, slowly, It gonna chain it like that, you can argue, who knows why I would do that?

[00:07:46]
But, yes, that'll work as well. So this chaining all the time is kinda interesting, you can a lot of times keep the chain going, you can verify, you can do more stuff. You can make another assertion, you can do some more stuff, you can make another assertion. And that's what we're talking about before, the thing you were told the unit test is break them down into small pieces, one little setup, one little action, one little verification.

[00:08:05]
Here we can go through an entire user flow in a chain and kind of what work through everything as well. So sometimes alias is the right choice, sometimes getting comfortable with the chain, but sometimes you start with alias and you refactor it, right? Like these are all options.

[00:08:20]
My job is to tell you that they exist, and kinda point you in the different set of trade offs. All right, now the problematic one. So some of them, yeah, it was great that a select field had a method called select. Awesome, neat. It was wonderful that the checkbox had the method called check.

[00:08:46]
I don't even know what you would name one on range, right? And so, this one's a little bit tricky. And even if you were writing react or something along those lines or spelled or what have you, you would probably listen for a change event, but you'd have to set the value.

[00:09:03]
Well, that's kind of the answer, right, and how you were doing your regular code. There isn't a useful helper method out of the box later, we'll talk about you can make your own. But there isn't one in this case, so effectively when all else fails and you do not have a check method or a select method or what have you.

[00:09:24]
It is basically not dissimilar from what you would do in your react spelled Angular code, or whatever, but we'd like jQuery, right? Or what would you do with jQuery, right? Which is effectively set the value and then trigger the event, right? And that should update the terms, code, to kinda make all of those things happen.

[00:09:46]
So now we just have to talk about how we will do that, and so, in this case, we'll just cy a get writing filter. And we will say, we know that invoke calls a method on the other underlying object but puts it back in the chain. So we'll say invoke val, which is the jQuery method for with no argument getting you the value with a second argument setting the value, cuz we don't talk about enough, jQuery has the best API ever.

[00:10:20]
No, I do not want to install Docker desktop every day.
>> [LAUGH]
>> And then I can trigger, it's kind of up to you, depending on the implication is you have trigger change or you could trigger input. I'm going to trigger input, but try them both out, they should work.

[00:10:42]
And so, I wanna trigger it and then I could go ahead and say that we did the checkbox. Go ahead, get that rating filter, and then it should, Have a value. Of, in this case seven. Because input fields even if there are a number field, you always get it as a string.

[00:11:09]
So, yeah, cool, and so all of those work, you can actually see it for a second. If I do the only there for this one test, You can see that it did move it to seven, only the Butterbeer remains. The Butterbeer Frappuccino, right? So it's verifying that not only is it working because it's not failing, but it is actually doing the thing that I needed to do as well.