Playwright auto-wait is great, until your component re-renders mid-action

Rémy Duthu's article explores a common issue within Playwright testing involving auto-wait and component re-renders, particularly in React applications. The problem arises when Playwright's actionability check targets a DOM element that becomes stale due to a React re-render, leading to test failures such as "Element is not attached to the DOM." This occurs because React's state updates can unmount and remount components, resulting in visually identical but programmatically distinct DOM nodes. The author suggests a solution by employing a locator strategy that requeries elements based on a stable parent, ensuring that tests can adapt to DOM changes without failing. Additionally, the article warns against relying on naive fixes like extending timeouts and highlights the importance of identifying underlying performance issues when frequent re-renders occur. It also discusses how tools like Mergify can help identify and quarantine flaky test patterns, thus preventing them from disrupting CI pipelines.