What is the difference between page.waitForResponse() and page.waitForRequest() in Playwright?

// Wait for a specific API call to be made
const requestPromise = page.waitForRequest('/api/login');

// Trigger the action
await page.getByRole('button', { name: 'Sign in' }).click();

// Get the request when it fires
const request = await requestPromise;

console.log(request.method());    // 'POST'
console.log(request.url());       // 'https://myapp.com/api/login'
console.log(request.postData());  // '{"email":"user@test.com","password":"..."}'
const body = JSON.parse(request.postData()!);
expect(body.email).toBe('user@test.com');

// Wait for the API response to return
const responsePromise = page.waitForResponse('/api/products');

await page.goto('/products');

// Get the response when it arrives
const response = await responsePromise;

console.log(response.status()); // 200
console.log(response.url());    // 'https://myapp.com/api/products'
const data = await response.json(); // Parse response body
expect(data.length).toBeGreaterThan(0);

// IMPORTANT: Register the wait BEFORE the triggering action

// Correct — wait and action happen concurrently
const [response] = await Promise.all([
  page.waitForResponse('/api/checkout'),
  page.getByRole('button', { name: 'Place Order' }).click(),
]);

console.log(response.status()); // 200
const order = await response.json();
expect(order.orderId).toBeTruthy();

// Exact URL
page.waitForResponse('https://api.example.com/users');

// Glob pattern
page.waitForResponse('**/api/users**');

// Regex
page.waitForResponse(/\/api\/users\/\d+/);

// Custom predicate
page.waitForResponse(response =>
  response.url().includes('/api/') && response.status() === 200
);

// Verify API is called with correct payload
test('checkout sends correct data', async ({ page }) => {
  await page.goto('/cart');

  const [request] = await Promise.all([
    page.waitForRequest(req =>
      req.url().includes('/api/checkout') && req.method() === 'POST'
    ),
    page.getByRole('button', { name: 'Checkout' }).click(),
  ]);

  const body = JSON.parse(request.postData()!);
  expect(body.cartItems).toHaveLength(2);
  expect(body.total).toBeGreaterThan(0);
});

// Verify response data matches UI
test('products API matches displayed count', async ({ page }) => {
  const [response] = await Promise.all([
    page.waitForResponse('**/api/products'),
    page.goto('/products'),
  ]);

  const products = await response.json();
  await expect(page.locator('.product-card')).toHaveCount(products.length);
});