Download & Handling Frames

For each attachment that is downloaded via the page, the page.on(‘download’) event is triggered. All of these attachments are stored in a temporary directory. You can retrieve the download URL, file name, and payload stream by utilizing the Download object from the event.

You have the ability to designate the location for saving downloaded files by utilizing the downloadsPath option within browserType.launch().

Please be advised:
Downloaded files will be removed once the browser context that created them is closed.

The most straightforward method to manage the file download is as follows:

				
					// Start waiting for download before clicking. Note no await.
const downloadPromise = page.waitForEvent('download');
await page.getByText('Download file').click();
const download = await downloadPromise;

// Wait for the download process to complete and save the downloaded file somewhere.
await download.saveAs('/path/to/save/at/' + download.suggestedFilename());

Variations

If you are uncertain about what triggers the download, you can still manage the event:

				
					page.on('download', download => download.path().then(console.log));

Please be aware that managing the event disrupts the control flow, rendering the script more difficult to comprehend. It is possible that your scenario may conclude while you are in the process of downloading a file, as your primary control flow does not wait for this operation to complete.

Frames

A Page may contain one or several Frame objects linked to it. Each page possesses a primary frame, and interactions at the page level (such as clicks) are presumed to function within the primary frame.

A webpage can include supplementary frames using the iframe HTML tag. These frames are accessible for interactions within the frame.

				
					// Locate element inside frame
const username = await page.frameLocator('.frame-class').getByLabel('User Name');
await username.fill('John');

Frame objects

A webpage can include supplementary frames using the iframe HTML tag. These frames are accessible for interactions within the frame.

				
					// Get frame using the frame's name attribute
const frame = page.frame('frame-login');

// Get frame using frame's URL
const frame = page.frame({ url: /.*domain.*/ });

// Interact with the frame
await frame.fill('#username-input', 'John');