00:00 If I take a closer look at this assertion, I can see that I expect a horizontal line of crosses, but I'm just getting two cross marks and nothing else. I will start debugging this by doing a quick sanity check. Am I interacting with the game correctly in the test? So here I have the interactions that target the buttons, these are the areas in the game,

00:18 so I'm clicking on the left middle button, the middle, and the right middle section. These seem to be alright, this should give me one horizontal line of crosses. But that's clearly not what's happening. It would be really great if I could print the DOM after these actions took place. And I can do that using the built-in debug method from Vitas.

00:36 If I go to this render method over here, it actually returns an object. And there is a debug method on this object. This function will print the current state of the DOM whenever I call it. So let's call it after these interactions, debug. So let's open the terminal and see what this prints.

00:52 It gives me this whole DOM structure over here in line in my terminal. So I can find these middle sections of the game, so here's the left middle, and I can see that I'm putting the crossmark correctly here, then the next one also with the crossmark, but then the one after is missing the check that's supposed to be there.

01:09 And if I take a closer look, I can actually see that middle follows bottom left, and the right middle is somehow after this. It seems like I did a mistake in the layout for this component. So I can go to the component itself, and yeah, it's indeed incorrect. I can move this up, and now we'll have the test passing.

01:27 What's really great about this debug function is that I don't have to print the entire state of the DOM at once. I can provide specific locators I want to be printed, and this will allow me to cherry pick the exact elements I want to take a closer look at. For example, let's say I only want to print this middle row of the game.

01:44 So to do that, I will create a locator for that, getByRowButton, and I will use name and provide a regular expression here so it matches multiple elements, all elements that include middle in the accessible name. Because this locator resolves to multiple elements by design, I will make sure to call

02:03 the all method on it. And now that I observed the output, I can see the test printing all the areas that have middle in their name, like rightMiddle, middle, leftMiddle, and so on. Using the debug function is extremely powerful, because it allows you to print the state of the DOM at any point in time.

02:20 Make it your go-to choice to start any debugging when something goes wrong.