playwright: [BUG] Black Screen in video and trace on mobile

Any updates on this?

We also came across this problem recently with v1.32.1 using the provided docker image. After some experimentation we found that by setting isMobile: false for a given webkit device we would no longer experience the issue. To put it another way this project in config would reproduce the blank screen in HTML report/trace:

projects: [
    {
      name: 'Mobile Safari',
      use: {
        userAgent: devices['iPhone 13 Pro'].userAgent,
        viewport: devices['iPhone 13 Pro'].viewport,
        deviceScaleFactor: devices['iPhone 13 Pro'].deviceScaleFactor,
        isMobile: devices['iPhone 13 Pro'].isMobile,
        hasTouch: devices['iPhone 13 Pro'].hasTouch,
        defaultBrowserType: devices['iPhone 13 Pro'].defaultBrowserType,
      },
    },
  ]

And this modification would resolve the issue:

projects: [
    {
      name: 'Mobile Safari',
      use: {
        userAgent: devices['iPhone 13 Pro'].userAgent,
        viewport: devices['iPhone 13 Pro'].viewport,
        deviceScaleFactor: devices['iPhone 13 Pro'].deviceScaleFactor,
        isMobile: false,
        hasTouch: devices['iPhone 13 Pro'].hasTouch,
        defaultBrowserType: devices['iPhone 13 Pro'].defaultBrowserType,
      },
    },
  ]

Hopefully this info is of some use in helping to track down the issue and as a temporary workaround for folks encountering the issue.

Same issue.

I get the same problem on Macbook M1, running following:

docker run --rm --network host --platform=linux/aarch64 -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.31.0-focal /bin/bash
npm install
npx playwright test --update-snapshots

My playwright.config.ts (basically the one from the docs) with only one project left (the problem one):

import { defineConfig, devices } from "@playwright/test";

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: "./tests",
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 5000,
  },
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: "html",
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: "http://localhost:3000/",

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"] },
    },
  ],
});

My test:

import { test, expect } from "@playwright/test";

test.describe("Main page", () => {
  test("looks as expected", async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState("networkidle");
    await expect(page).toHaveScreenshot({ fullPage: true });
  });
});

As a result I get completely transaparent page as a screenshot. Adding isMobile: false to the project helps, but it shouldn’t be like that, should it?

I’m having a very similar issue when running mobile safari tests in the CI (linux distro). I can’t recreate the issue locally when running on macOs 11.4. The issue seems to crop up when toasts or popovers are involved. I can share a couple of traces with videos included but prefer not to post it publicly on here.

Playwright gets into a loop doing the following, but the video shows that the app seems to have a gone out of the bounds recording box. (very similar to what dz1dz1on has posted above)

waiting for selector "div[role="menu"] >> div[role="button"]:has-text("Delete")"
selector resolved to visible <div tabindex="0" role="button" class=" css-17j40lu" …>…</div>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
element is outside of the viewport
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
element is outside of the viewport
retrying click action, attempt #2
waiting 20ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling

Playwright 1.27.1

I’m facing the same issue here. Usually the page gets black when scrolling down to take a locator screenshot, for exemple, when it’s below the current/initial viewport. But sometimes it works, so it is intermittent. Looks like it happens more often when running multiple tests with more workers (I usually use 4 or 5 workers).

I’m using:

• Webkit emulating iPhone 11
• Playwright 1.19.2
• Only happens when running inside docker (locally or Jenkins), using image: mcr.microsoft.com/playwright:v1.19.0-focal (when running locally in my Mac outside the docker container it goes fine)