# React Patterns for Playwright (Humand)

Guidelines for testing React + TypeScript + MUI flows used in Humand backoffice.

## Practical focus

- test user-visible behavior, not component internals
- prefer role/label/text over implementation-specific selectors
- model major screens via page objects

## MUI-specific guidance

- avoid class selectors (`Mui*`) because class names can be unstable
- target dialog, tab, table, and button roles semantically
- use regex for translated labels when variants exist

## Async UI behavior

- React state updates and network responses should be asserted with web-first waits
- avoid compensating with long static sleeps

## Lazy and route transitions

- assert route transitions with `toHaveURL`
- assert view readiness by checking stable anchors on the destination view

## Accessibility alignment

Use locators that align with accessibility tree. This improves both reliability and UX standards.