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 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!