Dynamic Class Names - Failure Analysis Test

Registration Form

This form looks normal, but every element has a randomly generated CSS class that changes on each page load. A test using class-based selectors (e.g., .btn-a7f3x) would fail on the next load when the class changes.

Reload this page to see the class names change. Each load generates new random suffixes.

First Name

Last Name

Email Address

Role

Generated Class Names

These are the randomly generated class names applied to elements on this page load. Reload to see them change.

Current Dynamic Classes:

Why This Causes Flaky Tests

Many test frameworks locate elements by CSS class selectors. When class names are dynamically generated (common in CSS-in-JS libraries like styled-components or CSS Modules), the class names change between builds or page loads. A test selecting .btn-a7f3x works once but fails the next time when the class becomes .btn-k9m2p.

Class names change on every page load
Tests using document.querySelector('.btn-a7f3x') break intermittently
Fix: Use stable selectors like data-testid, id, or semantic roles