[Feature]: Search params page assertion

[joshuajaco]

🚀 Feature Request

There should be an API to test search params of the page, something like:

await expect(page).toHaveSearchParams({ foo: "bar" });

Example

No response

Motivation

toHaveURL is not sufficient for testing search params for multiple reasons:

• Params need to be URL escaped
• Param order needs to be consistent
• The path needs to be known

[joshuajaco]

As a workaround I currently use:

await expect(() => {
  const url = new URL(page.url());
  expect(url.searchParams.get("foo")).toEqual("bar");
}).toPass();

[Darkensses]

You can also use:

await page.goto('https://github.com/search?q=playwright&type=repositories');
let params = {};
new URL(page.url()).searchParams.forEach(function (val, key) {
  params[key] = val;
});    
expect(params).toMatchObject({q: 'playwright', type: 'repositories'});

In this way, you can search for multiple params.
I'm also working in the code to make a PR but I'm not sure where to put this piece of code. I was digging mainly in matchers.ts (I only declared the new method here), as well as expect.ts and injectedScript.ts but I couldn't figure out how to implement this feature at all, any help would be appreciated 😄

[yuval-herman]

One liner:

expect(Object.fromEntries(new URL(page.url()).searchParams.entries())).toMatchObject({ foo: "bar" });

Wrapped in a function:

function expectSearchParams(page, params) {
	expect(Object.fromEntries(new URL(page.url()).searchParams.entries())).toMatchObject(params);
}

If you just need a solution and came here from google :)

[agg23]

We have provided a nice way to handle this in #34413, which will ship in v1.51.

You can do something of the sort:

await expect(page).toHaveURL(url => url.searchParams.get('foo') === 'bar');

This allows for more complex matching as well.

[Darkensses]

cool, thanks @agg23 this new method is going to be awesome 🔥🥳

[yairEO]

@gg23 - you closed this without any reference to a commit or release, and all I could find in the docs was this: https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-url

await expect(page).toHaveURL(url => {
  const params = url.searchParams;
  return params.has('search') && params.has('options') && params.get('id') === '5';
})

Is the above what you meant when you said "... will ship in v1.51"?