Skip to content

Add stable data-cy selectors for Cypress E2E tests - #2286

Open
kmdvs wants to merge 8 commits into
mainfrom
feature/issue-2284-data-cy-selectors
Open

Add stable data-cy selectors for Cypress E2E tests#2286
kmdvs wants to merge 8 commits into
mainfrom
feature/issue-2284-data-cy-selectors

Conversation

@kmdvs

@kmdvs kmdvs commented Aug 19, 2026

Copy link
Copy Markdown
Collaborator

Summary

Begins the migration described in #2284 by adding stable semantic data-cy
hooks to the calendar selector and calendar dropdown.

This PR is intentionally limited to testability hooks and does not change
application behaviour, styling, layout, or business logic.

Changes

  • Add stable hook for the calendar selector trigger
  • Add stable hook for the currently selected calendar name
  • Add stable hook for the calendar search input
  • Add stable hooks for the calendar list and calendar items
  • Add hooks for calendar loading and empty states
  • Add the same calendar selector hooks to the responsive sidebar

These hooks replace Cypress selectors coupled to Ant Design DOM structure,
CSS classes, and positional selectors.

Refs #2284

@kmdvs

kmdvs commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator Author

Selector stability / #2284 progress

Baseline

Metric Baseline
Cypress selector definitions ~722
Selectors containing data-cy ~437
data-cy coverage ~60.5%
Selectors with no data-cy ~285 / ~39.5%
Estimated Footlight work packages ~20
Estimated semantic hook additions ~45–60

data-cy coverage is an optimistic proxy for stability. Some selectors still combine data-cy with Ant Design classes, generated DOM structure, or positional selectors.

Progress

Area Status Notes
Calendar selector/dropdown ✅ Done Stable calendar, item, search, list and selected-name hooks
Event list rows ✅ Done Semantic repeated event-row hook
Event action menu ✅ Done Stable action trigger
Confirmation modals ✅ Done Shared title/content/OK/cancel contract
Generic entity deletion ✅ Done Uses semantic entity rows/actions
Pagination 🚧 In progress Replace AntD pagination DOM selectors
Searchable filters ⬜ Remaining AntD checkbox/dropdown internals
Navigation ⬜ Remaining Replace menu/path/AntD ancestry selectors
Login/profile ⬜ Remaining Several IDs/CSS/AntD selectors remain
Date controls ⬜ Remaining AntD picker internals
Time controls ⬜ Remaining Heavy positional/AntD DOM coupling
TreeSelect / Select ⬜ Remaining Roots often exist; option/dropdown hooks still needed
Rich-text editors ⬜ Remaining Quill DOM coupling
Settings / Widget ⬜ Remaining Mix of stable hooks and structural selectors

Remaining Footlight-side work

Regression importance Lower effort Medium / higher effort
High Navigation, edit/action buttons, pagination, sort controls, login/profile basics, remaining entity-list actions Searchable filters, bilingual tabs, date picker, time picker, TreeSelect/Select, rich-text editors
Lower Static Settings/Widget/User Management hooks Complex Settings/User Management dropdowns and Widget select/tree controls

Example

Before After
.ant-pagination-next > .ant-pagination-item-link > .anticon > svg [data-cy="pagination-next"]
div.ant-spin-container ul.ant-list-items :nth-child(1) [data-cy="span-event-name"] [data-cy="list-item-event"] + Cypress .eq(0)
.outlined-label semantic action-specific data-cy

Refs #2284

@kmdvs

kmdvs commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator Author

#2284 progress

Area Status Notes
Calendar selector / dropdown ✅ Done Stable hooks for selector, selected name, search, list, items, loading and empty state
Event list rows ✅ Done Semantic repeated list-item-event hook
Event action trigger ✅ Done Stable event action-menu trigger
Event action menu ✅ Done Semantic event-action-menu-item hooks with data-action
Event edit button ✅ Done Dedicated button-edit-event hook
Confirmation modals ✅ Done Shared title/content and confirm/cancel hooks
Generic entity deletion ✅ Done Cypress now targets semantic entity rows and delete controls
Pagination ✅ Done Shared paginationItemRender, page hooks, data-page, next-page hook
Searchable filters ✅ Done Stable options, option and checkbox hooks; organizer-filter hook corrected
Sidebar navigation ✅ Done Shared navigation-item hook with data-path and data-active
User profile menu ✅ Done Stable trigger, username and semantic menu-action hooks
Login / reset-password controls ⬜ Remaining Several selectors still depend on IDs, AntD classes or DOM structure
Sort dropdowns / menu options ⬜ Remaining Still includes generated data-menu-id and AntD dropdown selectors
Date picker ⬜ Remaining AntD-controlled date-input/calendar selectors remain
Time picker ⬜ Remaining AntD-controlled time-picker selectors remain
TreeSelect / Select ⬜ Remaining Several selectors still combine data-cy with AntD internals
Rich-text editors ⬜ Remaining Quill / editor implementation selectors remain
Bilingual tabs ⬜ Remaining Some tab interactions still depend on AntD structure
Entity-list bespoke actions ⬜ Remaining Remaining Places / Organizations / People / Taxonomy-specific brittle actions
Settings static UI ⬜ Remaining Additional brittle Settings selectors remain
User Management static listing ⬜ Remaining Some listing selectors still need semantic hooks
User Management menus / actions ⬜ Remaining Generated rc-menu-*, data-menu-id and AntD dropdown selectors remain
Widget static UI ⬜ Remaining Additional selector cleanup remains
Widget complex selects / trees ⬜ Remaining AntD Select / TreeSelect structure still used

@kmdvs

kmdvs commented Sep 2, 2026

Copy link
Copy Markdown
Collaborator Author

@codex

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants