使用 Playwright，page.url() 获取以前的 url 而不是当前的 url

Question

我正在使用我们的网站测试导航expect(page.url()).toContain('/nav');。\n当浏览代码时，我可以清楚地看到我们在单击后点击了该 url 字符串。

\n

我尝试将我的代码放入 Promise 中和之外，并给出相同的错误：

\n

Expected substring: "/nav"\nReceived string:    "https://website.com/about"\n\n      283 |     page.waitForNavigation();\n      284 |     await page.hover('nav >> text=Nav');\n      285 |     await page.click('nav >> text=Nav');\n      286 |     console.log(page.url());\n    > 287 |     expect(page.url()).toContain('/nav');\n          |                        ^\n      288 |\n      289 |     page.click('text=Next Nav')\n      290 |     expect(page.url()).toContain('/nextNav');\n

\n

链接本身很简单<a href="/nav" class="list__item__link" data-v-0df6efc8>Nav</a>。

\n

控制台日志显示https://website.com/about。

\n

以下是与评论相关的片段：

\n

////##OURSTORY##////\n    page.hover('nav >> text=Our Story');\n    page.waitForNavigation();\n    await page.click('nav >> text=About');\n    expect(page.url()).toContain('story');\n\n    //await page.pause();\n\n    await page.hover('nav >> text=Our Story');\n    await page.hover('nav >> text=360\xc2\xb0 Wellness');\n    await page.click('nav >> text=360\xc2\xb0 Wellness'); \n    console.log(page.url());\n    await page.waitForNavigation();\n    expect(page.url()).toContain('/360-wellness');\n

\n

Answer 1

好吧，所以我从一开始就对使用有点谨慎page.waitForNavigation()，所以我再次考虑是否需要在这里使用它。事实证明，我们并不真正需要它。考虑到加载时间的变化，我添加了一个waitForSelector()应该允许 30 秒的时间（或者您可以setTimeout设置自定义等待时间）。

\n

另外，这里有一些关于该waitForNavigation()方法的信息 -

\n

page.waitForNavigation()返回一个仅在导航完成后才解决的承诺。文档提到——

\n

\n

如果由于\n History API使用而导航到不同的锚点或导航，则导航将解析为null.

\n

\n

由于站点开发方法可能不明确，因此最好避免使用上述功能。特别是因为它还指出 -

\n

\n

当您运行将间接导致页面导航的代码时，这很有用\n

\n

\n

...老实说，我不太清楚其用例。

\n

不管怎样，这就是有效的方法；完整test.spec.ts文件 -

\n

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

\n

它似乎做了/打印了你想要做的事情 -

\n

\n

希望这能最终解决您的这个问题。让我们知道:)

\n