👨‍💼 In this exercise, you will write a new test case that makes sure that the user can edit their full name in the UI. But you won't be writing that test manually. You will generate it!

🐨 First, install the Playwright extension for Visual Studio Code.

🐨 Open the "Testing" panel in Visual Studio Code and go to the "Settings" section at the bottom. Check the "Show browser" option.

🐨 Next, in the list of tests at the top, locate the profile-edit.test.ts test suite and its "saves changes to the name of the user" test case. Click on the run icon next to the test case to run it. Once the test run is finished, you will notice that the browser window still persists. Great!

🐨 Now, right-click on the "saves changes to the name of the user" test case and select the "Go to Test" option from the context menu. This will open the profile-edit.test.ts file in your editor. Put your cursor after the last step in the test (the navigate() call), then click the "Record at cursor" button in the "Testing" panel of the Playwright's extension.

🐨 Once you start the recording, you will notice the focus jumping to the browser window. At the top center of the window, you can now find the recording controls that allow you to start recording and assert on the elements on the screen.

🐨 Scroll to the "Name" field and change its value to "John Doe".

🐨 Next, click on the "Save changes" button to apply the changes.

Now, it's time to generate some assertions!

🐨 Click on the user profile button at the top right of the screen, then click on the "Profile" link in the context menu. You should end up on the user profile page with their name updated from the previous step. Let's mark the new value of the name as the expected value. To do that, press on the "Assert visibility" button in the recording controls and click on the heading element that displays the user's full name.

That should generate the following assertion in your test:

await expect(page.getByRole('heading', { name: 'John Doe' })).toBeVisible()

🐨 And this completes the test! All that's left now is to close the browser window, which will stop the recording. You should see the generated test actions and assertions in file now.

Try running that test (without any recording) and see what happens!