iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Handle the JavaScript dialog before taking a Playwright page screenshot. Register a dialog handler before the action that triggers the alert, read its message if needed, and accept or dismiss it. A page screenshot captures the page; the reviewed Playwright documentation does not say that it captures the browser-native alert while it is open.
Handle the alert before taking the screenshot
Playwright exposes JavaScript alert, confirm, prompt, and beforeunload dialogs through the dialog event. A dialog can block page interaction. If you install a listener, that listener must accept or dismiss the dialog; simply logging it may leave the triggering action stalled. Without a page- or context-level listener, Playwright automatically dismisses dialogs. See the Playwright dialogs guide.
For an alert triggered by a specific control, install a one-time page listener before clicking it. This example captures the message, accepts the alert, adds the text to the page, and then saves a full-page screenshot:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesconst alertMessage = new Promise(resolve => {
page.once('dialog', async dialog => {
resolve(dialog.message());
await dialog.accept();
});
});
await page.getByRole('button', { name: 'Show alert' }).click();
const message = await alertMessage;
// Render the message into the page if it must appear in the image.
await page.evaluate(text => {
const note = document.createElement('pre');
note.id = 'captured-alert';
note.textContent = `Alert: ${text}`;
document.body.append(note);
}, message);
await page.screenshot({ path: 'page-with-alert-message.png', fullPage: true });The example uses Playwright’s documented dialog and screenshot APIs; it is an implementation pattern, not a tested result. The Page API documents page.screenshot() and fullPage: true, which captures the full scrollable page rather than only the viewport.
#1 Best Overall
Choose what the screenshot needs to show
Capture the underlying page
Accept or dismiss the alert, then take the screenshot. Choose the response that matches the behavior your test is meant to exercise: accepting or dismissing can change what the application does next.
Include the alert message as evidence
Read dialog.message() in the handler and render that text into page content or another test artifact before capturing. The reviewed documentation does not establish that Playwright’s page screenshot includes native browser alert chrome, so do not rely on the open alert appearing in the image.
Use a context-level handler for a shared policy
If the same dialog policy should apply across pages in a browser context, register browserContext.on('dialog'). Keep the handler active for the pages that need it and settle each dialog:
context.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept();
});A page-level listener is more appropriate when handling belongs to one page or test step. The BrowserContext API documents the context dialog event.
Screenshot options and debugging
Options such as output path, full-page capture, masking, clipping, scale, and output type can tailor the page image, but they do not replace dialog handling. See the Page API for screenshot options.
For a debugging timeline, Playwright tracing can provide recorded screenshots and action snapshots in the trace viewer. See the Trace viewer documentation. A trace is useful for inspecting actions; it should not be treated as proof that a native alert appears in a page screenshot.
Troubleshoot stalled actions or missing alert text
- The click or another action appears stuck: check whether it opened a dialog and whether an installed listener actually calls
accept()ordismiss(). Register the listener before the triggering action. - The alert message is missing from the image: capture
dialog.message()in the handler and render it into the page before callingpage.screenshot(). - The page continues along the wrong path: verify whether the test should accept or dismiss the dialog; that choice can affect subsequent page behavior.
- The screenshot contains only the visible viewport: set
fullPage: truewhen the full scrollable page is required.
Or skip the browser setup
ScreenshotNeo offers a one-request screenshot API. Its clean-shot flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with the outcome indicated by X-Page-Verdict and X-Billed response headers. It also provides an MCP server for AI agents, with take_screenshot, get_page_info, and capture_pdf tools. ScreenshotNeo is for website captures; use Playwright’s dialog handling when your task specifically requires controlling a JavaScript alert.
For setup details and request options, see the ScreenshotNeo documentation. This cURL request saves a WebP capture of the target URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo and get 1,000 free screenshots a month with no card. Learn more at ScreenshotNeo.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
