Page object model(pom): Sometimes we use the same code in multiple test cases. the drawback is that we write the same code again and again. By any chance the business logic is changed, then we also have to change the code in all test cases. We can avoid this using a page object model pattern. basically, we will separate the page elements and actions into separate classes. We will use that particular class in multiple test cases to avoid duplicate code.

POM is a design pattern in test automation that creates an object repository for storing all elements. It is useful in reducing code duplication and improving test case maintenance. In Pom, consider each web page of an application as a class file.

exports.Signin = class Signin{
    constructor(page){
      this.page= page;
      //declare your selectors
    }
    async gotoSignInPage(){
      await this.page.goto("<http://localhost:3000/sign-in>")
    }
    async signIn(email, password){
      const email = this.page.getByTestId("email");
      await email.fill(email);

      const password = this.page.getByTestId("password");
      await password.fill(password);

      await this.page.getByRole("button", { name: "Login" }).click();

      await expect(page).toHaveURL("/")
      await expect(page).toHaveText("best selling products").toBeVisible()
    }
}

Reuse the above code: import the class and create a new object with the page as a parameter.

const signin = new Signin(page)
await signin.gotoSignInPage()
await signin.signIn("[email protected]", "Test123@#")

exports.Home = class Home{
    constructor(page){
      this.page= page;
      //declare your selectors
    }
    async gotoHomePage(){
      await this.page.goto("/")
    }
    async signIn(){
      const listOfProducts = await page.getByTestId("products").nth(0);
      await expect(listOfProducts).toBeVisible();
    }
}