如何在Playwright中验证表单提交时按钮是否已禁用

我实现了一段功能，在传统Web应用（非单页应用）的表单提交流程启动时禁用表单元素，点击提交按钮后页面会跳转。以下是HTML实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>MVCE</title>
  <script>
    function disableForm(theForm) {
      theForm.querySelectorAll("input, textarea, select").forEach(
        /** @param {HTMLInputElement} element */
        (element) => {
          element.readOnly = true;
        }
      );
      theForm
        .querySelectorAll("input[type='submit'], input[type='button'], button")
        .forEach(
          /** @param {HTMLButtonElement} element */
          (element) => {
            element.disabled = true;
          }
        );
    }

    document.addEventListener('DOMContentLoaded',
      function applyDisableFormOnSubmit(formId) {
        document.querySelectorAll("form").forEach((aForm) => {
          aForm.addEventListener("submit", (event) => {
            event.preventDefault();
            disableForm(aForm);
            aForm.submit();
          });
        });
      });

  </script>
</head>

<body>
  <form class="generated-form" id="x" method="POST" action="https://httpbun.com/mix/s=200/d=3/b64=dGVzdA==">
    <fieldset>
      <legend> Student:: </legend>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br>
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" value="youremail@gmail.com"><br><br>
      <input type="submit" value="Submit">
    </fieldset>
  </form>
</body>

</html>

尝试用Playwright测试该功能时，无法让toBeDisabled断言生效。初始测试代码如下（取消注释断言后无法运行）：

test("disable form", async ({ page }) => {
  await page.goto("http://localhost:8080/");
  const submitButton = page.locator("input[type='submit']");
  await expect(submitButton).toBeEnabled();
  await submitButton.click();
  // await expect(submitButton).toBeDisabled();
  await expect(page)
    .toHaveURL("https://httpbun.com/mix/s=200/d=3/b64=dGVzdA==");
});

我先后尝试了多种写法，均未成功：

1. 使用Promise.all并行操作 #

test("disable form", async ({ page }) => {
  await page.goto("http://localhost:8080/");
  const submitButton = page.locator("input[type='submit']");
  await expect(submitButton).toBeEnabled();
  await Promise.all([
    submitButton.click(),
    expect(submitButton).toBeDisabled()
  ]);
  expect(page).toHaveURL("https://httpbun.com/mix/s=200/d=3/b64=dGVzdA==");
});

2. 结合waitForNavigation并捕获断言失败 #

test("disable form", async ({ page }) => {
  await page.goto("http://localhost:8080/");
  const submitButton = page.locator("input[type='submit']");

  await expect(submitButton).toBeEnabled();
  const nav = page.waitForNavigation({timeout: 5000});
  const disabled = expect(submitButton).toBeDisabled({timeout: 1000});
  await submitButton.click();

  // allow disabled check to pass if the nav happens
  // too fast and the button disabled state doesn't render
  await disabled.catch(() => {});
  await nav;

  expect(page).toHaveURL("https://httpbun.com/mix/s=200/d=3/b64=dGVzdA==");
});

3. 使用route拦截 #

await page.route(
  "https://httpbun.com/mix/s=200/d=3/b64=dGVzdA==",
  async (route, req) => {
    console.log("routing")
    expect(page.url()).toEqual(currentUrl);
    await expect(submitButton).toBeVisible();
    await expect(submitButton).toBeDisabled();
    return route.continue();
  }
);

现寻求有效方法来验证表单提交时按钮是否已禁用。

内容的提问来源于stack exchange，提问作者Archimedes Trajano