How to Handle iFrames in Playwright

OVERVIEW

An <iframe> (short for inline frame) is an HTML element that allows you to embed another HTML document within the current page. Introduced in 1998, an iframe is one of the oldest HTML tags. They are commonly used to display external content such as ads, maps, or videos or to create layered user interfaces by loading multiple web pages within a single page.

Modern web development libraries and frameworks like Angular and ReactJS also support iframes. Angular's built-in security features, such as DomSanitizer, can be used to ensure that content loaded within an iframe is safe and secure.

In addition, to support the native HTML iframe tag, ReactJS also provides a built-in Reactiframe component, which is a wrapper around the HTML <iframe> tag.

<iframes> offer several benefits, such as the ability to embed external content like YouTube videos and tweets. Iframes can also be used to isolate content as the JavaScript and CSS of the parent page do not apply to iframe. Another excellent use case for iframes is for displaying advertisements.

With so many use cases for iframes, they are used in websites, and it remains important to be able to test web pages that contain iframes reliably. Not only simple single iframes but web pages that have nested iframes as well.

In this tutorial, we'll explore how to handle iframes in Playwright, a popular browser automation and end-to-end web testing library. You will learn how to locate an iframe using Playwright locators and how Playwright can handle nested iframes.

In addition to running all the tests to handle iframes in Playwright locally, you will also see how they can be run on a Playwright cloud grid provider.

What is Playwright?

Playwright is an open-source browser automation and end-to-end testing framework released by Microsoft in 2020. Playwright API is available for programming languages such as JavaScript, TypeScript, Python, Java, and .Net.

It also supports all modern browsers, such as Chrome, Firefox, Microsoft Edge, and Safari, making cross browser testing feasible. In addition to being cross-browser, Playwright is cross-platform, which means that tests can be run on Windows, macOS, and Linux either in headless or headed mode.

Some key features of Playwright

Playwright provides several key features that set it apart from other automation testing frameworks. Here are some of the key features of Playwright:

• Browser Context

  Playwright creates a browser context for each test. Browser context is equivalent to a brand-new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.

• Log in once

  Playwright helps save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test yet delivers full isolation of independent tests.

• Powerful Tooling

  Provides tools such as codegen, which generates tests by recording actions. These tests can be generated in any language. Traceviewer helps capture all test execution information to investigate and debug test failures.

• Auto-Wait & Retry

  Playwright waits for elements to be actionable before performing actions. It also has a rich set of introspection events. Combining these two eliminates the need for setting artificial timeouts and reduces the flakiness of tests.

All these combined features make Playwright a comprehensive, feature-packed browser automation and end-to-end testing framework.

What are iFrames and how to use them?

Iframes provide a convenient way to embed content from other websites on our website. An iframe can be created using the HTML <iframe> tag in the body of the page. Let's see how to embed a YouTube video as an iframe using CodePen.

YouTube provides the code to embed videos into iframe directly.

Head over to the YouTube page of the video you wish to embed into your web page as an iframe and click the Share button.

On the menu that appears, click the “Embed” button.

The <iframe> code snippet is available to copy & paste into your webpage. Like most websites that allow embedding, YouTube also allows customization of the embedding link, and based on the selection, the link to embed the video will be altered.

For example, if you click the 'Start at' checkbox and give a custom time, the “src” in the <iframe> tag will be amended with the start time.

Copy and paste the link generated by YouTube into the CodePen, and the resulting webpage will look like the one below.

This is only a high-level overview of the <iframe> tag, and a lot more customization is available when using it, but it remains out of the scope of this tutorial to handle iframes in Playwright as we will concentrate on handling web pages that contain iframes with Playwright.

What is the difference between Frames and iFrames?

The <frame> and <iframe> tags represent a way to divide a web page into parts. The major difference between the two is that the frame tag is no longer supported in HTML 5, and iframe is the preferred way to embed content from one website to another.

When you use the <frame> tag, then the content of a web page consists of frames that are created by using <frame> and <frameset> tags only (and <body> tag is not used).

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="20%,70%,10%">
   <frame name="top" src="/html/top.html" />
   <frame name="main" src="/html/main.html" />
   <frame name="bottom" src="/html/bottom.html" />
</frameset>
</html> 
      

And when you use <iframe>, then the content of web page doesn't contain frames and content of web page is created by using <body> tag (and <frame> and <frameset> tags are not used) as shown below:

<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>See the video</p>
 <iframe width="854" height="480" src="https://www.youtube.com/embed/2eabXBvw4oI"
    frameborder="0"    allowfullscreen>
  </iframe>
</body>
</html>
      

So <iframe> just brings some other source's document to a web page. Frameset tags were used to create frames with the tag frame, whereas iframe fulfills the functions of both frame and frameset tags. Unlike frame tags, iframe tags can also be placed inside the body tags.

Placement of <iframe> is easy, as a developer can easily put the iframe tag among the other webpage tags and add several iframe tags. On the other hand, placing frame tags in a frameset can be a bit more challenging.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Playwright browser testing, CI/CD, and more.

Playwright Frame and FrameLocator

Playwright's Page class API provides two methods to handle frames in Playwright. These are page.frame() and page.frame_locator().

page.frame()

Returns a frame matching the specified criteria.

To locate the frame using the frame() method, the name or URL of the frame must be supplied to this method. In the example below, you can locate the CodePen <iframe> name or the page URL.

page.frame_locator()

When working with iframes in Playwright, you can create a frame locator that will enter the iframe and allow selecting of elements in that iframe.

The below code snippet will select the frame with id='iframe-window' and search for the text element 'LAMBDATEST BLOG'.

🛎️The frame and frame_locator() methods are available in all language APIs, but their naming convention might differ slightly. For example, in TypeScript API, frame_locator() is called frameLocator() by the language naming convention. But the functionality and use case remains the same.

Now that you have learned the nuances of frames and iframes in Playwright let's dive deep into handling iframes in Playwright using Python and TypeScript. The demo will consist of four tests, two using the Python API of Playwright and two using the TypeScript API of Playwright.

You will also see how to run the tests on the Playwright cloud grid provided by LambdaTest.

How to set up Playwright with Python?

Before we begin, let us look at how to set up Playwright Python. The first thing you need for any Python project is a dedicated virtual environment to isolate the required dependencies. For this project, let's create and activate an environment named playwrightiframes.

Next, let's install Playwright. The packages that need to be installed are shown below and available in the requirements.txt file on the GitHub repo of this code.

And then download all browsers. You can also download specific browsers like Chromium or Firefox instead of downloading them. This step is unnecessary when using a cloud grid like LambdaTest, as LambdaTest will provide the browsers.

All the test scenarios used for the demo in this tutorial on handling iframes in Playwright are compatible with Playwright version 1.33, pytest version 7.3.1, and Python version 3.10.1.

Before moving to the testing scenario, let's understand the project structure and some important configuration files necessary to run the tests. The project structure looks as below.

Let us now look at the content of each file.

The first file you can see is secrets.env, which is used to store the environment variables that hold the username and API key to access the cloud grid.

The variable RUN_ON controls whether the tests run locally or on a cloud grid.

The variables BROWSER and PLATFORM control the web browser and operating system used when running tests on the cloud grid.

Here is what the complete utilities.py file looks like.

from playwright.sync_api import Page
from dotenv import load_dotenv
import os

load_dotenv('secrets.env')
platform = os.getenv('PLATFORM')
browser = os.getenv('BROWSER')
run_on = os.getenv("RUN_ON") or 'local'

def set_test_status(page: Page, status: str, remark: str):
    """
    Function to set stats, title and description of test run on cloud grid
    :param page: instance of Playwright browser page
    :param status: status of test e.g Pass or Failed
    :param remark: additional remark about test status
    """
    page.evaluate(
        "_ => {}",
        "lambdatest_action: {\"action\":\"setTestStatus\", \"\": \status\":\"" + status + "\", \"remark\": \"" + remark + "\"}}"
    )  
capabilities = {
    'browserName': browser,
    'browserVersion': 'latest',
    'LT:Options': {
        'platform': platform,
        'build': 'Testing iFrames using Playwright',
        'name': f'Testing iFrames For {platform} & {browser}',
        'user': os.getenv('LT_USERNAME'),
        'accessKey': os.getenv('LT_ACCESS_KEY'),
        'network': True,
        'video': True,
        'visual': True,
        'console': True,
        'tunnel': False,   # Add tunnel configuration if testing locally hosted webpage
        'tunnelName': '',  # Optional
        'geoLocation': '', # country code can be fetched from https://www.lambdatest.com/capabilities-generator/
    }
} 
      

The utilities.py file is used to store reusable functions. The first line is to import the Page class from the playwright.sync_api. The page class provides methods to interact with the single tab within the browser.

The run_on variable determines if the tests run on a cloud grid or locally. It has been defaulted to run tests locally.

For reading the environment variables, you can use the Python library load_dotenv() and supply to it the 'secrets.env' file, which holds all the environment variables.

The set_test_status() function is used to set the final status of the test when running on the cloud grid. It makes use of the evaluate() method of the Page class.

The next reusable bit is the capabilities dictionary, which configures the behavior of the cloud grid such as browser, operating system, name of the build, whether video of test execution will be completed, and screenshots will be captured.

The conftest.py is a special pytest file that contains fixtures that can be globally reused in any pytest file. pytest fixtures can be used to write setup and tear down code necessary to run tests.

We have written two fixtures; the first is named playwright_browser(). It initializes a web browser instance to run locally or establishes a connection to the cloud grid depending on the run_on variable configured in the secrets.env.

The second fixture is named page, and it uses the browser fixture to initialize a web page within the browser to run tests.

By default, the fixture gets the same name as the function's name, but you can give a different name to the fixture in @pytest.fixture(name=<name>).

Here is what the complete conftest.py file looks like.

import pytest
from playwright.sync_api import sync_playwright
from utilities.utilities import capabilities, run_on
import subprocess
import urllib
import json

@pytest.fixture(name="browser")
def playwright_browser():    
    if run_on == 'local':
        with sync_playwright() as playwright:
            browser = playwright.chromium.launch(headless=False)
            yield browser
   
    if run_on == 'cloud':
        with sync_playwright() as playwright:
            playwrightVersion = str(subprocess.getoutput('playwright --version')).strip().split(" ")[1]
            capabilities['LT:Options']['playwrightClientVersion'] = playwrightVersion        
            lt_cdp_url = 'wss://cdp.lambdatest.com/playwright?capabilities=' + urllib.parse.quote(json.dumps(capabilities))
            browser = playwright.chromium.connect(lt_cdp_url)
            yield browser  

@pytest.fixture(name="page")
def page(browser):
    page = browser.new_context().new_page()        
    yield page
    browser.close()

Test Scenario: How to handle nested iFrames in Playwright?

In this scenario, we will check in detail how to handle nested iframes in Playwright.

Implementation

The complete test code is as below.

from playwright.sync_api import expect, Keyboard
from utilities.utilities import set_test_status
import re

def test_nested_iframe_can_be_loaded_correctly(page):
    """
    Test nested iframes can be rendered correctly with the lambdatest blog website.
    Search for blog 'How To Use Playwright For Web Scraping with Python' by author Jaydeep Karale.
    Verify that the blog How To Use Playwright For Web Scraping with Python exists
    Also verify that author profile contains correct link
    """    
    try:
        page.goto('https://codepen.io/jaydeepkarale/pen/dygvXbm')
        base_frame_locator = page.frame_locator("iframe[name=\"CodePen\"]").frame_locator("#frame1")
        base_frame_locator.get_by_placeholder("Enter a url").fill("https://www.lambdatest.com/blog")
        base_frame_locator.get_by_role("button", name="Render iframe").click()
        base_frame_locator.frame_locator('#iframe-window').get_by_placeholder("Search …").fill('How To Use Playwright For Web Scraping with Python')
        page.keyboard.press('Enter')    
        blog_link_locator = base_frame_locator.frame_locator('#iframe-window').get_by_role('link', name='How To Use Playwright For Web Scraping with Python').first
        blog_author_locator = base_frame_locator.frame_locator('#iframe-window').get_by_role('link', name='Jaydeep Karale').first
        expect(blog_link_locator).to_have_attribute('href',re.compile('/blog/playwright-for-web-scraping/'))
        expect(blog_author_locator).to_have_attribute('href','https://www.lambdatest.com/blog/author/jaydkarale/')
        set_test_status(page, 'Passed','Blog exists')
        page.pause()
        page.close()
    except Exception as ex:
        set_test_status(page, 'Failed',str(ex))

Code Walkthrough

Let us now go through the test steps step-by-step.

Step 1

First, navigate to the custom-developed CodePen using the goto() method available as part of the page API.

The CodePen contains two iframes; one iframe renders iframetester.com the second iframe renders the Playwright Python homepage.

Step 2

Next, use the frame_locator() method and supply the id of the frame, in this case, frame1, to form the base locator. All the subsequent elements will be located using this base locator as a reference.

Step 3

In this step, use the base_frame_locator to locate the input field on iframetester using the Playwright locator get_by_placeholder() since the field has a placeholder text 'Enter a url' assigned to it.

Fill in the URL of https://www.lambdatest.com/blog, which will redirect to the blog page of LambdaTest. After filling in the URL, you can use the get_by_role() locator to find the 'Render iframe' button and perform a click() action on it.

The rendered website is shown below.

Step 4

On inspection of the CodePen once more, you can see that the iframe rendered by the iframetester website has an id='iframe-window'. You can leverage this fact to interact with elements within the iframe.

The element you will locate is the 'Search' input field. It has a placeholder text 'Search …' which can be used by the Playwright locator get_by_placeholder(), and in the located element, search for the blog 'How To Use Playwright For Web Scraping with Python'.

The page.keyboard.press('Enter') will simulate pressing enter on the web page.

The search results appear and look like the image shown below.

Step 5

Next, use base_frame_locator to look for the nested <iframe> by id='iframe-window'. Within the nested iframe, use the get_by_role() Playwright locator to look for a link to the blog under test.

Since the link <a href="https://www.lambdatest.com/blog/playwright-for-web-scraping/"> is used twice, one for the title of the blog and once for the image of the blog, consider the first located link using the first attribute and assign it to blog_link_locator variable.

The blog author profile is also represented by a link. You can use the get_by_role() Playwright locator and locate the 'link' with the text 'Jaydeep Karale' and assign it to a variable blog_author_locator.

Step 6

You can use the expect() Playwright assertion to test if the element located by the blog_link_locator has an href attribute '/blog/playwright-for-web-scraping.'

Then, use expect() assertion on the blog_author_locator() to test if the author's profile contains 'jaydkarale', the short name of the author.

The set_test_status() method discussed in the utilities.py is used to communicate the test status to the cloud grid if tests run on cloud infra.

Step 7

page.pause()
page.close()

The pause() method in the page class is helpful when debugging tests and is used to pause the execution at this point.

The close() method is called to close the page context.

This completes the first test scenario where you saw how to handle nested iframes using the Playwright frame and frame_locator methods. Let us look at another test scenario to fill in a 'Book A Demo' form rendered within an <iframe>.

Test Scenario: How to handle Forms within iFrames in Playwright?

Implementation

The complete test code looks as below.

def test_iframe_tester_fill_book_a_demo_form(page):
    """
    Test if iframe renders the lambdatest blog URL correctly.
    Click on Book A Demo and fill the form with company name, firstname, lastname, email and phonenumber    
    """
    try:
        page.goto('https://iframetester.com/')
        page.get_by_placeholder('Enter a url').fill('https://www.lambdatest.com/blog')
        page.keyboard.press('Enter')        
        page.frame_locator('#iframe-window').get_by_role('link', name='Book A Demo', exact=True).click()
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_text("Allow Cookie").click()
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_placeholder("Company Name").fill('Test Company')
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_role("textbox", name="First Name*").fill('Test First Name')
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_role("textbox", name="Last Name*").fill('Test Last Name')
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_role("textbox", name="Work Email*").fill('sample@sample.com')
        page.frame_locator("internal:text=\"<p>Your browser does not support iframes.</p>\"i").get_by_role("textbox", name="Phone Number*").fill('1234567890')
        page.pause()
        set_test_status(page, 'Passed','Form input completed')
        page.close()
    except Exception as ex:        
        set_test_status(page, 'Failed',str(ex))

Code Walk Through

Let us now go through the test cases step-by-step.

Step 1

Load the iframetester website using the page.goto() method. The input field to enter the website is rendered as a placeholder text 'Enter a url'. You can use this with the Playwright locator get_by_placeholder() to locate the input field and enter the URL of the LambdaTest blog website.

Then, simulate an enter key press using the keyboard.press() method to render the website under test.

Step 2

The iframe within the iframetester website has the id='iframe-window', which is used to interact with the website rendered within the iframe.

Within the iframe 'Book A Demo' is a link located using the Playwright locator get_by_role() with link as an attribute and perform click() action on it.

Step 3

The 'Allow Cookie' button is located and clicked, which makes the 'Book Demo' form visible.

Step 4

The form elements are input fields, and you can locate them using the placeholder text by using the get_by_placeholder() locator or get_by_role('textbox'). You can see both of them used to demo each locator.

On the located elements, call the fill() method to populate the values.

Execution

First execute the tests locally by setting the variable RUN_ON=local in the secrets.env file and running the command pytest -v.

Both tests pass successfully.

For the second test, you can also see the 'Book A Demo' form populated with the dummy values you provided in the test case.

To run the tests on a cloud grid, use the cloud grid provided by LambdaTest for Playwright automated testing. For that, amend the secrets.env file to set the RUN_ON=cloud and the LT_USERNAME and LT_ACCESS_KEY, both of which can be obtained from the LambdaTest Profile Page.

Running the tests using pytest -v, you can see the tests running on the LambdaTest Dashboard. The dashboard clearly shows the status of the tests as configured in the set_test_status() function.

Additional configurations made in the capabilities dictionary in utilities.py, such as the build and name of the tests, are displayed.

Additionally, when you open any test, you can see more information such as video of the execution, screenshots, test status, browser, and operating system where the tests are running.

How to set up Playwright with TypeScript?