[Feature]: Support attachment for particular test step

[sttaran]

🚀 Feature Request

I heavily use playwright for API tests. I highly appreciate and extremely love that we can see all requests made by APIRequestContext in traces.

However sometimes test scenarios require a lot of API calls so having possibility to see request/response payloads right in the test step in html report would make debugging much easier.

Example

I am not really good at designing but that's a simple option how it would look like

Motivation

This feature would make debugging much easier not only for people who write automated tests but also for developers who faced with failed tests and want to reproduce the failure or just to investigate the root cause.

UPD: I provided single use case I want to have the feature to. But I know that some teams do not use APIRequestContext and use some external libraries as http clients. E.g. graphql-codegen for generating api methods on client. In this case it would also help them because they are not going to have network info in traces. However I believe such feature could be helpful not only for logging API calls.

[vitalets]

I raised a similar issue before, there is an interesting point about concurrent steps: https://github.com/microsoft/playwright/issues/29323#issuecomment-1924645277

[bdcarr]

Oh my friend thank you, I wanted to request this too, but my use case is different and I didn't have much hope of a positive response so I didn't bother.

We already used Playwright for UI tests for a long time before we started doing API testing with it, so we've built up quite a library of functions for interacting with our API and they all use a customised instance of Axios. When we started doing API stuff in the same framework, we had a look at the built-in HTTP client but it was missing certain config that we need, so I hacked a slightly dodgy workaround for attaching requests/responses to the test steps. This function gets set as a request & response interceptor on Axios:

private async attachResponseToTest(responseOrError: AxiosResponse | AxiosError) {
  if (process.env.ATTACH_RESPONSES_TO_TEST !== 'true') return;
  const response = axios.isAxiosError(responseOrError) ? responseOrError?.response : responseOrError;

  const { data, config } = response;
  await test.step(`${config?.method?.toUpperCase()} ${config?.url}`, async () => {
    await test.step(`Request: ${config?.data}`, async () => {});
    await test.step(`Response: ${response?.status} ${response?.statusText} ${stringify(data)}`, async () => {});
  });
}

It's not perfect (you have to inspect HTML in the report to see more than the first few dozen chars of the 'step name', and it does eventually truncate) but it's done the job well enough for now:

My additional request

Whatever function you create for attaching request info to test steps, could you expose it publicly so those of us using 3rd party HTTP clients can also use it? Even if I have to massage the request object to make it fit, that would be fantastic.

[Skn0tt]

We've started some work on implementing per-step attachments. If that ends up successful, you'll be able to attach request and response info as attachments, and even format them as HTML to make them read nice.

it was missing certain config that we need

I'm curious, what's that config that you're missing in the builtin API Client? What would we need to build so you can migrate from Axios?

could you expose [the network tracing API] publicly so those of us using 3rd party HTTP clients can also use it?

Could you open that as a separate feature request, so we can track user demand on that?

[bdcarr]

Thanks mate, opened a separate one and answered your Q about the API client config at the bottom: https://github.com/microsoft/playwright/issues/33481