Skip to content
SiteQwality SiteQwality Docs

Browser check quickstart

By the end of this guide you’ll have a browser check running every 15 minutes that logs into a demo site, navigates to the dashboard, and confirms it loads. You’ll see step results, screenshots, the HAR, and web vitals for every run.

Prerequisites

Section titled “Prerequisites”
  • A paid plan (browser checks aren’t on free tier).

1. Write the script

Section titled “1. Write the script”

The script is plain JavaScript that runs inside an async function with page (Playwright Page) and step (wrapper) injected.

// Open the homepage
await step('Open homepage', async () => {
  await page.goto('https://demo.siteqwality.com', { waitUntil: 'networkidle' });
});


// Click "Sign in"
await step('Open sign-in form', async () => {
  await page.click('text=Sign in');
  await page.waitForSelector('input[name="email"]');
});


// Fill credentials and submit
await step('Submit credentials', async () => {
  await page.fill('input[name="email"]', 'demo@example.com');
  await page.fill('input[name="password"]', 'demo-password-1234');
  await page.click('button[type="submit"]');
});


// Confirm the dashboard rendered
await step('Confirm dashboard loaded', async () => {
  await page.waitForSelector('h1:has-text("Dashboard")', { timeout: 10000 });
});

A step that throws fails the whole check. Steps capture screenshots on both success and failure, so you have a visual trail.

2. Create the check

Section titled “2. Create the check”

  1. Monitors → New → Browser check.

  2. Configure:

    • Name: Demo login flow.
    • Frequency: 15m.
    • Timeout: 90 seconds.
    • Regions: aws-us-east-1.
    • Notification groups: pick one.

  3. Paste the script into the editor. The editor has Playwright autocomplete.

  4. Save. The first run kicks off within a minute.

3. Watch the first run

Section titled “3. Watch the first run”

The check page shows a Recent runs list. Click the latest entry to see step-by-step results, screenshots, the HAR, the video, and web vitals.

4. Iterate

Section titled “4. Iterate”

Browser scripts often need tuning before they’re reliable:

  • Wait for network idle at navigation ({ waitUntil: 'networkidle' }) for SPAs.
  • Use text selectors (text=Sign in) over CSS classes — they survive design refactors.
  • Wait for selectors before interacting — await page.waitForSelector(...) then await page.click(...) is more robust than just click().
  • Set explicit timeouts on assertions — waitForSelector(..., { timeout: 10000 }) is clearer than relying on the default 30s.

The dashboard’s “Run now” button gives a quick iteration loop — edit script, save, click Run, see result.

What’s next

Section titled “What’s next”
Browser check reference Step API, supported assertions, artifact captures.
Status pages Publish browser check status to customers.