How to work with iframes

One does not simply input text into an iframe. 👌

The following robot navigates to the Stripe Payments Demo page and enters data into two form fields. What's interesting about the form is that one of the fields (Card) is inside an iframe element. The other field (Name) is on the page outside the iframe:

Stripe Payments Demo

Selenium (RPA.Browser.Selenium)

*** Settings *** Documentation Working with forms inside and outside of an iframe. ... Selenium-based RPA.Browser.Selenium library. Library RPA.Browser.Selenium *** Tasks *** Input text in form field inside an iframe, then outside the iframe Open Available Browser https://stripe-payments-demo.appspot.com/ Wait Until Element Is Visible tag:iframe Select Frame tag:iframe Input Text When Element Is Visible name:cardnumber 4242424242424242 Unselect Frame Input Text name Robot

The Select Frame keyword (from the RPA.Browser.Selenium library) selects the iframe using its name as the locator. After entering the value into the field inside the iframe, the Unselect Frame keyword is used to move the focus back to the main window. After that, it is possible to input text into the fields outside the iframe.

Playwright (Browser)

Here is the same logic implemented with the Playwright-based Browser library:

Read A new option for web automation: Using the Robot Framework Browser library, based on Playwright for more information on how to install and use the Browser library.

*** Settings *** Documentation Working with forms inside and outside of an iframe. ... Playwright-based Robot Framework Browser library. Library Browser *** Tasks *** Input text in form field inside an iframe, then outside the iframe New Page https://stripe-payments-demo.appspot.com/ Type Text css=iframe >>> input[name="cardnumber"] 4242424242424242 Type Text css=input[name="name"] Robot

There you have it: Moving in and out of an iframe!

Last edit: May 5, 2022