> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/microsoft/playwright/llms.txt
> Use this file to discover all available pages before exploring further.

# Frame

> API reference for the Frame class - interact with page frames

Frame represents an iframe on a page. Every page has a main frame and can have multiple child frames.

## Inheritance

Extends: `ChannelOwner`

## Methods

### page

Returns the parent page.

```typescript theme={null}
page(): Page
```

**Returns:** `Page` - Parent page

### name

Returns frame name.

```typescript theme={null}
name(): string
```

**Returns:** `string` - Frame name attribute

### url

Returns frame URL.

```typescript theme={null}
url(): string
```

**Returns:** `string` - Frame URL

### parentFrame

Returns parent frame.

```typescript theme={null}
parentFrame(): Frame | null
```

**Returns:** `Frame | null` - Parent frame or null for main frame

### childFrames

Returns child frames.

```typescript theme={null}
childFrames(): Frame[]
```

**Returns:** `Frame[]` - Array of child frames

### isDetached

Checks if frame is detached.

```typescript theme={null}
isDetached(): boolean
```

**Returns:** `boolean` - True if detached

### frameElement

Returns the frame element handle.

```typescript theme={null}
frameElement(): Promise<ElementHandle>
```

**Returns:** `Promise<ElementHandle>` - Frame element (iframe)

## Navigation Methods

### goto

Navigates to a URL.

```typescript theme={null}
goto(url: string, options?: GotoOptions): Promise<Response | null>
```

<ParamField path="url" type="string" required>
  URL to navigate to
</ParamField>

<ParamField path="options" type="GotoOptions" optional>
  Navigation options

  * `timeout` (number): Maximum time in milliseconds
  * `waitUntil` ('load' | 'domcontentloaded' | 'networkidle' | 'commit'): When to consider navigation succeeded
  * `referer` (string): Referer header
</ParamField>

**Returns:** `Promise<Response | null>` - Response

### waitForNavigation

Waits for navigation.

```typescript theme={null}
waitForNavigation(options?: WaitForNavigationOptions): Promise<Response | null>
```

<ParamField path="options" type="WaitForNavigationOptions" optional>
  Wait options

  * `url` (string | RegExp): URL pattern to wait for
  * `waitUntil` (string): Wait condition
  * `timeout` (number): Maximum time
</ParamField>

**Returns:** `Promise<Response | null>` - Response

### waitForLoadState

Waits for load state.

```typescript theme={null}
waitForLoadState(state?: 'load' | 'domcontentloaded' | 'networkidle', options?: TimeoutOptions): Promise<void>
```

<ParamField path="state" type="string" optional>
  Load state to wait for (default: 'load')
</ParamField>

<ParamField path="options" type="TimeoutOptions" optional>
  Timeout options
</ParamField>

**Returns:** `Promise<void>`

### waitForURL

Waits for URL to match pattern.

```typescript theme={null}
waitForURL(url: string | RegExp, options?: WaitForURLOptions): Promise<void>
```

<ParamField path="url" type="string | RegExp" required>
  URL pattern to wait for
</ParamField>

<ParamField path="options" type="WaitForURLOptions" optional>
  Wait options
</ParamField>

**Returns:** `Promise<void>`

## Selector Methods

### \$

Finds an element.

```typescript theme={null}
$(selector: string, options?: { strict?: boolean }): Promise<ElementHandle | null>
```

<ParamField path="selector" type="string" required>
  Selector to query
</ParamField>

<ParamField path="options" type="object" optional>
  * `strict` (boolean): Throw if multiple elements match
</ParamField>

**Returns:** `Promise<ElementHandle | null>` - Element handle or null

### \$\$

Finds all elements.

```typescript theme={null}
$$(selector: string): Promise<ElementHandle[]>
```

<ParamField path="selector" type="string" required>
  Selector to query
</ParamField>

**Returns:** `Promise<ElementHandle[]>` - Array of element handles

### waitForSelector

Waits for element to appear.

```typescript theme={null}
waitForSelector(selector: string, options?: WaitForSelectorOptions): Promise<ElementHandle | null>
```

<ParamField path="selector" type="string" required>
  Selector to wait for
</ParamField>

<ParamField path="options" type="WaitForSelectorOptions" optional>
  Wait options

  * `state` ('attached' | 'visible' | 'hidden' | 'detached'): Element state to wait for
  * `timeout` (number): Maximum time
  * `strict` (boolean): Throw if multiple elements match
</ParamField>

**Returns:** `Promise<ElementHandle | null>` - Element handle or null

### locator

Creates a locator.

```typescript theme={null}
locator(selector: string, options?: LocatorOptions): Locator
```

<ParamField path="selector" type="string" required>
  Selector to locate
</ParamField>

<ParamField path="options" type="LocatorOptions" optional>
  Locator options
</ParamField>

**Returns:** `Locator` - Locator instance

### getByRole

Creates a locator by ARIA role.

```typescript theme={null}
getByRole(role: string, options?: ByRoleOptions): Locator
```

### getByText

Creates a locator by text.

```typescript theme={null}
getByText(text: string | RegExp, options?: { exact?: boolean }): Locator
```

### getByLabel

Creates a locator by label.

```typescript theme={null}
getByLabel(text: string | RegExp, options?: { exact?: boolean }): Locator
```

### getByPlaceholder

Creates a locator by placeholder.

```typescript theme={null}
getByPlaceholder(text: string | RegExp, options?: { exact?: boolean }): Locator
```

### getByAltText

Creates a locator by alt text.

```typescript theme={null}
getByAltText(text: string | RegExp, options?: { exact?: boolean }): Locator
```

### getByTitle

Creates a locator by title.

```typescript theme={null}
getByTitle(text: string | RegExp, options?: { exact?: boolean }): Locator
```

### getByTestId

Creates a locator by test ID.

```typescript theme={null}
getByTestId(testId: string | RegExp): Locator
```

### frameLocator

Creates a frame locator.

```typescript theme={null}
frameLocator(selector: string): FrameLocator
```

<ParamField path="selector" type="string" required>
  Frame selector
</ParamField>

**Returns:** `FrameLocator` - Frame locator instance

## Action Methods

### click

Clicks an element.

```typescript theme={null}
click(selector: string, options?: ClickOptions): Promise<void>
```

### dblclick

Double clicks an element.

```typescript theme={null}
dblclick(selector: string, options?: DblClickOptions): Promise<void>
```

### fill

Fills an input.

```typescript theme={null}
fill(selector: string, value: string, options?: FillOptions): Promise<void>
```

### type

Types text.

```typescript theme={null}
type(selector: string, text: string, options?: TypeOptions): Promise<void>
```

### press

Presses a key.

```typescript theme={null}
press(selector: string, key: string, options?: PressOptions): Promise<void>
```

### check

Checks a checkbox.

```typescript theme={null}
check(selector: string, options?: CheckOptions): Promise<void>
```

### uncheck

Unchecks a checkbox.

```typescript theme={null}
uncheck(selector: string, options?: CheckOptions): Promise<void>
```

### setChecked

Sets checkbox state.

```typescript theme={null}
setChecked(selector: string, checked: boolean, options?: CheckOptions): Promise<void>
```

### selectOption

Selects options.

```typescript theme={null}
selectOption(selector: string, values: string | string[] | SelectOption | SelectOption[], options?: SelectOptionOptions): Promise<string[]>
```

### hover

Hovers over element.

```typescript theme={null}
hover(selector: string, options?: HoverOptions): Promise<void>
```

### tap

Taps an element.

```typescript theme={null}
tap(selector: string, options?: TapOptions): Promise<void>
```

### dragAndDrop

Drags and drops.

```typescript theme={null}
dragAndDrop(source: string, target: string, options?: DragAndDropOptions): Promise<void>
```

### focus

Focuses an element.

```typescript theme={null}
focus(selector: string, options?: TimeoutOptions): Promise<void>
```

### setInputFiles

Sets input files.

```typescript theme={null}
setInputFiles(selector: string, files: string | string[] | FilePayload | FilePayload[], options?: SetInputFilesOptions): Promise<void>
```

### dispatchEvent

Dispatches a DOM event.

```typescript theme={null}
dispatchEvent(selector: string, type: string, eventInit?: any, options?: TimeoutOptions): Promise<void>
```

## Content Methods

### content

Returns HTML content.

```typescript theme={null}
content(): Promise<string>
```

**Returns:** `Promise<string>` - Full HTML content

### setContent

Sets HTML content.

```typescript theme={null}
setContent(html: string, options?: SetContentOptions): Promise<void>
```

<ParamField path="html" type="string" required>
  HTML content to set
</ParamField>

<ParamField path="options" type="SetContentOptions" optional>
  Set content options
</ParamField>

**Returns:** `Promise<void>`

### title

Returns page title.

```typescript theme={null}
title(): Promise<string>
```

**Returns:** `Promise<string>` - Page title

### textContent

Returns element's text content.

```typescript theme={null}
textContent(selector: string, options?: TimeoutOptions): Promise<string | null>
```

### innerText

Returns element's inner text.

```typescript theme={null}
innerText(selector: string, options?: TimeoutOptions): Promise<string>
```

### innerHTML

Returns element's inner HTML.

```typescript theme={null}
innerHTML(selector: string, options?: TimeoutOptions): Promise<string>
```

### getAttribute

Returns attribute value.

```typescript theme={null}
getAttribute(selector: string, name: string, options?: TimeoutOptions): Promise<string | null>
```

### inputValue

Returns input value.

```typescript theme={null}
inputValue(selector: string, options?: TimeoutOptions): Promise<string>
```

## State Methods

### isVisible

Checks if visible.

```typescript theme={null}
isVisible(selector: string, options?: TimeoutOptions): Promise<boolean>
```

### isHidden

Checks if hidden.

```typescript theme={null}
isHidden(selector: string, options?: TimeoutOptions): Promise<boolean>
```

### isEnabled

Checks if enabled.

```typescript theme={null}
isEnabled(selector: string, options?: TimeoutOptions): Promise<boolean>
```

### isDisabled

Checks if disabled.

```typescript theme={null}
isDisabled(selector: string, options?: TimeoutOptions): Promise<boolean>
```

### isChecked

Checks if checked.

```typescript theme={null}
isChecked(selector: string, options?: TimeoutOptions): Promise<boolean>
```

### isEditable

Checks if editable.

```typescript theme={null}
isEditable(selector: string, options?: TimeoutOptions): Promise<boolean>
```

## Evaluation Methods

### evaluate

Evaluates JavaScript.

```typescript theme={null}
evaluate<R, Arg>(pageFunction: Function | string, arg?: Arg): Promise<R>
```

<ParamField path="pageFunction" type="Function | string" required>
  Function to evaluate
</ParamField>

<ParamField path="arg" type="any" optional>
  Argument to pass
</ParamField>

**Returns:** `Promise<R>` - Evaluation result

### evaluateHandle

Evaluates and returns JSHandle.

```typescript theme={null}
evaluateHandle<R, Arg>(pageFunction: Function | string, arg?: Arg): Promise<JSHandle<R>>
```

### \$eval

Evaluates on an element.

```typescript theme={null}
$eval<R, Arg>(selector: string, pageFunction: Function, arg?: Arg): Promise<R>
```

### \$\$eval

Evaluates on multiple elements.

```typescript theme={null}
$$eval<R, Arg>(selector: string, pageFunction: Function, arg?: Arg): Promise<R>
```

## Script Methods

### addScriptTag

Adds a script tag.

```typescript theme={null}
addScriptTag(options: { url?: string, path?: string, content?: string, type?: string }): Promise<ElementHandle>
```

<ParamField path="options" type="object" required>
  Script options

  * `url` (string): Script URL
  * `path` (string): Path to script file
  * `content` (string): Script content
  * `type` (string): Script type
</ParamField>

**Returns:** `Promise<ElementHandle>` - Script element handle

### addStyleTag

Adds a style tag.

```typescript theme={null}
addStyleTag(options: { url?: string, path?: string, content?: string }): Promise<ElementHandle>
```

<ParamField path="options" type="object" required>
  Style options

  * `url` (string): Stylesheet URL
  * `path` (string): Path to stylesheet file
  * `content` (string): CSS content
</ParamField>

**Returns:** `Promise<ElementHandle>` - Style element handle

## Wait Methods

### waitForTimeout

Waits for timeout.

```typescript theme={null}
waitForTimeout(timeout: number): Promise<void>
```

<ParamField path="timeout" type="number" required>
  Timeout in milliseconds
</ParamField>

**Returns:** `Promise<void>`

### waitForFunction

Waits for function to return truthy value.

```typescript theme={null}
waitForFunction<R, Arg>(pageFunction: Function | string, arg?: Arg, options?: WaitForFunctionOptions): Promise<JSHandle<R>>
```

<ParamField path="pageFunction" type="Function | string" required>
  Function to evaluate
</ParamField>

<ParamField path="arg" type="any" optional>
  Argument to pass
</ParamField>

<ParamField path="options" type="WaitForFunctionOptions" optional>
  Wait options

  * `timeout` (number): Maximum time
  * `polling` (number | 'raf'): Polling interval
</ParamField>

**Returns:** `Promise<JSHandle<R>>` - JS handle

## Usage Examples

### Working with Frames

```typescript theme={null}
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

const mainFrame = page.mainFrame();
console.log('Main frame URL:', mainFrame.url());

const frames = page.frames();
console.log('Total frames:', frames.length);

for (const frame of frames) {
  console.log('Frame:', frame.name(), frame.url());
}

await browser.close();
```

### Interacting with Frame Content

```typescript theme={null}
const frame = page.frame({ name: 'my-iframe' });
if (frame) {
  await frame.fill('#input', 'Hello from iframe');
  await frame.click('button#submit');
  
  const content = await frame.content();
  console.log(content);
}
```

### Frame Locators

```typescript theme={null}
const page = await browser.newPage();
await page.goto('https://example.com');

const frameLocator = page.frameLocator('iframe#my-frame');
const button = frameLocator.getByRole('button', { name: 'Click me' });
await button.click();
```

## Related Classes

* [Page](/api/page) - Parent page
* [Locator](/api/locator) - Element locators
* [ElementHandle](/api/element-handle) - Element handles
* [FrameLocator](/api/frame-locator) - Frame locators