73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
# 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
|