Using page object models in Playwright tests

A page object model is simply a plain JavaScript class that groups up the mechanical actions of navigating a page (locating a field, clicking a button, or filling in a text field) into methods that describe high-level operations that occur within your application (completing a birthday form).

In this section, you’ll build a page object model named BirthdayListPage that will allow you to rewrite your existing Playwright tests more simply.

Let’s get started by adding the new class:

1. Create a new file named tests/BirthdayListPage.js and give it the following content. It creates the basic class along with a single method, goto, which is used to navigate to the /birthdays application URL:

   export class BirthdayListPage {
     constructor(page) {
       this.page = page;
     }
     async goto() {
       await this.page.goto('/birthdays');
     }
   ...