Can I use this for JavaScript projects?

Yes. While the skill generates TypeScript classes for superior type safety and IDE support, the resulting code can be easily converted to JavaScript by removing the type annotations.

Does this skill help with navigation logic?

Yes, it automatically includes goto() methods and ensures that page-specific navigation is encapsulated within the class for easier test writing.

Why does this skill enforce data-testid locators?

Using data-testid is a best practice for E2E testing because it creates a stable contract between the application and the test, making locators much less likely to break when UI styling or layout changes.

When should I use this instead of a general test generator?

Use this skill when building a sustainable test suite where you need to reuse elements and actions across multiple tests. For simple, one-off scripts, a general test generator may be faster.

Playwright Page Object Builder

Name: Playwright Page Object Builder
Author: joel611

byjoel611

•

Security & Testing

Generates maintainable TypeScript Page Object Models (POM) for Playwright using best practices and data-testid locators.

This skill automates the creation of professional-grade Page Object Models (POM) for Playwright testing suites, ensuring high maintainability and code reuse. It transforms page descriptions and element lists into structured TypeScript classes that encapsulate locators, navigation logic, and user actions. By strictly enforcing the use of data-testid attributes and providing standardized async methods, it helps developers build robust end-to-end testing architectures that are resilient to UI changes and easy to scale across complex web applications.

Key Features

01Automated TypeScript class generation for Page Object Models

021 GitHub stars

03Automatic inclusion of JSDoc comments and TypeScript type safety

04Ready-to-use boilerplate for navigation and usage examples

05Strict enforcement of data-testid locators for resilient element selection

06Generation of standardized async action methods and descriptive getters

Use Cases

01Building a scalable end-to-end testing suite for complex web applications

02Refactoring flat, hard-to-maintain test scripts into a structured POM architecture

03Standardizing testing patterns across a development team using Playwright

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joel611/claude-plugins page-object-builder

For use in Claude.ai and ChatGPT

Download Skill