locators-scanner
Scan a website URL and extract the best locators for every visible element on the page, outputting a Page Object Model (POM) code file and/or a JSON locator map tailored to a specific test automation framework (Playwright, Cypress, or WebdriverIO). Use when users say "scan this page for locators", "extract locators from URL", "get selectors from website", "generate page object from URL", "build POM from page", "find locators for this URL", "what locators should I use for this page", "scan this page for elements", "extract selectors", "generate locator map", "get element selectors for testing", or mention scanning/extracting locators from a website. Also trigger when a user pastes a URL and asks to generate a page object, locator map, or selectors for Playwright, Cypress, or WebdriverIO. Also explicitly triggered by the /locators command.
Best use case
locators-scanner is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Scan a website URL and extract the best locators for every visible element on the page, outputting a Page Object Model (POM) code file and/or a JSON locator map tailored to a specific test automation framework (Playwright, Cypress, or WebdriverIO). Use when users say "scan this page for locators", "extract locators from URL", "get selectors from website", "generate page object from URL", "build POM from page", "find locators for this URL", "what locators should I use for this page", "scan this page for elements", "extract selectors", "generate locator map", "get element selectors for testing", or mention scanning/extracting locators from a website. Also trigger when a user pastes a URL and asks to generate a page object, locator map, or selectors for Playwright, Cypress, or WebdriverIO. Also explicitly triggered by the /locators command.
Teams using locators-scanner should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/locators-scanner/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How locators-scanner Compares
| Feature / Agent | locators-scanner | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Scan a website URL and extract the best locators for every visible element on the page, outputting a Page Object Model (POM) code file and/or a JSON locator map tailored to a specific test automation framework (Playwright, Cypress, or WebdriverIO). Use when users say "scan this page for locators", "extract locators from URL", "get selectors from website", "generate page object from URL", "build POM from page", "find locators for this URL", "what locators should I use for this page", "scan this page for elements", "extract selectors", "generate locator map", "get element selectors for testing", or mention scanning/extracting locators from a website. Also trigger when a user pastes a URL and asks to generate a page object, locator map, or selectors for Playwright, Cypress, or WebdriverIO. Also explicitly triggered by the /locators command.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Locator Extractor Skill Senior QA automation engineer role. Scans a single web page, identifies every visible element, and produces the best locator per element following the **native locator philosophy** of the chosen framework. ## Workflow `URL + framework → Fetch HTML → Parse elements → Rank locators → Generate outputs → Deliver` ## Step 1 — Gather Inputs | Input | Required | Default | |---|---|---| | **URL** | Yes | — | | **Framework** (Playwright / Cypress / WebdriverIO) | Yes | — | | **Page name** | No | Infer from `<title>` or URL path | | **Output formats** | No | Both POM + JSON | If framework is ambiguous, ask: *"Which framework — Playwright, Cypress, or WebdriverIO?"* ## Step 2 — Fetch & Parse Retrieve the fully rendered page using the browser MCP: 1. Call the browser MCP navigate/goto tool with the target URL. 2. Once navigation completes, call the MCP's JavaScript execution tool and evaluate `document.documentElement.outerHTML` to capture the fully rendered DOM. 3. Use the resulting HTML as the source for Step 3. If the browser MCP tools are unavailable or fail, ask the user to provide the rendered HTML directly: > "A browser MCP (e.g. chrome-devtools-mcp or @playwright/mcp) is required to fetch the page. Please enable one in Claude Code and retry, or paste the rendered HTML from DevTools (F12 → right-click `<body>` → Copy → Copy outerHTML) and I'll continue from there." Do NOT stop the skill — wait for user input and continue to Step 3. Parse all visible `<body>` elements per `rules/ref-element-extraction.md`. ## Step 3 — Rank & Select Locator Apply the framework hierarchy (`rules/ref-playwright-strategy.md`, `rules/ref-cypress-strategy.md`, or `rules/ref-webdriverio-strategy.md`): walk top-to-bottom, pick first usable attribute, ensure uniqueness (chain/filter if not), fall back to minimal CSS. Record recommended + fallback locator. Use `rules/ref-aria-roles.md` for implicit ARIA roles and `rules/ref-naming-conventions.md` for names. ## Step 4 — Generate Outputs Produce POM + JSON using the framework POM template and `rules/ref-json-schema.md`. See `rules/ref-output-formats.md` for confidence levels, file naming, and summary fields. ## Step 5 — Deliver Save to `/mnt/user-data/outputs/`, present files, provide summary per `rules/ref-output-formats.md`. Apply `rules/ref-edge-cases.md` throughout. ## Rules Reference | Rule | File | When to use | |---|---|---| | Element extraction | `rules/ref-element-extraction.md` | Step 2 | | Playwright strategy + POM | `rules/ref-playwright-strategy.md` | Steps 3–4 | | Cypress strategy + POM | `rules/ref-cypress-strategy.md` | Steps 3–4 | | WebdriverIO strategy + POM | `rules/ref-webdriverio-strategy.md` | Steps 3–4 | | Implicit ARIA roles | `rules/ref-aria-roles.md` | Step 3 | | JSON schema | `rules/ref-json-schema.md` | Step 4 | | Naming conventions | `rules/ref-naming-conventions.md` | Steps 3–4 | | Output formats & confidence | `rules/ref-output-formats.md` | Steps 4–5 | | Edge cases | `rules/ref-edge-cases.md` | Throughout | ## Examples - **Playwright:** "Scan https://example.com/login for Playwright locators" → `LoginPage.ts` + `login-locators.json` - **Cypress:** "Extract selectors from https://app.example.com/dashboard using Cypress" → `DashboardPage.js` + `dashboard-locators.json` - **WebdriverIO:** "Generate a page object from https://shop.example.com/checkout for WebdriverIO" → `CheckoutPage.js` + `checkout-locators.json` ### Positive Trigger User: "Scan https://example.com/login for Playwright locators and generate a page object" ### Non-Trigger User: "Write unit tests for my login form using Jest" ## Troubleshooting - Error: Browser MCP is unavailable or fails to fetch the page - Cause: No browser MCP (chrome-devtools-mcp or @playwright/mcp) is enabled in Claude Code - Solution: Prompt the user to enable a browser MCP, or ask them to paste the rendered HTML from DevTools (F12 → right-click `<body>` → Copy outerHTML) - Expected behavior: Skill continues to Step 3 using the user-provided HTML and does not stop - Error: Non-unique locator generated for an element - Cause: Element lacks a unique identifier (id, data-testid, or accessible name) - Solution: Chain with parent scope or index per framework rules; flag `confidence: low` in the JSON output - Expected behavior: A best-effort locator is produced with a low-confidence warning - Error: Framework is not specified - Cause: User provided a URL without stating Playwright, Cypress, or WebdriverIO - Solution: Ask: "Which framework — Playwright, Cypress, or WebdriverIO?" - Expected behavior: User confirms the framework and skill proceeds to Step 2 - Error: Auth-gated URL fails to load - Cause: Target page requires login credentials the browser MCP does not have - Solution: Ask the user to log in, navigate to the page, and paste the rendered HTML from DevTools - Expected behavior: Skill processes the authenticated page HTML and generates locators
Related Skills
agent-skills-manager
Manage AI skills from the Ravn AI Toolkit via corvus CLI — install, update, remove, search, and configure skills for any project. Use when: (1) Installing AI skills into a project, (2) Updating installed skills to latest versions, (3) Browsing or searching available skills, (4) Configuring global or per-project skill sets, (5) Troubleshooting corvus setup. Triggers on: "install skills", "add skills", "update skills", "corvus", "skill manager", "browse skills", "set up AI rules".
type-system-audit
Audit a repository for type-system weaknesses using recent bug-fix commits as hard evidence. Produces prioritized findings tied to specific commits showing which types allowed real bugs. Use when: reviewing type safety, auditing types, analyzing type bugs. Triggers on: type audit, type system review, audit types, type safety audit.
ts-linter
Set up and enforce a strict, production-grade ESLint configuration for TypeScript projects, then systematically fix all linting issues. Use this skill whenever the user asks to add a linter or ESLint, enforce code quality rules, fix linting errors, clean up code style, or add type-aware linting. Trigger on: "lint", "eslint", "code quality", "static analysis", "strict linting", "make it stricter", "make the code stricter", "add better rules", "clean up the codebase", "enforce standards", "fix all the warnings", or "ShadCN lint errors". Handles detection, config generation, dependency installation, auto-fix, and manual remediation. Do NOT use for Biome or Rome projects, Prettier-only formatting, non-TypeScript/JavaScript projects, writing custom ESLint rules or plugins, husky/lint-staged/pre-commit hook setup, or when the user just wants to run an existing linter without changing its configuration.
transcript-notes
Convert meeting transcript .txt files into structured .md notes with metadata, TL;DR, key topics, action items, and quotes. Use when processing raw transcripts into formatted notes. Triggers on: "process transcript", "generate notes from transcript", "transcript to notes", "/transcript-notes".
test-plan-gen
Generate professional QA Test Plan documents (.docx or .pdf) from a structured interview. Trigger on "create/write a test plan", "I need a test plan", "prepare QA documentation", /testplan, or when a user uploads a PRD/requirements and wants a test plan generated.
test-case-gen
Generate, evaluate, audit, and normalize QA test cases to RAVN standards. Trigger on "generate/write/create test cases", "evaluate/score my test cases", "audit my test suite", "review test coverage", "normalize/reformat test cases", or when a user wants test design help. Also triggered by /testcases.
tech-react
React 19 patterns for components, hooks, Server Components, and data fetching. Use when writing React components, managing state with hooks, implementing Suspense boundaries, optimizing renders with proper memoization, or building Server/Client component hierarchies.
tech-drizzle
Drizzle ORM typesafe schema design, relational queries, prepared statements, migrations, and transactions. Use when working with Drizzle ORM, writing database queries, managing migrations, or optimizing query performance with prepared statements.
tech-android
Android and Kotlin development patterns — Compose, architecture, coroutines, Room, navigation, Hilt. Use when building Android apps, writing Jetpack Compose UI, or reviewing Android-specific code.
swift-concurrency
Swift Concurrency patterns — async/await, actors, tasks, Sendable conformance. Use when writing async/await code, implementing actors, working with structured concurrency, or ensuring data race safety.
rewrite-commit-history
Rewrite a feature branch's commit history into clean conventional commits that tell a progressive, linear story. Handles backup, soft reset, and atomic recommit. Use when: (1) Cleaning up messy WIP commits before PR, (2) Reorganizing commits into logical units, (3) Converting commits to conventional commit format. Triggers on: "rewrite history", "clean up commits", "rewrite commits", "conventional commits", "squash and rewrite", "reorganize commits".
qa-personality-builder
Create custom QA agent personalities for project-specific testing needs. Guided builder that asks about the specialty, tools, and test scenarios, then generates a personality file and registers it in the QA config. Trigger on "create a QA personality", "add a custom test agent", "build a webhook tester", or when the user needs a project-specific QA agent. Also triggered by /qa-create-personality.