[microsoft/playwright][BUG] webkit 等待元素直到超时

2024-04-09 929 views
7
系统信息
  • 剧作家版本:v1.36.1
  • 操作系统:Docker容器x64/aarch64
  • 浏览器:WebKit
  • 其他信息:
源代码

我们无法创建一个最小的示例。该应用程序是一个 next.js 应用程序,当我们获取组件子集并通过超时替换后端调用时,webkit 测试就通过了。

我可以提供一个存储库,其中包含合适的 Dockerfile、私有的测试环境以及来自 CI 的跟踪。

脚步

  • 在本地运行测试
  • 在 CI=true 的 docker 容器内运行测试

预期的

在 docker 中运行的测试应该产生与本地相同的结果。

实际的

Safari 非常不稳定。当在 playwright docker 容器内运行时,它会无休止地等待明显存在且每条痕迹看起来稳定的按钮。测试在 Chrome 和 Firefox 中运行良好。

桌面版 Safari 似乎比移动版更容易失败。对于桌面版本,生成的视频不会覆盖整个浏览器,这可能是一个提示。

附件是 Desktop Safari 运行之一的输出:

    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

回答

2

当某些东西在本地工作但在 Docker 中不起作用时,可能是由于测试中的竞争条件造成的。尝试在本地运行多次(--repeat-each=100)并查看它是否触发竞争。如果我们没有得到重现步骤,我们就不可能采取行动。

1

--repeat-each=100明天我将尝试在 docker 之外的 Linux 虚拟机上运行测试。即使--repeat-each=100我无法让测试在 MacOS 上失败。然而,我能够让它们在 Docker 内部始终失败(在 Mac 上使用 Docker,在 Linux 上使用 Docker)。

正如我所说,我可以向您发送测试文件,但我想避免将其发布到此处,因为它包含未索引的暂存环境的 URL。

4

只要测试文件不是独立的并且没有减少到最小的重现,它对我就没用......

2

太糟糕了。尽管如此,我还是试图找出问题所在。我继续在 Linux VM 中运行测试headless: false。不知何故,有时,整个 webkit 渲染过程会进入一种奇怪的状态,只渲染白色背景。我看到了一些与视频渲染相关的错误,之前我忽略了这些错误,因为我认为这对于无头运行来说可能是正常的。然后我想也许我们用作背景的视频可能有问题,并route.abort为视频文件添加了一个。这样,我就能够获得 100/100 次成功的运行。在视频请求未被阻止的情况下,在整个测试运行中断之前,我获得了 4 次成功运行和 8 次失败运行(报告中没有结果的测试运行)。

查看旧跟踪,视频文件有一个失败的请求(但对于 HTTP 200 OK,跟踪显示 0 作为顶级状态),然后还有几个请求。相应文件的大小为 4MB。

8

有没有办法与我们共享包含该媒体文件的页面?如果浏览器在该媒体上崩溃,我们应该修复它。

9

我有一个静态导出,其中主要的出站请求现在已修补为 noops。这显示了相同的行为。我可以向您发送可复制案例的存档。 zip 文件大小为 8MB。

1

你能通过 Discord DM 给我吗?

5

〜我手头有一个项目和跟踪。据报道,Docker 中的 WebKit 在某些媒体文件上崩溃了~

0

@valkum 你的页面有一个水合错误。如果您在慢速 3G 模式下打开页面并单击“创建演示”按钮,则不会发生任何情况。

6

(顺便说一句,将您的替换.type.fill- 类型用于测试自动完成等。

4

我们在这里明确使用类型,因为当用户聚焦输入字段时我们隐藏了一些部分。使用fill之间没有任何等待会很活泼。这更符合人性。

如果我们能对水合作用问题做些什么,我会与我们的团队讨论。

3

看起来剧作家方面没有行动项目,所以关闭这个问题。如果您认为存在需要修复的错误,请使用“错误报告”模板提交一个新问题并进行重现,并链接到此问题。