Testing Inertia with Dusk
This episode is for members only

Sign up to access "Testing Inertia with Dusk" right now.

Get started
Already a member? Sign in to continue
Playing
09. Looking inside specific page sections

Episodes

0%
Your progress
  • Total: 2h 53m
  • Played: 0m
  • Remaining: 2h 53m
Join or sign in to track your progress

Transcript

00:00
Looking inside elements and more importantly performing actions inside of elements can be really useful. Probably not so much in the example we're about to look at but once we've covered this
00:10
you'll have this in your toolkit to go ahead and use within your own projects. Now the proper terminology for this is scoping selectors. We basically want to look inside of a selector and then have that as the scope that we're performing other actions Now the first thing that we want to look at is actually looking inside of elements.
00:30
So at the moment what we've done with our simple shows the task page test, which probably isn't the most useful test but we'll roll with it, is that we've visited this page and then we've asserted that we can see the text tasks. Now that's all well and good but let's go ahead and just try and break this test and I'll show you how we can improve this. So let's go ahead and
00:53
run this test in isolation. So let's run phpArts and pest-dusk and we'll filter this down to shows the task page. We know that this passes it's all good but if we head over to our tasks index just here we know that we've got tasks here but what happens if we have the tasks text somewhere else which is probably pretty likely for a tasks page. So let's just go ahead and pop it down here
01:20
under all of our tasks and in fact I'll take this and take it outside of this if statement to go ahead and demonstrate this. So let's get rid of the text inside of here let's say that for whatever reason we've gotten rid of that probably by accident let's go ahead and run that same test and see what happens and yeah sure enough it passes that's probably not what we need because
01:42
really what we're saying in this test here is we want to see this within the header. Now again this isn't the most useful test but as you get to write your own test you'll want to make sure you're actually checking for the right text in the right place. Okay let's bring this back to how it was and we'll bring that example back in a minute. Let's just make sure that this is running and
02:05
let's improve this in two different ways. So the first thing is that assert-c just takes this within the entire body element so this selector will be body and then it will be an element with the text tasks. So what we can do is head over to our tasks page so let's go back over to there and let's take a look at this header. Now this is part of the authenticated layout it's a slot within
02:32
authenticated layout so let's look for header in here and that just basically injects that content directly into here. What we could do is because this is a common element on all of our pages we could give this a dusk selector and then only look within it. So let's call this we could call it header but that's a little bit vague let's call it authenticated layout header just so we are
02:57
really specific here. So now that will contain that dusk selector and over in our test what we can do is change this test to assert-c in. What we can now do is as the first argument pass where we're looking and then as the second argument pass what we're looking for. Let's run that test again and it should pass great so it does but now the difference is that if we were to go ahead and
03:24
change that again so if I get rid of that in here and then I put this text somewhere else on the page like we did before and that remember passed because we were looking in the entire page now it's going to fail because we're specifically looking within that element. So that can be really helpful depending on how granular you want to get with your tests. Okay let's bring that back to
03:48
how it was and bring in our tasks here and we've looked at assert-c in and there are a bunch of things like this as we've already seen we've got assert-don't-see we've got assert-visible for things that are css selectors all of that good stuff and you'll have a list of them to work with. Now the other thing that we can do which is specifically scoping selectors and this is
04:10
useful for another reason is use with. So what we can do here is pass in a selector and let's just comment this out but change this over to pretty much do the same thing and then I'll show you why this is different. We can pass the selector as the first argument but as the second it's a closure so what this will do is it will continue to bring in our browser like this and we can say browser
04:36
assert-c we don't need to say assert-in now because we're within the context of this element and now we can say task. So as it stands this and this at the moment are pretty much the same thing. Let's go ahead and run this test and make sure it passes and then I'll explain why these two things are different so that's all good and it works. Now the reason that we have assert-c in
05:00
and with which pretty much at first glance look like they do the same thing is that occasionally what you'll want to do is take additional actions only within specific selectors. So for example let's say that we had two buttons on the page a create task button up here and a create task button down here we want to make sure that the create task button in the header works
05:26
we're not necessarily testing the one just down here. Well how do we do that? Well we want to be able to click an element or click a link or anything inside of a selector. By using with we're scoping it to the place where we want to perform any actions. To demonstrate this let's head over to our tasks within the header that we are currently targeting and let's go ahead and
05:48
bring in a link that goes through to the dashboard for example. So let's pull this in go ahead and hook this up to our root helper going through to our dashboard and we should see that over on our page. Let's just make sure we pull the link component in from Inertia and when we click through sure enough we go through to the dashboard. So the reason that this is useful when we're
06:15
scoping selectors is that we have a dashboard link here and we have a dashboard link here as well now. So with that in mind what we can now do is say something like click link and we can click the dashboard link and we can go ahead and wait for location dashboard. So something like that it just means that we know exactly what we're targeting. Let's go ahead and run that test and just make
06:39
sure that passes and sure enough it does. So you kind of get the idea. Okay I'm not going to do this I'm going to leave this like this and we have a reference to both of these now the shorter assert see in but also scoping selectors where we can go ahead and assert that we see things within other elements but we can also interact with elements specifically within what we've scoped this to.

Episode summary

In this episode, we dig into how to work inside specific parts of a page when writing browser tests. Instead of just looking everywhere on the page for some text or button, sometimes you want to check that something appears in a particular section—like making sure "Tasks" shows up in the header, not just anywhere.

You'll see why simply looking for text globally can give us false positives (like if "Tasks" accidentally appears elsewhere). To fix this, we use "scoping selectors," which basically means telling our tests to look or interact only within a certain element (like the header). You'll learn how to add scoped selectors in your code with Dusk selectors, use assertSeeIn, and how these differ from just assertSee.

Then, we'll level up with the with method, which lets you do more than just check for text. You'll see how you can perform multiple actions, like clicking a link, but only inside a certain element. This is especially handy if you have duplicate buttons or links (like multiple "Dashboard" links) and only want to interact with the one in a specific spot.

By the end of this episode, you'll know how to look for content or interact with elements precisely where you mean to—making your browser tests a lot more accurate and reliable!

Episode discussion

No comments, yet. Be the first!