What is the difference between detached and hidden elements in web automation?

Answer

Detached vs Hidden Elements

Detached and hidden elements are two distinct states in web automation. A hidden element is part of the DOM but not visible due to CSS rules like visibility: hidden or display: none. Detached elements, on the other hand, have been removed from the DOM entirely.

Handling Hidden Elements

When interacting with hidden elements, you should wait for them to become visible. For example, if a button is hidden due to an animation, wait for it to appear before clicking. With @playwright/test, you can use the waitForSelector function to wait for an element to become visible:

import { test, expect } from '@playwright/test';

test('wait for hidden element', async ({ page }) => {
  await page.goto('https://ray.run/');
  await page.waitForSelector('#hiddenButton', { state: 'visible' });
  await page.click('#hiddenButton');
});

Handling Detached Elements

When dealing with detached elements, you need to ensure they're part of the DOM before interacting with them. This can happen when navigating between pages or when elements are removed dynamically. You can use waitForSelector with the attached state to wait for an element to be attached to the DOM:

import { test, expect } from '@playwright/test';

test('wait for detached element', async ({ page }) => {
  await page.goto('https://ray.run/');
  await page.waitForSelector('#detachedElement', { state: 'attached' });
  await page.click('#detachedElement');
});

In summary, hidden elements are part of the DOM but not visible, while detached elements have been removed from the DOM. Use @playwright/test to handle these states appropriately when automating web interactions.