Wait for requests and call the API

What goes over the network

When you click Add to cart, the page sends a request to the server, and the server answers. Most bugs in a web app are not about what the page shows. They are about what the page sends, or what it receives. A test can look at both.

Wait for a request or a response

page.waitForResponse and page.waitForRequest wait for one message and give it to you. You say which one with a function that returns true for the right message, or with a URL pattern.

const responsePromise = page.waitForResponse(
  (response) => response.url().includes('/api/cart') && response.request().method() === 'POST',
);
await card.getByRole('button', { name: 'Add to cart' }).click();
const response = await responsePromise;

Look at the order. You start the wait first, and you await it after the click. The wait is a promise. If you start it after the click, the response can arrive before you listen, and the test waits for ever.

A response has status(), ok(), json(), and text(). A request has url(), method(), headers(), postData(), and postDataJSON().

Use generic assertions on these values

response.status() and response.json() give plain values, not locators. They do not retry. Use expect(value).toBe(...) for them. It is correct here, because the response does not change after it has arrived.

Call the API without a page

The request fixture sends HTTP requests without a browser. It is fast, and it is the base of API tests, which you will meet in a later course.

test('lists six products', async ({ request }) => {
  const response = await request.get('/api/products');
  expect(response.ok()).toBeTruthy();
  const products = await response.json();
  expect(products).toHaveLength(6);
});

request.post(url, { data }) sends a body as JSON.

Prepare data through the API

Testers use the API to set up a test. To test the cart page, you could open the shop, find the product, and click. It is faster to send one request that puts the product in the cart, and then open the cart page. The page test checks only what it is about, and it does not depend on the steps before.

Your turn

Write four tests. Two of them watch the traffic of the page, and two use the request fixture.