And we can do this by using some structure. We want all of our tests to be so clear that we can find out what is happening at a quick glance. And we want to use a repeatable formula that we can use over and over again for every single test we write. And the pattern that I want to teach you is called arrange, act, assert. Here's how it works. In the arrange step, we do stuff like reset the database, seed some test data and set up authenticated sessions. In the act step, we do stuff such as navigate to the target page, interact with different elements on the page, such as input fields and buttons, and submit forms. In the assert step, we select different elements from the page, assert the correct state, and even check the URL that is correct.
Now, let's use this guideline to write a test. Let's start with the homepage. Here we can see three different nodes, and if we can look at the dates, we can see that they are ordered in descending order. So let's write the test that verifies this functionality. We're going to start by giving it a descriptive name, list nodes in descending order by creation date. Now, for the arrange step, we want to set the stage, and we do this by seeding some data into the database. We're going to put there three different nodes, third, second, and first, which are all created on different dates. Next, we move on to the act step, and here we just go to the homepage. That's it. Now, the most crucial, the assert step. How can we assert that the nodes are in the correct order?
Let's take a look at the application again. We have the three nodes, and we need to check that the content is what we expect. But how can we select them? In the registration form, it was easy because we could just select inputs by their label. But in the homepage, the nodes, they don't have any label. So how do we select them? Well, Playwright provides a great solution by using some custom HTML attributes. Let me show you. So this is the React component for the node, and I want you to pay attention to the link component. Here, we are rendering the content, and this is the element that we want to select in our Playwright test, and we can identify this element by using a custom HTML attribute data test ID, and we can give it any descriptive name that we want. Here, we give it node content, and then in our Playwright test, we will select all elements by the test ID node content, and then we're going to do four assertions. We're going to check that there are three nodes and that the contents are third, second, and first. Next, we can annotate each step, arrange, act, and assert, so they are more descriptive. First, given there are three nodes, when I visit the homepage, then I see the nodes in descending order by creation date.
Comments