Hi there, Today you will learn how to generate the code for your tests. First of all, you have to run the application, so type in your terminal , and you will have your application up and running at the address . npm run dev http://localhost:5173 Now you have to run the Playwright code generator. To do that, you have to open another tab in your terminal and type . This command opens a new browser and the Playwright inspector. npx playwright codegen Now, the browser shows an empty tab, and the Playwright inspector is on a new page, ready to listen to what you will do in the browser. If you go into the browser's address bar and type you can notice that something has changed in the Playwright Inspector. The inspector noted the page change and added this step to the test body. http://localhost:5173, Now, you can click on one square and simulate a game between two players, you can notice that the inspector records all these steps and creates the body of the test for you. The result of these actions is this test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); }); As you can see, the generated code is good but not perfect, so please use this tool with the head on the shoulders and check the result every time to ensure your test's value. Now it's time to copy and paste the code into our test file and improve its content. Let's start by changing the test name from to and changing the goto value from to because our base root corresponds to the home page. test should win the player "X" http://localhost:5173/ / Then refactoring the first click probably is a good refactor to improve the test, so you have to change the line from to and last but not least, add the assertion. In this case, if the test name is the best assertion is something like this await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); should win the player "X" const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); So the code tries to get the paragraph with the winner text and checks if the value contains the value.The final result is this X test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); }); Now, you can run the test and check the result which should be green. Ok, I think that's all from the code generation. In this article, you learned how to record your steps and convert them to code for your tests. Please, as I said before, use this tool responsibly and check the generated code every time. That's it, folk. See you soon 👋 p.s. you can find the result of this article here
