Rayrun
← Back to Discord Forum

Not waiting for hidden state

foreach (var instruction in HomePageImInstructionStrings)
{
  await this.Participant.Page.Locator(HomePageOption).Locator($"text={instruction}").WaitForAsync(new LocatorWaitForOptions { State = WaitForSelectorState.Hidden });
}```

Trying to wait until these elements are hidden on the page, of course if they aren't hidden this should throw after the timeout is reached however for some reason even if the elements are NOT hidden, this is still passing. The elements are within an Iframe, does this have an affect? They are using display: none; to hide them from the user.

This thread is trying to answer question "Why is the code passing even if the elements are not hidden and does being within an Iframe affect this?"

1 reply
VinceAlvarez

if element is inside iframe, you have to switch inside that iframe first before you do your action

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.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.