29. Direct HTTP API Automation & Hybrid API-to-UI Testing

Pure API Testing with request Fixture

Playwright exposes request: APIRequestContext directly into tests:

import { test, expect } from "@playwright/test";
test("create user and verify response", async ({ request }) => {
  const response = await request.post("https://api.targetqa.com/users", {
    data: {
      name: "Alex QA",
      email: "alex@targetqa.com",
      role: "SDET",
    },
    headers: {
      Authorization: "Bearer test-api-key",
      "Content-Type": "application/json",
    },
  });
expect(response.status()).toBe(201);
  expect(response.ok()).toBeTruthy();
const body = await response.json();
  expect(body.name).toBe("Alex QA");
  expect(body.id).toBeDefined();
});

---

The Power of Hybrid Testing (API Preconditions -> UI Verification)

Instead of clicking through 15 forms to create a project before testing a comment box: 1. API: Create the project via request.post() in 100ms. 2. UI: Navigate directly to /projects/${id} in the browser! 3. Speedup: Tests run 10x faster and never fail due to setup flakiness.

test("hybrid workflow", async ({ request, page }) => {
  // 1. Create order via API
  const res = await request.post("/api/orders", { data: { item: "Book", qty: 1 } });
  const { orderId } = await res.json();
// 2. Verify in UI
  await page.goto(/orders/${orderId});
  await expect(page.getByRole("heading", { name: Order #${orderId} })).toBeVisible();
});