Test iframe content with playwright

Hello,

I want to test the extension preview page, which is loaded in an iframe as you see clearly in the picture below. I was able to load successfully the iframe content with iframeLocator which is exactly the content of the url in src attribute. However i can’t see any HTML elements or text only some script tags. I think the problem is more related to Theia and how extension page is loaded than playwright. How can i test or load the iframe contents ? any help

@planger Any idea what could be wrong here?

Hi @seddik-st,
regarding Playwright and testing iframes, you are certainly on the right path by using frameLocator. :+1:

I was able to load successfully the iframe content with iframeLocator which is exactly the content of the url in src attribute. However i can’t see any HTML elements or text only some script tags.

Just to make sure I fully grasp the problem: So Playwright can correctly access the content of the iframe via frameLocator and it can interact (locate and act) with its elements, but the content is not visible in the UI “to a human eye”?

Yes exactly! with playwright i’m able to access and manipulate the iframe content however what i’m seeing in the UI is not the same of the iframe page content (picture). so that’s why i think it’s more related to how Theia handle this webview. any solution to test those kind of scenarios ? Thank you

Ok thanks! And you want to verify in your test whether the elements in the iframe are actually visible?
If that’s what you are aiming for, I could think of the following options:

  • Check whether the element in the iframe is visible. Something is considered visible when it has non-empty bounding box and does not have visibility:hidden computed style. Note that elements of zero size or with display:none are not considered visible.
  • Check whether the element could be clicked. With the options { trial: true } playwright will just perform the actionability checks but won’t actually perform the click. This would not only test whether the element is visible (as above), but also would through a fail if it is overlapped by another element and thus cannot be clicked.
  • If a screen is correctly shown and you want to verify whether it remains shown exactly this way in the future (this is sometimes useful to ensure complex styling isn’t broken), you could do a visual comparison with reference images. Note that this could be high maintenance in the future, if the visually compared UI changes often in the future (you’d have to recreate the reference images everytime).

I hope this helps!

Hello,
Thank you for your quick reply. My issue is not about how to test visible elements but i can’t find those visible HTML elements in the iframe page content (only js scripts). how i can deal with that ?

Do you mean, you want to see the contents of the iframe in Chrome DevTools elements?

I want to select the elements inside the iframe which i can see in the UI but i can’t find it in the frame content. (i can’t find it neither with Chrome DevTools nor playwright)

Hi @planger,
After some verification, i found that when i run the same scenario manually on chrome browser, i can inspect the iframe document page. However, with chromium and playwright is not visible.
see picture below with chrome.

It’s visible now when i run with chrome version (channel) but not with chromium.

Oh, interesting! Great that you’ve figured it out. :+1:
I didn’t come by a noticeable issue yet between Chromium and Chrome, so this is certainly surprising.

A quick note:
If you set PWDEBUG=1 environment variable, playwright will open it’s inspector. There is also a tool to record tests. Anyway with that recording tool I was able to click elements in an <iframe> and get locators recorded. They are different from usual locators.
I used latest release of playwright.