Why use data-cy attributes for testing?

A data-cy attribute is a deliberate test hook. It says that this element is a meaningful target, independent of how it looks. A class can change with a design token rename; a data-cy name changes only when the product intent changes, which is exactly when the test should change too.

export function SaveButton({ onSave }: { onSave: () => void }) {
  return (
    <button data-cy="save-profile" onClick={onSave}>
      Save profile
    </button>
  );
}

How to use them well

• Name by purpose, such as save-profile or cart-item, not by position
• Keep one attribute per meaningful element rather than decorating everything
• Scope shared names with a container, such as cart-item plus remove
• Prefer a consistent convention so the team can grep for data-cy
• Do not expose secrets or user data in attribute values

Some teams prefer data-testid or data-test. The exact name matters less than consistency because Cypress can query any attribute. Pick one and document it so tests do not mix three conventions.