Início / coding / Perguntas / 77623647
Accepted
machineghost
Asked: 2023-12-08 07:57:39 +0800 CST

Como posso esperar duas coisas quando não sei o que acontecerá primeiro?

  • 772

Estou tentando escrever um teste de dramaturgo que faça algo após o envio de um formulário. Depois que o formulário é enviado, duas coisas acontecem:

  1. uma "gaveta" fecha
  2. uma "notificação" aparece

O problema é que a ordem dessas duas coisas pode mudar, apenas devido à aleatoriedade. Então, se eu fizer:

await expectDrawerToClose();
await expectNotification();

ou:

await expectNotification();
await expectDrawerToClose();

... de qualquer forma, às vezes será errado. Existe alguma maneira no Playwright de fazer de alguma forma:

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

Eu sei que posso encadear localizadores com or, mas isso não é a mesma coisa: não quero dizer "Vou ver uma dessas duas coisas acontecer" ... quero dizer "Vou ver ambos acontecem; eu simplesmente não me importo com a ordem."

playwright

1 respostas

  1. Best Answer

    Não há necessidade, na maioria das vezes. As asserções sequenciais simplesmente funcionam, desde que o comportamento não esteja executando um bloqueio completo na página (como seria o caso de um alert(), que impede a renderização) ou se um estado desaparecer enquanto o Playwright ainda estiver aguardando a outra condição.

    Considere o seguinte exemplo:

    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();
});

    Embora os dois eventos aconteçam em ordem arbitrária nos 2 segundos seguintes ao clique, é garantido que este teste será aprovado. A ordem das afirmações não importa.

    Com base em um de seus comentários , você observa que a notificação pode ser descartada após um curto período. Nesse caso, a ordem é importante. Afirme o estado temporário antes do estado mais longo/permanente:

    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();
});

    Se ambos os estados desaparecerem de forma não determinística e precisarem ser afirmados de forma verdadeiramente simultânea, você poderá usar 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(),
  ]);
});

    Se você descobrir que está usando o Promise.all()padrão com frequência em seus testes, então ou você tem um site extraordinariamente dinâmico e notável ou está usando-o demais (provavelmente o último). Prefira afirmações lineares ordenadas corretamente, como o trecho 2 acima, a menos que realmente não haja outra opção.

    Se você quiser pegar o primeiro de vários estados e ignorar o resto, use Promise.raceem vez de Promise.all. Veja esta postagem para ver um exemplo. Use criteriosamente.

    se não estiver usando @playwright/test, você pode remover expects e usar .waitFor()em vez de .toBeVisible().

    • 2

relate perguntas