Limiting test scope & handling iframes

These commands can be used to limit the test to specific parts of a page and handle iframes.

List of commands

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

Example(s)

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

See the Pen gjoJoN by shiling (@shiling) on CodePen.

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", "hello@uilicious.com")
  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.