Context7 MCP Skill Integration
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Context7 MCP Skill Integration represents the availability of the playwright-page-object library as a Model Context Protocol (MCP) tool. This integration allows AI assistants to understand, generate, and refactor Playwright test code using the decorator-driven Page Object Model (POM) patterns defined by the library. By loading this skill into context, an AI agent can provide expert-level assistance with selector composition, nested controls, and fixture wiring.
Sources: README.md:231-233, skills/playwright-page-object/SKILL.md:1-10
The integration is designed to be "AI Ready," providing documentation and specific skills that can be installed via the Context7 MCP. This enables automated workflows where an AI agent can detect existing code styles—such as plain decorated classes versus built-in base classes—and suggest improvements or new test structures based on the project's specific conventions.
Sources: README.md:235-243, skills/playwright-page-object/SKILL.md:21-35
Core Skill Model
The integration treats the library as a decorator-driven locator composition layer. It guides AI agents to recognize that root decorators establish a locator context for top-level classes, while child decorators resolve relative selectors from that context.
Agent Detection Logic
When an AI agent interacts with a codebase using this skill, it follows a specific detection checklist to maintain consistency with the existing project structure:
- Root Style Identification: Determining if the project uses plain decorated classes (constructor taking
page: Page) or classes extendingRootPageObject. - Output Style Identification: Recognizing if child accessors return raw Playwright
Locatorobjects, external controls, or built-inPageObject/ListPageObjectinstances. - Instantiation Style: Checking for
createFixtures(...)usage versus manual instantiation.
Sources: skills/playwright-page-object/SKILL.md:12-35
Skill Architecture Diagram
The following diagram illustrates how the MCP skill structures the relationship between decorators and the resulting Playwright locators.
Integration Components
Evaluation System
The integration includes a suite of "evals" (evaluations) designed to test an AI agent's proficiency in applying the library's patterns. These evaluations ensure that when an agent is asked to create or refactor tests, it adheres to specific requirements such as using the accessor keyword and implementing createFixtures.
| Eval ID | Scenario | Expected Outcome |
|---|---|---|
| 1 | Adding login form tests | Use of @RootSelector, @Selector, and typed fixtures. |
| 2 | Refactoring raw locators | Extracted PageObject classes and typed accessors. |
| 3 | Product list modeling | ListPageObject with @ListSelector and item filtering. |
Sources: evals/evals.json:4-25
Tooling and Installation
The skill is compatible with the Agent Skills protocol and can be installed via the Context7 CLI.
npx ctx7 skills install /sergeyshmakov/playwright-page-object playwright-page-object
Sources: README.md:239-241
Implementation Patterns for AI Agents
The skill instructs agents on how to choose between different implementation styles based on user requirements.
Decision Matrix for Code Generation
| Use Case | Recommended Approach | Key Class/Decorator |
|---|---|---|
| Incremental Adoption | Plain decorated root class | @RootSelector on standard class |
| Full Framework Utility | Built-in POM layer | extends RootPageObject |
| Nested Composition | Nested controls | extends PageObject |
| Repeated UI Elements | Collection management | ListPageObject |
Sources: skills/playwright-page-object/SKILL.md:46-77
Component Relationship Diagram
The diagram below shows how the different page object types relate to one another within the integrated model.
Conclusion
Context7 MCP Skill Integration provides a bridge between the technical implementation of decorator-driven Playwright selectors and AI-assisted development. By defining clear rules for detection, decision-making, and code generation, it ensures that AI agents can effectively contribute to maintaining a clean, typed, and composable Page Object Model graph. This integration is essential for developers looking to automate the refactoring of raw Playwright chains into the structured abstractions provided by the library.
Sources: README.md:231-243, skills/playwright-page-object/SKILL.md:118-130