Element detached after actionability check in webServer configuration

Answer

p>Playwright does not re-resolve a locator once the actionability check has passed. If the element is detached from the DOM in the narrow window between the check and the execution, the action fails with a detachment error. There is currently no global 'retry-on-detachment' configuration to bridge this gap for all action types.

Confirmed Facts

• Actionability checks (visible, stable, enabled) are performed immediately before the target action.
• The stability predicate ensures the element is the unique match and not currently mutating at the time of the check.
• If the DOM node is removed after the check succeeds, the underlying handle becomes stale and Playwright reports it is not attached to the document.
• The webServer configuration manages the local application lifecycle but does not track or prevent internal SPA re-renders.

Likely Explanation

In dynamic Single Page Applications (SPAs), components often re-render or are replaced by the framework (e.g., React, Vue) immediately after state changes. Because the actionability check and the actual action are not atomic relative to external DOM mutations, a race condition occurs. This has become more visible in Playwright versions v1.40+, where stability checks were tightened.

Steps for Resolution

1. Use resilient locators: Use locators that re-evaluate on every interaction. Prefer getByRole or getByTestId over volatile CSS classes or DOM indexes.

   const submit = page.getByRole('button', { name: 'Submit' });
   // or
   const submit = page.getByTestId('submit');
   await submit.click();

2. Close the detachment window: Use an explicit waitForSelector call immediately before the action to ensure the node remains present.

   await page.waitForSelector('button[name="Submit\"]', { state: 'attached', timeout: 5000 });
   await page.getByRole('button', { name: 'Submit' }).click();

3. Stabilize the initial DOM: If the app mounts or navigates upon the webServer starting, wait for the network to settle.

   await page.waitForLoadState('networkidle');

Verification

• Check the test error output for the specific message: "element is not attached to the document" to confirm a race condition.
• Run the test with slowMo: 100; if failures decrease, the issue is strictly timing-related synchronization.

To provide a more specific recommendation, what locator type are you currently using for the failing element and what Playwright version is running? This determines if a locator shift or a specific wait state is the most effective fix.