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:
- In
tests/birthday.test.js, begin the test with the following code, which loads the application, the/birthdaysendpoint, and then completes the form to add a new birthday forAres. 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 ...