YouTipPlaywright Frame
This chapter introduces how to handle iframes, popup dialogs, new tabs, and the Playwright event system.
* * *
## iframe Operations
Playwright uses `frameLocator()` to locate and operate elements within iframes.
### page.frameLocator() to locate iframe
## Example
test('Operate elements in iframe', async ({ page })=>{
await page.goto('');
// Locate iframe, then locate elements within it
const iframe = page.frameLocator('#my-iframe');
// Operate elements within iframe
await iframe.getByRole('button',{ name:'submit'}).click();
await iframe.getByLabel('Username').fill('tutorial_user');
// Assertions within iframe
await expect(iframe.getByText('Operation successful')).toBeVisible();
});
### Get all Frames
## Example
// Get all frames in the page (including main frame and iframe)
const frames = page.frames();
console.log('The page has a total of', frames.length,'items frame');
frames.forEach(frame =>{
console.log('Frame:', frame.name(), frame.url());
});
### Nested iframe
Playwright's `frameLocator()` supports chained calls to access deeply nested iframes.
## Example
// Nested iframe: outer → inner → element
const innerButton = page
.frameLocator('#outer-frame')
.frameLocator('#inner-frame')
.getByRole('button',{ name:'Confirm'});
await innerButton.click();
* * *
## Dialog Handling
Playwright has default handling strategies for browser-native popups (alert, confirm, prompt).
### Default Behavior
Playwright automatically closes all dialogs by default:
| Dialog Type | Default Behavior |
| --- | --- |
| `alert()` | Auto confirm (close) |
| `confirm()` | Auto confirm (return true) |
| `prompt()` | Auto confirm (return empty string) |
### Custom Dialog Handling
You can intercept and customize dialog handling through `page.on('dialog')`.
## Example
test('Custom dialog handling', async ({ page })=>{
// Register listener before triggering dialog
page.on('dialog', async dialog =>{
console.log('Dialog type:', dialog.type());
console.log('Dialog message:', dialog.message());
if(dialog.type()==='confirm'){
// Dismiss confirmation dialog
await dialog.dismiss();
}else if(dialog.type()==='prompt'){
// Input custom content
await dialog.accept('TUTORIAL input content');
}else{
// Confirm other types directly
await dialog.accept();
}
});
// Action that triggers dialog
await page.getByRole('button',{ name:'Delete'}).click();
});
### Dialog Object Methods
| Method | Description |
| --- | --- |
| `dialog.accept(promptText?)` | Confirm dialog (can pass input text for prompt) |
| `dialog.dismiss()` | Dismiss dialog |
| `dialog.message()` | Get dialog prompt message |
| `dialog.type()` | Get dialog type: `'alert'` | `'confirm'` | `'prompt'` | `'beforeunload'` |
* * *
## New Windows and New Tabs
When clicking links or buttons to open new tabs, Playwright provides multiple ways to get the new page.
### page.waitForEvent('popup') to wait for popup
## Example
test('Handle new tab', async ({ page })=>{
// Prepare to wait for new page event before clicking
const popupPromise = page.waitForEvent('popup');
// Click link that opens new window
await page.getByRole('link',{ name:'Open in new window'}).click();
// Get the newly opened page
const popup = await popupPromise;
// Operate on new page
await expect(popup).toHaveTitle(/TUTORIAL/);
await popup.getByRole('button',{ name:'OK'}).click();
// Close new page
await popup.close();
});
### context.on('page') to listen for new pages
## Example
test('Listen for all new pages in Context', async ({ context, page })=>{
// Listen for new page creation in entire Context
context.on('page', async newPage =>{
console.log('New page opened:', newPage.url());
// Wait for new page to load
await newPage.waitForLoadState();
// Operate on new page
});
await page.goto('');
// Subsequent operations that open new windows will automatically trigger the listener
});
* * *
## Playwright Event System
Both Page and Context objects in Playwright are event emitters, and you can listen to various events.
### Common Page Events
| Event | Trigger Time |
| --- | --- |
| `request` | When page initiates network request |
| `response` | When network response is received |
| `dialog` | When alert/confirm/prompt dialog appears |
| `download` | When file download starts |
| `popup` | When new page (popup/new tab) opens |
| `console` | When page outputs console message |
| `pageerror` | When page has uncaught JavaScript error |
| `load` | When page finishes loading |
| `close` | When page closes |
### Event Listening Methods
## Example
// Continuous listening
page.on('request', request =>{
console.log('Request:', request.method(), request.url());
});
// Single listening (automatically removed after triggering once)
page.once('dialog', dialog =>{
dialog.accept();
});
// Remove listener
const handler =(request)=>{/* ... */};
page.on('request', handler);
page.off('request', handler);