playwright icon indicating copy to clipboard operation
playwright copied to clipboard

[Bug]: Playwright Screenshot Issues with <select> Elements

Open faridani opened this issue 2 months ago • 3 comments

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:

  1. Clone our repo https://github.com/kisotechnology/playwright-screenshot-issue
  2. npm install
  3. npx playwright install
  4. run the server to serve our html example python -m http.server 8000
  5. run the js code to repro on your machine node scripts/capture-dropdown.js

Expected behavior

The screenshots should look like the following

Image

Actual behavior

The screenshots look different in each system

On the mac we get the following image (note that the dropdown items are missing)

Image

On Ubuntu we get the following image where the options are separated from the drop down

Image

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

faridani avatar Nov 12 '25 18:11 faridani

I am also seeing this issue

drewtaylors avatar Nov 12 '25 18:11 drewtaylors

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 avatar Nov 14 '25 14:11 Skn0tt

@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

faridani avatar Nov 15 '25 19:11 faridani