react-browser-automation-gotchas

What problem does it solve?

This skill solves the common issue where Playwright and other browser automation tools appear to successfully click React UI elements, but fail to trigger React synthetic event handlers, leading to undetected state update failures. Developers often waste time debugging non-existent code bugs when the root cause is automation limitations rather than faulty application logic.

Core Features & Use Cases

• Automation Failure Diagnosis: Identifies root causes of failed React state updates during browser automation, including synthetic event delegation issues, non-semantic element clicks, and timing mismatches.
• State Verification Workflows: Provides step-by-step guidance to use browser console expressions, network request checks, and React DevTools to confirm actual UI state instead of relying on misleading automation snapshots.
• Edge Case & Fallback Handling: Covers common React pitfalls like controlled input desync and stale closure race conditions, and provides fallback steps for manual testing and direct API smoke tests when automation is consistently unreliable.
• Use Case Example: When testing a React chatbot where clicking sidebar conversation items does not update the chat area, this skill helps quickly determine if the issue is automation-related or a real code bug, and provides actionable steps to resolve the discrepancy.

Quick Start

When your browser automation click calls return success but the React UI state does not update as expected, use this skill to follow the provided debugging sequence to verify actual state, identify root causes, and apply appropriate fixes or fallback testing methods.