[Feature]: Add new assertion 'toHaveJSON' for APIResponse's

[cpAdm]

🚀 Feature Request

Add toHaveJSON (and similarly toHaveText) to existing APIResponseAssertion for checking the JSON/text result of an APIResponse

Example

Current:

const response = await page.request.get('example.com/api');
const json = await response.json();
expect(json).toBe(...)

New:

const response = await page.request.get('example.com/api');
await expect(response).toHaveJSON(...)

// Should also work with any other GenericAssertions
expect(response).toHaveJSON(expect.objectContaining({
  list: expect.arrayContaining([2, 3]),
  obj: expect.objectContaining({ prop: expect.stringContaining('Hello') }),
}));

Motivation

With many API tests, we first have to get the JSON from the response manually and then make assertions on it. This can be easily be combined. This potentially also makes for a better error message when the response is not valid JSON.

(would be willing to submit a PR)

[mxschmitt]

While this sounds logical the overhead seems reasonable. The error reporting is indeed one thing where the current version below falls short. The following should already work (without friendly invalid json error message):

const response = await page.request.get('example.com/api');

expect(await response.json()).toEqual(expect.objectContaining({
  list: expect.arrayContaining([2, 3]),
  obj: expect.objectContaining({ prop: expect.stringContaining('Hello') }),
}));

Let's collect upvotes/feedback for it before implementing it.

[Az8th]

Here is an approach that uses Zod to cover this need
Yet, this would be nice to have this as a builtin feature ;)