Answer

Understanding Playwright's Auto-Waiting Feature

When you're working with @playwright/test, you might wonder why your code is passing even if some elements are not hidden. This is due to Playwright's auto-waiting feature.

Auto-Waiting in Action

Playwright waits for elements to be attached, visible, stable, and ready to receive events before interacting with them. This ensures that actions are performed only when elements are ready.

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

test('auto-waiting example', async ({ page }) => {
  await page.goto('https://ray.run/');
  const element = await page.$('selector');
  await element.click(); // Playwright waits for the element to be ready
});

Dealing with Iframes

Iframes can complicate things. They're essentially separate HTML documents embedded within your main document. Playwright treats each frame as a separate entity and checks elements within each frame individually.

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

test('iframe example', async ({ page }) => {
  await page.goto('https://ray.run/');
  const frame = await page.frame('frameName');
  const element = await frame.$('selector');
  await element.click(); // Playwright waits for the element in the iframe to be ready
});

The Bottom Line

Even if elements are not initially hidden within an iframe, they still need to meet certain conditions before being interacted with. Playwright's auto-waiting feature ensures that actions are performed only when elements are ready and able to receive those actions.