Skip to content

[Bug]: When running in new headless mode, grey rectangles sometimes visible in recorded video #36032

Open
@gladykov

Description

@gladykov

Version

1.52.0

Steps to reproduce

  1. Clone https://github.com/gladykov/playwright-grey-rectanle-video
  2. npm install
  3. npx playwright test && npx playwright show-report
  4. Open report and download video

Pay attention that new headless mode is used:

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chromium', },
    },

  ],

Expected behavior

Video should record whole web page

Actual behavior

This one is fun. On some web pages (ex. A. - Atlassian login xyz.atlassian.net ) there will be grey rectangle under the video.

Image

But visiting some pages ( ex. B - Google.pl ) will remove grey rectangle:

Image

and on second visit to A, grey rectangle is not visible anymore:

Image

Full video:

video.12.webm

In recorded video (and in repo with repro) I play with viewportSize to show how it affects grey area, before navigating to B. Without viewport size changes bug also exists.

Additional context

This looks similar to #31242 and #15131

This started to happen when new headless mode was introduced.

Other actions which will clear grey rectangle: successful login to Atlassian Confluence - confirms website is able to reset some browser state, to make it disappear.

Other website which will show rectangle: https://kuba.gladykowski.com/blog/

I tried to enforce html / body height using JS, but it did not change anything.

Let me know if I can assist more. If you feel like this bug does not belong here, let me know and I will be happy to open it against Chromium.

Environment

System:
    OS: Linux 6.14 EndeavourOS
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 5.98 GB / 15.48 GB
    Container: Yes
  Binaries:
    Node: 18.20.8 - ~/.config/nvm/versions/node/v18.20.8/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.2 - ~/.config/nvm/versions/node/v18.20.8/bin/npm
  Languages:
    Bash: 5.2.37 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.52.0 => 1.52.0 

XFCE / X11

I can reproduce this also when we run tests on Ubuntu @latest in Github Actions runners

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions