FAQs »

Is it possible to interact with inputs or other elements in an iframe?

Loadster’s browser scripts reference elements using a selector. Whenever you want the bot to click on a button, type text into a form input, or choose an option from a list, you’ll need to use a selector to point to the element you’re interacting with.

But ordinary selectors only work in the scope of a single HTML document. That’s why Loadster supports special iframe selectors for resolving an element nested within an iframe.

iframe[id="the-iframe"] .the-element-in-the-iframe

These iframe selectors are necessary when you’re scripting against a site that has important interactive elements in iframes, like a Stripe payment form or a nested video player. Because a document inside an iframe has its own DOM tree, a normal selector wouldn’t find the nested element without a little help.

To resolve a selector within an iframe, your selector will need to specify the iframe itself as a parent element, and then reference the element inside it with an ordinary sub-selector.

Examples of iframe selectors

Let’s say you have a video player nested inside an iframe, and you want the bot to click the play button of this video player. You’ll need to resolve the play button by first specifying the parent iframe, and then the play button itself.

iframe[name="video-player"] #play

That works great if the iframe always has the same name, but what if the iframe’s name changes every time like a Stripe form? In this case you can use the CSS-style ^_ selector to match an iframe whose name starts with a certain string.

iframe[name^="__privateStripeFrame"] [autocomplete="cc-number"]

Unfortunately, some Stripe integrations have multiple frames on the same page with very similar names, causing this approach to fail. If that happens, look for a more consistent attribute like title to identify the form.

iframe[title="Secure card payment input frame"] [autocomplete="cc-number"]

Keep in mind that the bot will only be able to resolve elements inside iframes if you specify the iframe as an element first, like in the above examples. Also keep in mind that a normal browser won’t understand these iframe selectors, they are a custom extension for Loadster’s browser bots.

Caveats and pitfalls with iframe selectors

Again, Loadster’s iframe selectors are a custom implementation because ordinary CSS does not allow selectors to span multiple frames. As such, they have some caveats that make them different from ordinary CSS selectors.

  • A frame selector must explicitly reference frame or iframe. It can’t be a bare ID or class selector like #myFrame or .my-frame.
  • A frame selector must match one unique result. If it matches multiple frames on the page it will fail.
  • Nested frame selectors like iframe[id="outer"] iframe[id="inner"] button will work in most cases, but there may be edge cases where they don’t.