剧作家似乎没有在跟踪查看器中填写路线

Question

我正在尝试设置一些剧作家测试，以便拦截和欺骗一些基本的身份验证和用户路由。测试看起来像这样：

test('Mocks the user and session calls', async ({ page }) => {
  await page.route('*/**/user', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify(<a_user_object>),
    })
  })

  await page.goto('/homepage')
})

当我在剧作家用户界面模式（即

npx playwright test --ui

）下运行此测试时，它说路线已满，但我没有地方可以看到我填写的虚假数据

单击请求本身，响应和正文选项卡为空：

在 UI 中查看，用户名和信息未呈现，并且记录

user

对象将其显示为未定义。在终端中运行它是相同的 - 如果我断言带有用户名的元素包含预期的用户名等，测试将开始失败。

我在这里做错了什么吗？我尝试拦截和欺骗 API 响应的方法似乎直接取自剧作家文档。 （请注意，我也尝试过做

fullfill({ json: <a_user_object> })

，但结果没有变化。）

我正在使用剧作家1.43.1

Answer 1

我知道为什么会发生这种情况。 Playwright 的行为与 cypress 之类的不同，因为当 playwright 中

test

块内的所有测试命令都完成运行时，playwright 停止执行页面中的代码，并且（我认为）会关闭某种浏览器。所以在下面的情况下：

test("Mocks a simple api call", async ({ page }) => {
  page.route(
    "https://jsonplaceholder.typicode.com/todos/4",
    async (route) =>
      await route.fulfill({
        json: { id: "343", title: "A faked response" },
      })
  );

  await page.goto("http://localhost:3000/");
  // No further command
});

一旦 Playwright 执行

goto

命令，测试就结束，浏览器中的代码停止运行。因此，在此测试中，如果您有一些 UI 呈现“伪造的响应”，剧作家将永远不会实际呈现它，因为它会在实际呈现任何内容之前关闭浏览器。同样，

fullfilled

响应也不会显示在剧作家 UI 中。然而，在这种情况下：

test("Mocks a simple api call", async ({ page }) => {
  page.route(
    "https://jsonplaceholder.typicode.com/todos/4",
    async (route) =>
      await route.fulfill({
        json: { id: "343", title: "A faked response" },
      })
  );

  await page.goto("http://localhost:3000/");
  await expect(page.getByText('A faked response')).toBeInViewport()
});

在这种情况下，我们正在等待屏幕上显示某些内容，因此剧作家不会关闭浏览器，而是等待可测试的文本节点。 UI 测试运行程序等待 UI 可用，因此，等待路线填满（并且剧作家 UI 在其 UI 中显示主体响应）。

我发现的一个技巧（至少对于调试这些场景而言）是

waitForLoadState

函数。 Playwright 将保持浏览器打开并保持运行，直到网络调用全部完成：

test("Mocks a simple api call", async ({ page }) => {
  page.route(
    "https://jsonplaceholder.typicode.com/todos/4",
    async (route) =>
      await route.fulfill({
        json: { id: "343", title: "A faked response" },
      })
  );

  await page.goto("http://localhost:3000/");
  await page.waitForLoadState('networkidle');
});

在上面的测试中，我们不一定断言任何内容，但至少在剧作家 UI 中，我们可以看到路线充满了我们给它的主体，并且测试运行器中的 UI 将显示一旦渲染的内容呼叫已满。在实际测试中，最后一个命令是

waitForLoadState('networkidle')

并不是很有用。但对于调试您的测试，这非常有帮助，并解决了最初的问题。