gh-joel611-claude-plugins-plugins-testing-playwright-e2e/commands/create-page-object.md

Create Page Object Command

Description

Create a Page Object Model (POM) for a specific page or component. Generates a TypeScript class with locators and methods following the Page Object pattern with data-testid locators.

Usage

/create-page-object [page-name]

Parameters

• page-name - Name of the page or component (required)

Examples

/create-page-object LoginPage

/create-page-object ProductDetailsPage

/create-page-object CheckoutForm

Instructions for Claude

When this command is invoked:

1. Invoke the page-object-builder skill to handle the Page Object creation

2. Gather information:

   • Page name and URL
   • Key elements on the page
   • Common user actions
   • data-testid values for elements

3. Generate Page Object class:

   • TypeScript class with proper types
   • Readonly locators using data-testid
   • Constructor accepting Page object
   • goto() method for navigation
   • Action methods (async)
   • Getter methods for assertions

4. Provide usage example:

   • Show how to use the Page Object in tests
   • Demonstrate common actions
   • Show assertion patterns

5. List required data-testid values:

   • Document all testid values needed in the UI
   • Provide semantic naming suggestions

Error Handling

• If page name is missing, prompt for it
• If insufficient information, ask for page details
• Suggest data-testid names if not provided
• Warn if Page Object seems too large (consider splitting)

Notes

• All locators must use data-testid
• Page Objects should not contain assertions
• Use getters for elements that need assertions
• Keep Page Objects focused on a single page/component