skills.rest
NextSpark-js
NextSpark-jsOFFICIAL
Explore all skills by this author →
GitHub

cypress-selectors

Manage Cypress data-cy selectors with three-level core, block, and theme systems.

3|Updated Jan 3, 2026
Search Tags:#automation#testing#e2e#cypress#selectors#data-cy
One-click install
npx skills add https://github.com/NextSpark-js/nextspark --skill cypress-selectors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cypress-selectors
Source: https://github.com/NextSpark-js/nextspark/tree/main/.claude/skills/cypress-selectors
Command: npx skills add https://github.com/NextSpark-js/nextspark --skill cypress-selectors

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a robust, centralized system for managing data-cy attributes in Cypress tests, ensuring consistency and maintainability across the project.

Core Features & Use Cases

  • 3-Level Selector System: Organizes selectors into CORE, BLOCK, and THEME levels for clear separation of concerns.
  • Helper Functions: Offers sel(), cySelector(), and entitySelectors() for easy integration into components and tests.
  • Use Case: When developing a new feature, use this Skill to add data-cy attributes to all interactive elements in your components and define corresponding selectors in your Page Object Models (POMs) for reliable end-to-end testing.

Quick Start

Use the cypress-selectors skill to add data-cy attributes to the button with the text 'Submit' in the file '/path/to/your/component.tsx'.

Frequently Asked Questions about cypress-selectors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize data-cy attributes in Cypress e2e testing?▼

Standardize data-cy attributes by implementing a centralized three-level system that organizes selectors into CORE, BLOCK, and THEME levels, ensuring consistent naming conventions across components and Page Object Models.

What is the best way to manage Cypress selectors for Page Object Models?▼

Managing Cypress selectors for Page Object Models is best achieved using helper functions like sel(), cySelector(), and entitySelectors(), which provide a deterministic way to map data-cy attributes to interactive elements.

How do I organize Cypress data-cy selectors for better maintainability?▼

Organize Cypress data-cy selectors by categorizing them into a three-level hierarchy of core, block, and theme-specific selectors, which establishes clear separation of concerns and facilitates deterministic testing.

Does this Cypress selector system include validation for maintaining selector integrity?▼

Yes, the Cypress selector system includes validation scripts designed to maintain selector integrity, ensuring that your data-cy attributes and naming conventions remain consistent and reliable across the project.

When do I need a centralized system for Cypress data-cy attributes?▼

You need a centralized system for Cypress data-cy attributes when developing new features that require adding data-cy attributes to interactive elements, ensuring reliable end-to-end testing without selector duplication or inconsistency.

Can I use helper functions to add data-cy attributes to my Cypress tests?▼

Yes, you can use helper functions like sel() and cySelector() to easily integrate data-cy attributes into your components and define corresponding selectors, facilitating reliable and deterministic end-to-end testing.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

cypress-test-generator

Generate Cypress E2E test files and cypress.config.ts configuration.

Community
Intermediate
patricio0312revpatricio0312rev
5

cypress-playwright-setup

Sets up Cypress or Playwright end-to-end tests with page objects, fixtures, and CI workflows.

Community
Advanced
MathiasPaulenkoMathiasPaulenko

behave-bdd

Integrate Gherkin feature files with Python step definitions using behave.

Community
Advanced
nand1234nand1234

cypress-standards

Enforce consistent Cypress testing practices for UI test suites.

Community
Advanced