Playwright - I am unable to move to the next page

96 Views Asked by At

I am trying to move to the next page. I managed to get it to move to the next page originally, but when copying my code it doesn't move. My code is below:

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("[email protected]");
  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});
});
});

I have console logged when the user clicks continue and I get the following in the console:

[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

What I expect is the URL in the console to change to https://app.pws.int.cruk.org/support-us/payment the second time, but it remains as https://app.pws.int.cruk.org/support-us/details.

How can I fix this?

0

There are 0 best solutions below