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:
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
Browserlibrary.
*** 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!
Learn more about the libraries mentioned on this page: