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
16. More complex selectors

Episodes

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

Transcript

00:00
Let's talk about more complex selectors when we need to target something specifically on the page.
00:06
And we'll pretty much use our delete task test to demonstrate this, but obviously you can go ahead and apply it to absolutely anything. Okay, so what do we mean by more complex selectors? Well, when we do stuff in our test like this, for example, press delete task button,
00:25
what this is actually doing is it's mapping this to something like the following. It will be body and then it will be dusk and then the name of this, like so. That's pretty much a CSS selector. So what we can actually do within our tests is rather than either press a specific element that
00:49
has a dusk attribute or press something with some text, we can also provide in a CSS selector. Let's go ahead and look at writing a test to delete a very specific task on the page. Of course, not super useful for our use case, but you'll probably have one. Okay, so let's go ahead and pretty much just grab our entire
01:11
test for just deleting a standard task where we created a couple of tasks. Let's pull this down here and we'll go ahead and say delete a specific task. Okay, so I'm going to create three tasks and we're going to delete the middle one. So the second one in.
01:30
How do we do this? Well, just before we go ahead and press this button, accept the dialogue and wait until the text is missing. Let's just go over some of the basics of selectors in the browser.
01:42
So let's go over to our console and let's try and pluck this specific task out and then try and pluck this specific button out using a selector. We don't need to do this in our test, but it's a good idea to come into your browser to actually grab the correct CSS selector before you go ahead and paste it into your test.
02:03
So to do this, we're going to say document and query selector, or you can use query selector or to grab all instances. In our case, we just need one. And in here, we just pass in a string with this CSS selector.
02:14
Now, even though we're talking about CSS selectors within CSS, this supports attributes fetching as well. So we can say something like this, dusk equals and I think we just call that task.
02:26
What does that give us? Well, let's have a look. And yeah, we've got null. So I think it was task item.
02:33
And yeah, there we go. So that's selected the first task item. Let's say we want to go down and select the second task in this list. Well, again, we can use CSS to use the nth child here.
02:45
And we can say one or two or three if that exists. Obviously, it doesn't on in our case, but you can do that to plug anything you want out. Now we're inside that second task. We can now try and find the delete button within there.
03:00
So again, we can use the dusk attribute. And let's just remind ourselves what we called this. It was task delete button. So we can say task delete button.
03:11
And there we go. We have now targeted the second task down and the delete button for that. And that gives us back that element. So we can pretty much just experiment in the browser.
03:22
And this is always what I do when I'm writing end-to-end tests. If I need to target something really specifically, we can experiment in the browser. And now that we're sure we've got the right thing,
03:32
we can go over and add that to our test. So we want to visit this page and we've got three tasks here. So let's say we want to grab the second one down. What do we want to do?
03:42
Well, we want to either click or press on that specific thing. Let's paste in the selector that we took from the browser. Let's go ahead and accept the dialog. And we'll do exactly the same thing as before.
03:54
We will wait until missing on the task that we want to delete. So actually, just to make this test a little bit clearer, let's create out a task to delete variable with that specific task. So we'll say task get one.
04:09
That's the second one down because this is zero index with the collection that we get back here. And let's bring in this task to delete into here. And we'll just say task to delete and title.
04:22
So we'll wait until that title is missing. And then we can say task to delete ID in here. Okay, so that should be just about good. Let's go ahead and run this.
04:31
And of course, we'll fix it up if we've done anything wrong. Okay, let's say PHP artisan pest dusk and filter down to this specific one. And that looks like it's failed. Let's just have a look here.
04:44
So that hasn't been removed. So let's just review what we've done here. The task to delete is the second one down. And this should actually be one, shouldn't it?
04:53
Yeah, because this is zero index. As I already said, this needs to be one. That's the second item. Let's run that again and see what we get.
05:02
Okay, great. It passes. So that's pretty much it. But anytime you need to target a very specific element on the page,
05:10
if you're working with a list of things or you have multiple items, go ahead straight over to your browser, experiment within the console, or go ahead and inspect the source of the page to grab the path to this. And then go ahead and add it directly to your tests.

Episode summary

In this episode, we dive into the world of more complex selectors in our end-to-end tests. Instead of just clicking buttons or using simple selectors, we learn how to use CSS selectors to target really specific elements on the page—for example, deleting just the second task in a list.

We walk through a practical example: we create three tasks and show how to delete only the middle one by crafting a selector that picks it out specifically. The video demonstrates how to use your browser's console (with document.querySelector) to experiment and confirm you're selecting the right item before bringing that selector into your tests. This is super helpful, especially when working with lists or repeated elements, so you can always go for the exact thing you want and avoid any accidental clicks.

You'll also get to see common mistakes (like remembering that lists are zero-indexed!) and how to debug them. By the end, you’ll know how to build selectors for both the parent item and, say, its delete button, and confidently add these selectors to your tests for precise targeting.

Episode discussion

No comments, yet. Be the first!