Answer

Debugging API Requests with Playwright

You can debug API requests in your tests using Playwright's request fixture. This handy tool respects your playwright.config.ts file's configuration options like baseURL and extraHTTPHeaders.

Set your baseURL to the API endpoint you're testing. All your test requests will go to this endpoint. Add any required headers like authorization tokens to the extraHTTPHeaders object.

Here's a quick example of how to use the request fixture in a test:

const REPO = 'test-repo-1';
const USER = 'github-username';

test('should create a bug report', async ({ request }) => {
  const newIssue = await request.post(`/repos/${USER}/${REPO}/issues`, {
    data: {
      title: '[Bug] report 1',
      body: 'Bug description',
    },
  });

  expect(newIssue.ok()).toBeTruthy();

  const issues = await request.get(`/repos/${USER}/${REPO}/issues`);
  
  expect(issues.ok()).toBeTruthy();
  
  expect(await issues.json()).toContainEqual(expect.objectContaining({
    title: '[Bug] report 1',
    body: 'Bug description'
  }));
});

In this test, we're creating a bug report on GitHub. We send a POST request to create the bug report, then a GET request to retrieve all issues. We then check if our new bug report is in the list of issues.

The request fixture lets you inspect request details like headers, payload, and response status code. This makes it easier to debug your API requests and troubleshoot any issues.

For more details on API testing with Playwright, check out this post.