mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
96 lines
11 KiB
Markdown
96 lines
11 KiB
Markdown
|
---
|
||
|
|
sidebar_label: Frame
|
||
|
|
---
|
||
|
|
|
||
|
|
# Frame class
|
||
|
|
|
||
|
|
At every point of time, page exposes its current frame tree via the [page.mainFrame](./puppeteer.page.mainframe.md) and [frame.childFrames](./puppeteer.frame.childframes.md) methods.
|
||
|
|
|
||
|
|
**Signature:**
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
export declare class Frame
|
||
|
|
```
|
||
|
|
|
||
|
|
## Remarks
|
||
|
|
|
||
|
|
`Frame` object lifecycles are controlled by three events that are all dispatched on the page object:
|
||
|
|
|
||
|
|
- [PageEmittedEvents.FrameAttached](./puppeteer.pageemittedevents.md)
|
||
|
|
|
||
|
|
- [PageEmittedEvents.FrameNavigated](./puppeteer.pageemittedevents.md)
|
||
|
|
|
||
|
|
- [PageEmittedEvents.FrameDetached](./puppeteer.pageemittedevents.md)
|
||
|
|
|
||
|
|
The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `Frame` class.
|
||
|
|
|
||
|
|
## Example 1
|
||
|
|
|
||
|
|
An example of dumping frame tree:
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const puppeteer = require('puppeteer');
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await puppeteer.launch();
|
||
|
|
const page = await browser.newPage();
|
||
|
|
await page.goto('https://www.google.com/chrome/browser/canary.html');
|
||
|
|
dumpFrameTree(page.mainFrame(), '');
|
||
|
|
await browser.close();
|
||
|
|
|
||
|
|
function dumpFrameTree(frame, indent) {
|
||
|
|
console.log(indent + frame.url());
|
||
|
|
for (const child of frame.childFrames()) {
|
||
|
|
dumpFrameTree(child, indent + ' ');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
```
|
||
|
|
|
||
|
|
## Example 2
|
||
|
|
|
||
|
|
An example of getting text from an iframe element:
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const frame = page.frames().find(frame => frame.name() === 'myframe');
|
||
|
|
const text = await frame.$eval('.selector', element => element.textContent);
|
||
|
|
console.log(text);
|
||
|
|
```
|
||
|
|
|
||
|
|
## Methods
|
||
|
|
|
||
|
|
| Method | Modifiers | Description |
|
||
|
|
| ------------------------------------------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
|
|
| [$(selector)](./puppeteer.frame._.md) | | This method queries the frame for the given selector. |
|
||
|
|
| [$$(selector)](./puppeteer.frame.__.md) | | This runs <code>document.querySelectorAll</code> in the frame and returns the result. |
|
||
|
|
| [$$eval(selector, pageFunction, args)](./puppeteer.frame.__eval.md) | | |
|
||
|
|
| [$eval(selector, pageFunction, args)](./puppeteer.frame._eval.md) | | |
|
||
|
|
| [$x(expression)](./puppeteer.frame._x.md) | | This method evaluates the given XPath expression and returns the results. |
|
||
|
|
| [addScriptTag(options)](./puppeteer.frame.addscripttag.md) | | Adds a <code><script></code> tag into the page with the desired url or content. |
|
||
|
|
| [addStyleTag(options)](./puppeteer.frame.addstyletag.md) | | Adds a <code><link rel="stylesheet"></code> tag into the page with the desired url or a <code><style type="text/css"></code> tag with the content. |
|
||
|
|
| [childFrames()](./puppeteer.frame.childframes.md) | | |
|
||
|
|
| [click(selector, options)](./puppeteer.frame.click.md) | | This method clicks the first element found that matches <code>selector</code>. |
|
||
|
|
| [content()](./puppeteer.frame.content.md) | | |
|
||
|
|
| [evaluate(pageFunction, args)](./puppeteer.frame.evaluate.md) | | |
|
||
|
|
| [evaluateHandle(pageFunction, args)](./puppeteer.frame.evaluatehandle.md) | | |
|
||
|
|
| [executionContext()](./puppeteer.frame.executioncontext.md) | | |
|
||
|
|
| [focus(selector)](./puppeteer.frame.focus.md) | | This method fetches an element with <code>selector</code> and focuses it. |
|
||
|
|
| [goto(url, options)](./puppeteer.frame.goto.md) | | |
|
||
|
|
| [hover(selector)](./puppeteer.frame.hover.md) | | This method fetches an element with <code>selector</code>, scrolls it into view if needed, and then uses [Page.mouse](./puppeteer.page.mouse.md) to hover over the center of the element. |
|
||
|
|
| [isDetached()](./puppeteer.frame.isdetached.md) | | |
|
||
|
|
| [isOOPFrame()](./puppeteer.frame.isoopframe.md) | | |
|
||
|
|
| [name()](./puppeteer.frame.name.md) | | |
|
||
|
|
| [page()](./puppeteer.frame.page.md) | | |
|
||
|
|
| [parentFrame()](./puppeteer.frame.parentframe.md) | | |
|
||
|
|
| [select(selector, values)](./puppeteer.frame.select.md) | | Triggers a <code>change</code> and <code>input</code> event once all the provided options have been selected. |
|
||
|
|
| [setContent(html, options)](./puppeteer.frame.setcontent.md) | | Set the content of the frame. |
|
||
|
|
| [tap(selector)](./puppeteer.frame.tap.md) | | This method fetches an element with <code>selector</code>, scrolls it into view if needed, and then uses [Page.touchscreen](./puppeteer.page.touchscreen.md) to tap in the center of the element. |
|
||
|
|
| [title()](./puppeteer.frame.title.md) | | |
|
||
|
|
| [type(selector, text, options)](./puppeteer.frame.type.md) | | Sends a <code>keydown</code>, <code>keypress</code>/<code>input</code>, and <code>keyup</code> event for each character in the text. |
|
||
|
|
| [url()](./puppeteer.frame.url.md) | | |
|
||
|
|
| [waitForFunction(pageFunction, options, args)](./puppeteer.frame.waitforfunction.md) | | |
|
||
|
|
| [waitForNavigation(options)](./puppeteer.frame.waitfornavigation.md) | | |
|
||
|
|
| [waitForSelector(selector, options)](./puppeteer.frame.waitforselector.md) | | |
|
||
|
|
| [waitForTimeout(milliseconds)](./puppeteer.frame.waitfortimeout.md) | | Causes your script to wait for the given number of milliseconds. |
|
||
|
|
| [waitForXPath(xpath, options)](./puppeteer.frame.waitforxpath.md) | | |
|