POMs with AI

You drove a flow and generated tests in lesson 2. The next two lessons go one step further. Instead of asking the agent to write a test, you ask it to restructure what's already there. Page Object Models (POM) and fixtures are the two refactorings I use most. Both are repetitive busywork, which makes them perfect for an agent.

What is a Page Object Model?

When the same locators show up across multiple tests, a Page Object Model pulls them into one place. POMs are classes that hold the locators for a single page and offer methods for the meaningful actions on it.

A good POM is a handful of locators with action methods on top:

import type { Page, Locator } from "@playwright/test";

export class ProductPage {
  readonly page: Page;

  readonly addToCartButton: Locator;
  readonly title: Locator;
  readonly price: Locator;

  constructor(page: Page) {
    this.page = page;
    this.addToCartButton = page.getByLabel("Add item to cart");
    this.title = page.getByRole("heading", { level: 1 });
    this.price = page.getByTestId("price");
  }

  async goto(handle: string) {
    await this.page.goto(`/product/${handle}`);
  }

  async addToCart() {
    await this.addToCartButton.click();
  }
}

import { test, expect } from "@playwright/test";import { ProductPage } from "./poms/product-page"; test("adds a snowboard to the cart", async ({ page }) => {  const product = new ProductPage(page);   await product.goto("snowboard");  await expect(product.title).toContainText(/snowboard/i);  await product.addToCart();});

Once the class exists, every spec that touches the product page needs three lines instead of thirty.

Let the agent do the extraction

Drafting a POM class is repetitive pattern matching, and that's exactly the work an agent is good at.

Ask your agent to read your existing spec files, find the locators they share, and move them into a class.