skills.rest
fullstorydev
fullstorydevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fullstory-stable-selectors

Replace brittle dynamic identifiers with stable semantic selectors across web and mobile platforms.

11|2|Updated Dec 2, 2025
Search Tags:#accessibility#mobile#web#test-automation#Fullstory#stable-selectors#semantic-identifiers
One-click install
npx skills add https://github.com/fullstorydev/fs-skills --skill fullstory-stable-selectors-fullstorydev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstory-stable-selectors
Source: https://github.com/fullstorydev/fs-skills/tree/main/framework/fullstory-stable-selectors
Command: npx skills add https://github.com/fullstorydev/fs-skills --skill fullstory-stable-selectors-fullstorydev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern applications often suffer from brittle, dynamic identifiers that change across builds and devices. This Skill provides stable, semantic selectors to reliably locate components and interactive elements in both web and mobile contexts.

Core Features & Use Cases

  • Universal component-element taxonomy using data-component and data-element on web, and platform-specific equivalents on mobile (iOS accessibilityIdentifier, Android contentDescription/testTag, React Native testID, Flutter Key).
  • Enables reliable Fullstory searches, heatmaps, and automated tests with durable selectors across platforms.
  • Use Case: Large-scale apps across teams benefit from consistent targeting for analytics, accessibility, and automation.

Quick Start

Identify a ProductCard on the web with data-component="ProductCard" and data-element="card", then locate the Add-to-Cart control with data-element="add-to-cart" (and the web root selector [data-component="ProductCard"][data-element="add-to-cart"]).

Frequently Asked Questions about fullstory-stable-selectors

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

FAQPage Schema
How do I create stable selectors for web and mobile interfaces that survive rebuilds?▼

Stable selectors replace brittle, dynamic identifiers with durable, component-scoped attributes like data-component and data-element on web, and platform-specific equivalents like iOS accessibilityIdentifier or Android testTag on mobile.

What is a semantic naming taxonomy for test automation and analytics?▼

A semantic naming taxonomy applies consistent data-component and data-element attributes across components, elements, actions, and states to reliably locate interactive elements for automated tests and Fullstory analytics.

Can I use data attributes for Fullstory heatmaps across different frameworks?▼

Yes, applying universal data-component and data-element attributes with platform-specific frontmatter enables reliable Fullstory heatmaps and searches across web and mobile frameworks.

How do I implement durable selectors for React Native and Flutter components?▼

Use React Native testID and Flutter Key attributes as platform-specific equivalents, paired with a clear naming taxonomy and frontmatter, to implement durable, component-scoped selectors for analytics and testing.

Why do my dynamic identifiers break automated tests across builds and devices?▼

Dynamic identifiers change across builds and devices because they are not component-scoped, whereas stable semantic selectors use durable attributes to reliably locate elements and prevent test breakage.

Does this selector approach work for large-scale apps across multiple teams?▼

Yes, large-scale apps benefit from consistent targeting by enforcing a universal component-element taxonomy across teams, supporting reliable analytics, accessibility, and automation on web and mobile.

Related Skills

Explore More Software Engineering Skills→
coinbasecoinbase
493

component-styles

Standardize styling APIs for CDS components across web and mobile platforms.

Official
Advanced
fullstorydevfullstorydev
11

fullstory-test-automation

Generate cross-platform test automation scripts from Fullstory-decorated codebases.

Official
Advanced
ConductionNLConductionNL
1

journeydoc-instrument

Injects data-testid attributes into Vue components and verifies with Vitest.

Official
Intermediate
withpiperwithpiper
6

spec-validator

Validate Strategy documents for consistency, completeness, and governance alignment.

Official
Advanced