playwright: [BUG] webkit waits for elements until timeout

System info

• Playwright Version: v1.36.1
• Operating System: Docker Container x64/aarch64
• Browser: WebKit
• Other info:

Source code

We are not able to create a minimal example. The application is a next.js application and when we take the subset of components and replace backend calls by timeouts, the webkit tests pass.

I can provide a repository which has a fitting Dockerfile, and tests that hit our staging env in private as well as traces from our CI.

Steps

• Run the test locally
• Run the test inside a docker container with CI=true

Expected

The tests ran in docker should yield the same result as locally.

Actual

Safari is very flaky. When run inside the playwright docker container, it is waiting endlessly for buttons that are clearly there and seem stable per traces. The test works fine in Chrome and Firefox.

Desktop Safari seems to fail more often than the mobile version. For the Desktop version, the generated Video does not cover the whole browser, which might be a hint.

Attached is the output from one of the Desktop Safari runs:

    Test timeout of 30000ms exceeded.
Error: locator.click: Target closed
=========================== logs ===========================
waiting for getByRole('button', { name: 'Edit' })
============================================================

   5 |   await page.getByRole("button", { name: "Create a demo" }).click();
   6 |   await expect(page).toHaveURL(/\.[0-9a-z\-_]+/);
>  7 |   await page.getByRole("button", { name: "Edit" }).click();
     |                                                    ^
   8 |   const description = page.getByPlaceholder("Description");
   9 |   await description.click();
  10 |   await description.type("This is only a test!", { delay: 50 });

    at /app/e2e/basic.spec.ts:7:52
Pending operations:
  - locator.click at e2e/basic.spec.ts:7:52


    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

    Test timeout of 30000ms exceeded.
Error: locator.click: Target closed
=========================== logs ===========================
waiting for getByRole('button', { name: 'Edit' })
============================================================

   5 |   await page.getByRole("button", { name: "Create a demo" }).click();
   6 |   await expect(page).toHaveURL(/\.[0-9a-z\-_]+/);
>  7 |   await page.getByRole("button", { name: "Edit" }).click();
     |                                                    ^
   8 |   const description = page.getByPlaceholder("Description");
   9 |   await description.click();
  10 |   await description.type("This is only a test!", { delay: 50 });

    at /app/e2e/basic.spec.ts:7:52
Pending operations:
  - locator.click at e2e/basic.spec.ts:7:52


    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────

    Test timeout of 30000ms exceeded.
Error: locator.click: Target closed
=========================== logs ===========================
waiting for getByRole('button', { name: 'Edit' })
============================================================

   5 |   await page.getByRole("button", { name: "Create a demo" }).click();
   6 |   await expect(page).toHaveURL(/\.[0-9a-z\-_]+/);
>  7 |   await page.getByRole("button", { name: "Edit" }).click();
     |                                                    ^
   8 |   const description = page.getByPlaceholder("Description");
   9 |   await description.click();
  10 |   await description.type("This is only a test!", { delay: 50 });

    at /app/e2e/basic.spec.ts:7:52
Pending operations:
  - locator.click at e2e/basic.spec.ts:7:52