[Bug]: Playwright Screenshot Issues with <select> Elements
Version
1.56.1
Steps to reproduce
We wrote a very detailed bug report here for your consideration. See the screenshots https://github.com/kisotechnology/playwright-screenshot-issue
Steps to reproduce:
- Clone our repo
https://github.com/kisotechnology/playwright-screenshot-issue -
npm install -
npx playwright install - run the server to serve our html example
python -m http.server 8000 - run the js code to repro on your machine
node scripts/capture-dropdown.js
Expected behavior
The screenshots should look like the following
Actual behavior
The screenshots look different in each system
On the mac we get the following image (note that the dropdown items are missing)
On Ubuntu we get the following image where the options are separated from the drop down
Additional context
Playwright Screenshot Issues with <select> Elements
Playwright version: 1.56.1 (latest)
We use Playwright for our browser automation agent, but we frequently encounter an issue where screenshots captured from <select> elements differ from what is actually rendered in Chromium.
This bug report focuses on macOS, though similar behavior occurs on Ubuntu. On Windows, the page.screenshot() command freezes, preventing us from fully reproducing the issue there.
The discrepancy is most noticeable with dropdown menus. Please refer to the screenshots below for examples.
Observations
On macOS:
- When the page is opened via Playwright, dropdown menus do not render correctly.
- When taking a screenshot, the dropdown items are missing from the captured image.
On Ubuntu:
- When taking a screenshot, the dropdown items do not render correctly
On Windows 11:
The dropdown renders correctly in Chromium when opened via Playwright, but page.screenshot() halts, and the rendering appears corrupted after the freeze (see attached screenshot).
Affected Platforms
This issue occurs on macOS and Ubuntu Linux (other Linux distributions have not been tested) with the screenshot command breaking the browser on Windows 11.
more: https://github.com/kisotechnology/playwright-screenshot-issue?tab=readme-ov-file
Environment
System:
OS: macOS 26.1
CPU: (8) arm64 Apple M1
Memory: 139.20 MB / 8.00 GB
Binaries:
Node: 24.2.0 - /opt/homebrew/bin/node
npm: 11.3.0 - /opt/homebrew/bin/npm
IDEs:
VSCode: 1.105.1 - /opt/homebrew/bin/code
Cursor: 0.43.6 - /usr/local/bin/cursor
Languages:
Bash: 3.2.57 - /bin/bash
npmPackages:
playwright: ^1.41.2 => 1.56.1
I am also seeing this issue
Thanks for reporting this issue, I can reproduce both on macOS and Ubuntu. It looks slightly different for me than your screenshots, but equally broken.
Using channel: "chrome" doesn't change behaviour, so this doesn't come from a problem with our chromium build. I compared with the output of the raw Page.captureScreenshot output, and with the output under Puppeteer, and they all exhibit the same behaviours. So it seems like an upstream Chromium problem. Have you tried filing with them?
@Skn0tt I didn’t try to repro on Puppeteer but would you mind taking a look at the Stagehand code? They don’t have the same problem and somehow have fixed the screen shot to capture both the dropdown menu and the options
https://github.com/browserbase/stagehand/blob/92d32eafe91a4241615cc65501b8461c6074a02b/packages/core/lib/v3/understudy/frame.ts#L162