[MUSIC PLAYING] All right, so in the last episode, we worked on our plan, and we had AI tackle the first draft. But we encountered endless things that need to be tweaked and fixed and adjusted. First and foremost, I want to get the test in order. So you'll see here, it did add one new test, which is effectively a feature test that ensures you can bulk invite people to your team. But then we have dialogs, we have front-end stuff,

ensures you can bulk invite people to your team. But then we have dialogs, we have front-end stuff, we have these new flows for how you might invite a user or manage your team, but they are not under test. Which means we end up in situations just like the cliffhanger in the last episode where the actual flow does not work the way you'd expect. So let's get to work on that. Let's get our tests in order. We need a handful of browser-specific tests

Let's get our tests in order. We need a handful of browser-specific tests that ensure these new dialog flows work as expected. So for example, we have a flow for managing your team. We have one for inviting users to your team. And then we also have a flow for assigning a series to one or more members. And none of these are currently under test. So I want you to write a series of pest browser tests that physically open the browser and confirms and interacts

So I want you to write a series of pest browser tests that physically open the browser and confirms and interacts with these dialogs to ensure they work as expected. Yup. [MUSIC PLAYING] The goal is to get the ball as close to the ceiling as possible without actually hitting the ceiling. It's actually a little bit difficult. Oh, hit the ceiling ground. How are we doing?

Oh, hit the ceiling ground. How are we doing? [MUSIC PLAYING] Anyhow, we now have a team dashboard test. We should take a look at that. Team dashboard test. And the first thing I notice is it's really big. So they are encompassing everything involved with the dashboard. And ideally, I think I'd like to split this up

involved with the dashboard. And ideally, I think I'd like to split this up into one file for assignments, one for invitation, one for management, and things like that. But yeah, you can see as a team owner who doesn't have a team, well, at this point, it redirects them to a team creation page, right? If we scroll down to the bottom, let's take a look at some of these. The assignments card, well, it shows the team and my assignments

let's take a look at some of these. The assignments card, well, it shows the team and my assignments have for each owner, so we can create a member, add the member to the team, visit this page, and we should see the team assignment section, and there shouldn't be any errors. Let's keep going. What else do we have here? It assigns a series to the entire team. Yeah, so here's the flow.

It assigns a series to the entire team. Yeah, so here's the flow. So we visit the page, we click on the button, we assert that it says, all right, who's watching? We choose options. And notice, in this case, it's using data test equals entire team checkbox, so it's using data attributes here. Check this out. Let's give this a run. OK, and that does pass.

Let's give this a run. OK, and that does pass. But I want you to notice that with PEST, you don't actually have to do this. Instead, there's a shorthand. We can use the @ symbol, and the @ symbol will expand to a full data test attribute. So for example, if I were to tweak this and give it another run, it still passes. And this is the approach I would generally want to follow.

another run, it still passes. And this is the approach I would generally want to follow. OK, so let's do this. Let's switch back, and I want to do a handful of things. Can you tag all of the tests related to our team dashboard so that I can run them as a filter? Oh, this is kind of a cool one, too. Look at this. I also see that you changed this. Nice.

I also see that you changed this. Nice. The @ shorthand is quite like, it's weird how incredibly human it is. Yeah, so now you can see it's using PEST group to add a label to these two tests. And that way, if I want to trigger only my team dashboard specific tests, I can do so by referencing that group. Cool.

I can do so by referencing that group. Cool. So let's give that a shot. And I'm also going to specify parallel. All right, and that's done. They're all returning green. OK, so that's helpful. Next, let's switch back. And I want to say, I noticed as you worked on this, you made a handful of errors that I'd

And I want to say, I noticed as you worked on this, you made a handful of errors that I'd like to avoid in the future. So I want you to update or create a skill to assist you when running PEST tests. All right, next, let's go by hand. First, always favor PEST @ helper/shortcut over riding the full data test selector. Next, what else did I notice? Sometimes it would try to click a button by its label,

Next, what else did I notice? Sometimes it would try to click a button by its label, and it would run into situations where maybe there's another button on the page that has the same label, and it couldn't figure out why the intended button wasn't being clicked, and it would end up in a big loop for five minutes until it solved the problem. So let's say, always favor data attribute selectors over using a button's label for the query selector.

selectors over using a button's label for the query selector. Also scan our conversation in the context here and extract any lessons you learned here into this skill as well. Yeah, so this is something I would recommend. I often go through this flow, where you're working with AI, and you just notice situations where it's not overly efficient. So once you are done with the project or the feature, you can then have AI extract its learning

So once you are done with the project or the feature, you can then have AI extract its learning either into a guidelines file or a dedicated skill, so that on the next pass in the future, it knows, for example, don't try to find a button by its label. That's very brittle, instead use a data attribute. All right, so now it is creating a dedicated skill for how it should go about browser testing. All right, that's done. So now, yeah, the final thing would be to review that skill

All right, that's done. So now, yeah, the final thing would be to review that skill and extract anything that doesn't need to be there. Sometimes it can be a little more verbose than it needs to be. So for example, if we have a look at the skill, it has some notes on selectors. Good, bad, that's always very helpful. Always use data test selectors over text selectors, combining how to work with keyboard input. These are things that it ran into.

combining how to work with keyboard input. These are things that it ran into. And yet, at this point, you're free, of course, to go through and say, you know, that doesn't matter. I can get rid of that. This doesn't need to be here. And that ends up being the flow. Okay, so in the next episode, I want to switch back to the design of our new dashboard because it still doesn't match the mockups.

I want to switch back to the design of our new dashboard because it still doesn't match the mockups.