How do I interact with an invisible element in Playwright?

Answer

Sure, you can interact with invisible elements in Playwright. An element is visible only if it has a non-empty bounding box and doesn't have the visibility:hidden computed style. Elements with zero size or display:none are not visible.

You can use the force option in actions like page.click(). If you pass force as true to page.click(), Playwright will not check if the target element actually receives click events. Here's how you do it:

await page.click('#my-element', { force: true });

You can also check if an element is actionable using methods like elementHandle.isVisible(), page.isVisible(), or locator.isVisible(). These methods ensure that elements reach an actionable state after certain actions.

const isVisible = await page.isVisible('#my-element');
console.log(isVisible); // prints true or false

Remember, by default, Playwright doesn't allow clicking invisible elements due to their lack of visibility and empty bounding boxes. But with the force option or by checking their actionability state, you can still perform actions on them.