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?