Using Playwright, page.url() is getting a previous url instead of the current url

Question

I'm testing the navigation on our website using expect(page.url()).toContain('/nav');. When walking through the code I can clearly see that we hit that url string after the click.

I've tried putting my code into and outside of a promise granting the same error:

Expected substring: "/nav"
Received string:    "https://website.com/about"

      283 |     page.waitForNavigation();
      284 |     await page.hover('nav >> text=Nav');
      285 |     await page.click('nav >> text=Nav');
      286 |     console.log(page.url());
    > 287 |     expect(page.url()).toContain('/nav');
          |                        ^
      288 |
      289 |     page.click('text=Next Nav')
      290 |     expect(page.url()).toContain('/nextNav');

The link itself is a simple Nav.

The console log shows https://website.com/about.

Here's a snippet related to the comments:

////##OURSTORY##////
    page.hover('nav >> text=Our Story');
    page.waitForNavigation();
    await page.click('nav >> text=About');
    expect(page.url()).toContain('story');

    //await page.pause();

    await page.hover('nav >> text=Our Story');
    await page.hover('nav >> text=360° Wellness');
    await page.click('nav >> text=360° Wellness'); 
    console.log(page.url());
    await page.waitForNavigation();
    expect(page.url()).toContain('/360-wellness');

user_16372970 · Answer

Okay, so I was a little wary of using page.waitForNavigation() from the start, so I gave it a second thought about needing to use it here. Turns out, we don't really need it. Considering load time variations, I added a waitForSelector() which should allow it 30 seconds (or you could do setTimeout to set a custom wait time).

Also, here's a little something about the waitForNavigation() method -

page.waitForNavigation() returns a promise that resolves only after the navigation has finished. The documentation mentions -

In case of navigation to a different anchor or navigation due to History API usage, the navigation will resolve with null.

Since the site development approach can be ambiguous, its perhaps better to steer clear of using the said function. Especially since it also states -

It is useful for when you run code which will indirectly cause the page to navigate

... which in all honesty, I don't clearly understand the use case for.

Anyway, here is what worked; the full test.spec.ts file -

import { Page } from "playwright-core";

describe("Test Suite for a patient random guy on Stack Overflow", () => {
  it("Test Gen: [URL Text] Testing the correct URL path", async () => {
    let page: Page;
    page = await context.newPage();
    await page.goto("https://ariix.newage.com");
    page.hover("nav >> text=Our Story");
    await page.waitForSelector("nav >> text=About");
    await page.click("nav >> text=About");
    console.log(page.url());
    expect(page.url()).toContain("story");
    //await page.pause();
    await page.hover("nav >> text=Our Story");
    await page.waitForSelector("nav >> text=360° Wellness");
    await page.click("nav >> text=360° Wellness");
    console.log(page.url());
    expect(page.url()).toContain("/360-wellness");
  });
});

And it seems to do/print what you were aiming to -

Hopefully this solves this issue at your end. Let us know :)

Using Playwright, page.url() is getting a previous url instead of the current url

1 Answers