---
schema_version: "1"
id: b486e3a09bb9e721916bb0a67311d6835cd9b1c632f81124be9eaad81d4e330f
title: Elements in Frames
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/utam/guide/frames.md
canonical_url: https://developer.salesforce.com/docs/platform/utam/guide/frames.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 553843eb7cb695eabbfa9c6a68649e5e8ba1ee1a5a8329ac017cfd3fd54de99b
products:
  - UI Test Automation Model
  - lwc
---
# Elements in Frames

Let's write a UI test for a `playground-app` element inside an iframe.

![iframe](https://developer.salesforce.com/docs/media/utam/iframe.png)

## Add a frame element

First, we need to create a root `Home` page object and add a [frame element](/docs/platform/utam/references/utam-grammar/page-object-elements.html#frame-elements):

```json
{
  "root": true,
  "selector": {
    "css": "componentreference-playground"
  },
  "shadow": {
    "elements": [
      {
        "name": "previewFrame",
        "public": true,
        "type": "frame",
        "selector": {
          "css": "[name='preview']"
        }
      }
    ]
  }
}
```

## Enter the frame from a test

Use `enterFrame()` in this JavaScript test to enter the frame.

```js
const home = await utam.load(Home);
const frame = await home.getPreviewFrame();
await utam.enterFrame(frame);
```

## Load the page object inside the frame

The Playground page object for our `playground-app`, which is in the iframe, should be marked as root.

```json
{
  "root": true,
  "selector": {
    "css": "playground-app"
  },
  "methods": [
    {
      "name": "play",
      "compose": []
    }
  ]
}
```

Now, when the JavaScript test enters the frame, we can load the Playground page object from the UTAM loader:

```js
// shortcut to enter frame and load:
// utam.enterFrameAndLoad(frame, Playground);
const playground = await utam.load(Playground);
await playground.play();
```

## Exit frame

When the test is done interacting with the Playground page object inside the frame, call `exitFrame`:

```js
await utam.exitFrame();
```

**note:** If the frame is nested, a test can use `utam.exitParentFrame()` to pass the control to the parent frame of the current frame.