API Monitoring with Playwright

While supaguard excels at browser-based testing, it is also a powerful tool for API Monitoring. Because we use the full Playwright engine, you can perform fetch requests and API assertions directly within your checks.

Why Monitor APIs?

API monitoring is faster and consumes fewer resources than full browser runs, making it ideal for:

• Backend Health: Ensuring your microservices are responding correctly.
• Data Integrity: Verifying that API payloads contain the expected fields.
• Integration Reliability: Checking third-party dependencies (Stripe, Twilio, etc.).

Basic API Check

You can use the built-in request utility provided by Playwright to perform API calls.

import { test, expect } from '@playwright/test';

test('verify products api', async ({ request }) => {
  const response = await request.get('https://api.your-saas.com/v1/products');
  
  // 1. Assert status code
  expect(response.status()).toBe(200);

  // 2. Assert response body
  const body = await response.json();
  expect(body.products.length).toBeGreaterThan(0);
  expect(body.products[0]).toHaveProperty('id');
});

Advanced API Scenarios

1. Monitoring with Authentication

You can pass headers, including Bearer tokens, to monitor protected endpoints.

test('secure dashboard api', async ({ request }) => {
  const response = await request.get('https://api.your-saas.com/v1/stats', {
    headers: {
      'Authorization': `Bearer ${process.env.API_MONITOR_TOKEN}`,
      'Accept': 'application/json'
    }
  });

  expect(response.ok()).toBeTruthy();
});

2. Validating POST Requests

Test your write-operations (like creating a resource) to ensure your database and API are in sync.

test('create ticket flow', async ({ request }) => {
  const newTicket = await request.post('https://api.your-saas.com/v1/tickets', {
    data: {
      subject: 'Synthetic Test',
      priority: 'high'
    }
  });

  const body = await newTicket.json();
  expect(newTicket.status()).toBe(201);
  expect(body.subject).toBe('Synthetic Test');
});

Hybrid Monitoring: Browser + API

The real power of supaguard is Hybrid Monitoring. You can perform an API call to "seed" data, then use the browser to verify it appears in the UI.

test('seeded project appears in dashboard', async ({ request, page }) => {
  // 1. Create project via API
  await request.post('/api/projects', { data: { name: 'API Project' } });

  // 2. Verify in UI
  await page.goto('/dashboard');
  await expect(page.getByText('API Project')).toBeVisible();
});

Best Practices

• Use Environment Variables: Store API keys in your organization settings, not in the script.
• Check Response Time: Use performance.now() or Playwright's built-in timing to alert if an API is slow.
• Detailed Assertions: Don't just check for 200 OK. Validate that critical data fields exist and are of the correct type.

[!NOTE] API-only checks still count as "Browser Runs" in your billing tier because they utilize the same high-reliability execution environment.

Next Steps

• Learn about Smart Retries
• Configuring Alerts