Testing the Counter with Playwright

[00:00:00]
>> Steve Kinney: And in fact we can do the same thing, I'll kind of walk you through one with the other app real quick, in this case you do need to have it running. Now you could programmatically do that at the beginning of the test, so on and so forth, it's very easy if you just have a client side app.

[00:00:17]
The interesting part is simulating the network and there are two ways to do that, and we'll talk about that in a second. But let's look at what this might look like from just a very blank area. So this is what I'm going to start with, right? And so I'm going to say test.beforeEach, and you might break this out into multiple forms.

[00:00:41]
Files where you go like go visit the user setting page, go visit the home page and this will work on everything from your static marketing site cuz it's just a browser and this is where it is using those accessibility roles. So all that vegetables I made you eat in the testing library part.

[00:00:55]
They're coming home now, so before each one of the objects you get in here is page, right? And you say page.visit or is dot go to, go to, page go to, in this case this one's 51 73.
>> Steve Kinney: Cool, cool, cool, and we have that in place, and now we can test, let's try someone.

[00:01:40]
>> Steve Kinney: It has a count, something really easy cuz where this becomes super powerful and again, like, this is why you don't have to refactor anything. You don't have to mock anything, right? There might be something you wanna mock in a second I'll get into that, but it's totally okay.

[00:01:53]
So we go there and we say, pull that page in there
>> Steve Kinney: GetByTestId, and that's gonna be, in this case, counter-count, right? Let's close that one and we'll do it It over here.
>> Steve Kinney: Save that file.
>> Steve Kinney: And All right, we run the tests.
>> Student: It's angry with me, what are you angry about?This is not running HTTPS
>> Steve Kinney: There it is, I gotta make this an async function.

[00:02:52]
Too much talking and typing, there we go,as you can see, what are my debugging strategies to put away in front of everything. You joke, it works, it doesn't work, all right, cool. So it loads onto the page, here you can kinda see the timeline of the loading, not a lot to see though.

[00:03:13]
And you have it on the page as well, these are obviously, it's not active this moment. But you can actually see that snapshot, that's cool. But the more important part is in here, you can go ahead, now you've got it where it is right now. And first of all, you can see that this test passes, right?

[00:03:39]
Even though I didn't make any expectations I don't know why it's read, but everything's happy, there's a check mark, whatever UIs are hard. I'm not one to cast a stone, it's got a green check, we're gonna go with it. And so interestingly, again, we kind of set this before with testing library, If it could not find this element, it would fail, right?

[00:04:05]
And so the act that it can find a counter account at all is a signal that everything is well, right? Cause if that didn't load, your app has got a problem. And so, that's not an antipater that's like, that's cheap, no, no, no, that's fine in playwright world.

[00:04:20]
That's a full legit test of, you now at very least have a test to say, hey, when we go to the homepage, that element better be on the page, right? And we can start to then do a bunch of additional things around this. And which is, yes, is this test gonna be way slower than unit test that goes like that?

[00:04:40]
Absolutely, but ultimately, there's no refactoring to think about so on and so forth, right? And so in here you can then begin to like go ahead and say like, we can get that button to increment, right? So this is gonna be very similar to what we saw before, and that's kind of what I'm trying to sell you on here.

[00:05:01]
And I'll talk about some of the other advantages to play right in a second. But one of like, I think the saving graces here is that, very similar to what you saw us doing earlier, and that is again, intentional. So here we'll say that this is the count, and then we'll say.

[00:05:22]
>> Steve Kinney: Increment button is,
>> Steve Kinney: And yes, I gave me the answer earlier, but now I've typed this so many times I can do it by heart.
>> Steve Kinney: And actually I'm gonna run that test again, because you know what this test does. It does verify that both of those things are on the page.

[00:05:48]
For the amount you get pretty fast again, like, then we can go ahead and.
>> Steve Kinney: Seems really familiar, doesn't it?
>> Steve Kinney: And this is still a valid test, because if it couldn't click that button, you know what it's gonna do? It's gonna fail.
>> Student: You call click on the increment button, increment button.click?

[00:06:14]
>> Steve Kinney: Yeah, the problem is if you keep trying to type button over and over again, it tries to autocomplete a totally different variable for you. Because you are too busy thinking, and talking, and not paying attention to what you're typing.
>> Steve Kinney: Yeah, there we go [LAUGH] Yeah, and you can look, you can see where the little button where I click, right?

[00:06:34]
And so this takes the idea of the testing library stuff one step further, right? Now, granted, It's really hard to like test an individual component in here, right? So, you now have all of that, all the problems of that ball of wax kind of come with you. But, with that comes some serious advantages, right?

[00:06:55]
Again, it's not like, well, this tool is better than that tool, It's like you have a set of knives, right? And depending on what you're trying to solve, the right set of knife works a different way as long as you feel comfortable refactoring.