Handling iFrames

UI.context

Limit the test to specific parts of a page.

Can be used to explicitly switch to the context of an iframe. 👉 Jump to "Handling Iframes".

Usage

UI.context(context, test)

Parameters

Parameter	Type	Remarks
context	string	Limit the test to specific parts of a page. Specify a CSS selector or XPATH to specify the element to limit the test to. If the CSS selector or XPATH matches multiple elements, the scope of the test will be set to all matches.
test	function	Test to run using the context

Example(s)

Take this page for example, it has two identical forms to login and create account.

To limit the test to the login form, we can set the context using a CSS selector on the ID of the login form like this:

I.see("Please log in ") // this runs on the entire page
UI.context("#login-form", function(){ // the following commands runs on the login form on
  I.fill("username", "[email protected]")
  I.fill("password", "password")
  I.click("login")
})

Handling IFrames

The contents of <iframe> can sometimes be inaccessible to the test engine, depending on how the <iframe> element is composed and the security policies of the browser, the iframe, and the parent page - so commands can fail unexpectedly if the target elements are within an <iframe> element. To interact with elements in an <iframe>, you need to explicitly select the iframe as the context using UI.context.

UI.context("#secure-payment-iframe", ()=>{ 
  I.fill("Credit card", "4242 4242 4242 4242")
  I.fill("Expiry", "02/25")
  I.fill("CVC", "492")
})

This will run the commands to fill the credit card information in the iframe with the id secure-payment-iframe. The selector must match the iframe element and only one iframe exactly.

Test Scripting Tutorial for handling iFrames

How to test iFrames

This tutorial shows you how to handle iFrames in website(s) using the UI.context command.