AI Playwright Test Generator Agent: Synthesizing Robust Page Objects & Resilient Locators

01. The Problem

02. The Concrete Engineering Scenario

An SDET needs to automate the WrightPay Send Money wizard (Recipient selection -> Amount & currency conversion -> Fee confirmation -> Payout dispatch). The agent must produce a TypeScript Page Object Model adhering to best practices.

03. Context & Inputs Provided to Agent

• •Cleaned DOM snapshot of Send Money page (accessible landmarks, buttons, forms).
• •Network endpoints trace (/api/v1/exchange-rates, /api/v1/transfers).
• •Test blueprint specifying valid inputs and expected UI state changes.

04. Agent Reasoning & Planning Steps

import { Page, Locator, expect } from '@playwright/test';

export class SendMoneyPage {
  readonly recipientSelect: Locator;
  readonly amountInput: Locator;
  readonly submitButton: Locator;
  readonly exchangeRateQuote: Locator;

  constructor(private readonly page: Page) {
    this.recipientSelect = page.getByRole('combobox', { name: /select beneficiary/i });
    this.amountInput = page.getByLabel(/amount to send/i);
    this.submitButton = page.getByRole('button', { name: /confirm & transfer/i });
    this.exchangeRateQuote = page.locator('[data-testid="live-fx-rate"]');
  }

  async executeTransfer(beneficiaryName: string, amount: number) {
    await this.recipientSelect.selectOption({ label: beneficiaryName });
    await this.amountInput.fill(amount.toString());
    await expect(this.exchangeRateQuote).toBeVisible();

    const [response] = await Promise.all([
      this.page.waitForResponse(res => res.url().includes('/api/v1/transfers') && res.status() === 201),
      this.submitButton.click(),
    ]);
    return response.json();
  }
}