Adding a Playwright test for editing form data

In this section, we’ll build the latest Playwright test for our system. Because this test is quite long, we’ll build it bit by bit. In Chapter 7, Tidying up Test Suites, we’ll look at how this test script can be shortened.

Let’s follow these steps to create the test:

1. In tests/birthday.test.js, begin the test with the following code, which loads the application, the /birthdays endpoint, and then completes the form to add a new birthday for Ares. We have to be careful to find the button specifically with the Save name. That’s because we’ll now have multiple buttons on the page: one named Save, and then multiple buttons named Edit:

   test('edits a birthday', async ({ page }) => {
     await page.goto('/birthdays');
     // add a birthday using the form
     await page.getByLabel('Name').fill('Ares');
     await page
    ...