主页 / coding / 问题 / 77623647
Accepted
machineghost
Asked: 2023-12-08 07:57:39 +0800 CST

当我不知道哪件事先发生时，我怎么能期待两件事呢？

  • 772

我正在尝试编写一个剧作家测试，该测试在提交表单后执行某些操作。提交表单后，会发生两件事：

  1. “抽屉”关闭
  2. 弹出“通知”

问题是，这两件事的顺序可能会因为随机性而改变。那么我是否这样做：

await expectDrawerToClose();
await expectNotification();

或者：

await expectNotification();
await expectDrawerToClose();

...无论哪种方式，有时都会出错。Playwright 有什么办法可以做到：

await expectTwoThingsToHappenInAnyOrder(
    expectDrawerToClose(),
    expectNotification()
);

我知道我可以将定位器与 链接在一起or，但这不是同一件事：我不想说“我会看到这两件事之一发生”......我想说“我会看到两者都会发生；我只是不关心顺序。”

playwright

1 个回答

  1. Best Answer

    大多数时候没必要。只要该行为没有在页面上执行完整的块（就像 的情况一样alert()，它会阻止渲染）或者如果一个状态可能消失而 Playwright 仍在等待另一个条件，顺序断言就会起作用。

    考虑以下示例：

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

const html = `<!DOCTYPE html>
<html>
<body>
<button>click me</button>
<div class="drawer closed">closed</div>
<script>
const openDrawer = () => {
  const drawer = document.querySelector(".drawer");
  drawer.classList.remove("closed");
  drawer.classList.add("open");
  drawer.textContent = "open";
};

const showNotification = () => {
  const el = document.createElement("div");
  el.textContent = "notification!";
  document.body.append(el);
};

document.querySelector("button")
  .addEventListener("click", e => {
    setTimeout(openDrawer, Math.random() * 2000);
    setTimeout(showNotification, Math.random() * 2000);
  });
</script>
</body>
</html>`;

test("button triggers drawer and notification", async ({page}) => {
  await page.setContent(html);
  await page.getByRole("button", {name: "click me"}).click();
  await expect(page.getByText("notification!")).toBeVisible();
  await expect(page.locator(".open")).toBeVisible();
});

    尽管这两个事件在单击后的 2 秒内以任意顺序发生，但该测试保证通过。断言的顺序并不重要。

    根据您的评论之一，您注意到通知可能会在短时间内被驳回。在这种情况下，顺序很重要。在较长/永久状态之前断言临时状态：

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

const html = `<!DOCTYPE html>
<html>
<body>
<button>click me</button>
<div class="drawer closed">closed</div>
<script>
const openDrawer = () => {
  const drawer = document.querySelector(".drawer");
  drawer.classList.remove("closed");
  drawer.classList.add("open");
  drawer.textContent = "open";
};

const showNotification = () => {
  const el = document.createElement("div");
  el.textContent = "notification!";
  document.body.append(el);
  setTimeout(() => el.remove(), 1000);
};

document.querySelector("button")
  .addEventListener("click", e => {
    setTimeout(openDrawer, Math.random() * 2000);
    setTimeout(showNotification, Math.random() * 2000);
  });
</script>
</body>
</html>`;

test("button triggers drawer and notification", async ({page}) => {
  await page.setContent(html);
  await page.getByRole("button", {name: "click me"}).click();

  // assert temporary state first
  await expect(page.getByText("notification!")).toBeVisible();
  await expect(page.locator(".open")).toBeVisible();
});

    如果两种状态都不确定地消失，并且需要真正同时断言，那么您可以使用Promise.all：

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

const html = `<!DOCTYPE html>
<html>
<body>
<button>click me</button>
<div class="drawer closed">closed</div>
<script>
const openDrawer = () => {
  const drawer = document.querySelector(".drawer");
  drawer.classList.remove("closed");
  drawer.classList.add("open");
  drawer.textContent = "open";
  setTimeout(
    () => {
      el.classList.remove("open");
      el.textContent = "closed";
    },
    Math.random() * 1000 + 500
  );
};

const showNotification = () => {
  const el = document.createElement("div");
  el.textContent = "notification!";
  document.body.append(el);
  setTimeout(
    () => el.remove(),
    Math.random() * 1000 + 500
  );
};

document.querySelector("button")
  .addEventListener("click", e => {
    setTimeout(openDrawer, Math.random() * 2000);
    setTimeout(showNotification, Math.random() * 2000);
  });
</script>
</body>
</html>`;

test("button triggers drawer and notification", async ({page}) => {
  await page.setContent(html);
  await page.getByRole("button", {name: "click me"}).click();
  await Promise.all([
    expect(page.getByText("notification!")).toBeVisible(),
    expect(page.locator(".open")).toBeVisible(),
  ]);
});

    如果您发现您Promise.all()在测试中经常使用该模式，那么要么您拥有一个异常动态且出色的网站，要么您过度使用它（可能是后者）。优先选择正确排序的直线断言，如上面的代码片段 2，除非确实没有其他选择。

    如果您想获取多个状态中的第一个并忽略其余状态，请使用Promise.race代替Promise.all。请参阅这篇文章的示例。明智地使用。

    如果您不使用@playwright/test，则可以删除expects 并使用.waitFor()代替.toBeVisible()。

    • 2

相关问题