Playwright页面跳转异常：点击Continue无法进入payment页面

我用Playwright实现捐赠流程的页面跳转，原本能正常跳转，但复制代码后第二次点击Continue按钮后，页面停留在https://app.pws.int.cruk.org/support-us/details，无法跳转到payment页面。测试代码如下：

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

test("User can make a donation", async ({page}) => {
  test.setTimeout(30_000);
  const url = "https://app.pws.int.cruk.org/support-us/your-donation";
  await page.goto(url, {waitUntil: "domcontentloaded"});

  const acceptCookieBtn = page.getByText("OK, continue to site");
  const amountBtn = page.locator("#amount10");
  const donationType = page.getByText("I am donating my own money");
  const selectMotivation = page.getByTestId("selectMotivation");
  const destination = page.getByText(
    "Choose a cancer type or an area of research"
  );
  const selectCancer = page.getByTestId("restrictionSelect");
  const submitBtn = page.getByText("Continue", {exact: true});

  await expect(page).toHaveTitle("Support us | Cancer Research UK");
  await acceptCookieBtn.click({timeout: 5000}).catch(() => {});
  await amountBtn.click();
  await donationType.click({force: true});
  await selectMotivation.selectOption("In memory of someone");
  await destination.click({force: true});
  await selectCancer.selectOption("Bowel cancer");

  // Move on to the next page:
  await submitBtn.click();
  await page.waitForLoadState("networkidle");  

  await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/details");

  const selectTitle = page.getByTestId("title");
  const firstName = page.getByTestId("forename");
  const lastName = page.getByTestId("surname");
  const email = page.getByTestId("emailAddress");
  const phone = page.getByTestId("phoneNumber");
  const postcode = page.locator("#postalCode");
  const findAddress = page.getByText("Find address", {exact: true});
  const selectAddress = page.locator("#addressSelection");
  const submitBtn2 = page.getByText("Continue", {exact: true});

  await selectTitle.selectOption("Mr");
  await firstName.fill("Tester");
  await lastName.fill("O'Doh-erty");
  await email.fill("auto-pws@cancer.org.uk");
  await phone.fill("07999999999");
  await postcode.fill("GU22 7SS");
  await findAddress.click({force: true});
  await selectAddress.selectOption("37 The Rowans, Woking, GU22 7SS");
  page.waitForTimeout(10000)
  
  // Move on to the next page:
  await submitBtn2.click({force: true});
  await page.waitForLoadState("domcontentloaded");
  console.log(page.url());  


  await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/payment");
  

  const card = page.getByText("Credit / Debit");

  await card.click({force: true});

  await page.screenshot({path: "verify.png", fullPage: true});
});
});

点击后控制台输出显示URL未跳转到预期页面：

[chromium] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/your-donation?
[webkit] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/your-donation?
[chromium] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/details
[webkit] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/details
[chromium] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/details
https://app.pws.int.cruk.org/support-us/details
[firefox] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/your-donation?
[webkit] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/details
https://app.pws.int.cruk.org/support-us/details
[firefox] › donation.spec.ts:3:5 › User can make a donation
https://app.pws.int.cruk.org/support-us/details
https://app.pws.int.cruk.org/support-us/details
https://app.pws.int.cruk.org/support-us/details

1. 修复语法错误 #

代码末尾多了一个额外的});，这会导致脚本执行异常，直接删除该多余的闭合语句。

2. 等待异步操作完成 #

page.waitForTimeout(10000)是异步方法，必须添加await关键字，否则代码会跳过等待直接执行后续的点击操作，此时地址选择可能还未完成：

await page.waitForTimeout(10000);

更推荐用等待元素状态替代固定超时，避免不必要的等待，同时确保元素加载完成：

await selectAddress.waitFor({state: "visible"});
await selectAddress.selectOption("37 The Rowans, Woking, GU22 7SS");

3. 优化页面跳转等待逻辑 #

点击submitBtn2后，仅等待domcontentloaded可能不足以确保页面完成跳转，建议：

• 直接等待目标URL出现，替代page.waitForLoadState：

  await submitBtn2.click({force: true});
  await page.waitForURL("https://app.pws.int.cruk.org/support-us/payment");
  

• 或者等待目标页面的特征元素加载完成，比如支付页面的信用卡选项：

  await submitBtn2.click({force: true});
  const cardOption = page.getByText("Credit / Debit");
  await cardOption.waitFor({state: "visible"});
  

4. 检查表单验证状态 #

页面未跳转可能是表单存在未通过的验证（比如隐藏字段未填写、格式错误），可以添加截图查看点击后的页面状态：

await submitBtn2.click({force: true});
await page.screenshot({path: "after-submit.png", fullPage: true}); // 查看是否有错误提示

修复后的完整代码示例 #

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

test("User can make a donation", async ({page}) => {
  test.setTimeout(30_000);
  const url = "https://app.pws.int.cruk.org/support-us/your-donation";
  await page.goto(url, {waitUntil: "domcontentloaded"});

  const acceptCookieBtn = page.getByText("OK, continue to site");
  const amountBtn = page.locator("#amount10");
  const donationType = page.getByText("I am donating my own money");
  const selectMotivation = page.getByTestId("selectMotivation");
  const destination = page.getByText(
    "Choose a cancer type or an area of research"
  );
  const selectCancer = page.getByTestId("restrictionSelect");
  const submitBtn = page.getByText("Continue", {exact: true});

  await expect(page).toHaveTitle("Support us | Cancer Research UK");
  await acceptCookieBtn.click({timeout: 5000}).catch(() => {});
  await amountBtn.click();
  await donationType.click({force: true});
  await selectMotivation.selectOption("In memory of someone");
  await destination.click({force: true});
  await selectCancer.selectOption("Bowel cancer");

  // Move on to the next page:
  await submitBtn.click();
  await page.waitForLoadState("networkidle");  
  await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/details");

  const selectTitle = page.getByTestId("title");
  const firstName = page.getByTestId("forename");
  const lastName = page.getByTestId("surname");
  const email = page.getByTestId("emailAddress");
  const phone = page.getByTestId("phoneNumber");
  const postcode = page.locator("#postalCode");
  const findAddress = page.getByText("Find address", {exact: true});
  const selectAddress = page.locator("#addressSelection");
  const submitBtn2 = page.getByText("Continue", {exact: true});

  await selectTitle.selectOption("Mr");
  await firstName.fill("Tester");
  await lastName.fill("O'Doh-erty");
  await email.fill("auto-pws@cancer.org.uk");
  await phone.fill("07999999999");
  await postcode.fill("GU22 7SS");
  await findAddress.click({force: true});
  await selectAddress.waitFor({state: "visible"});
  await selectAddress.selectOption("37 The Rowans, Woking, GU22 7SS");
  
  // Move on to the next page:
  await submitBtn2.click({force: true});
  await page.waitForURL("https://app.pws.int.cruk.org/support-us/payment");
  console.log(page.url());  

  await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/payment");

  const card = page.getByText("Credit / Debit");
  await card.click({force: true});

  await page.screenshot({path: "verify.png", fullPage: true});
});

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