Browser check quickstart
This guide builds a check that logs into a demo site and confirms the dashboard loads.
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 homepageawait 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 submitawait 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 renderedawait step('Confirm dashboard loaded', async () => { await page.waitForSelector('h1:has-text("Dashboard")', { timeout: 10000 });});A step that throws fails the whole check. Every step captures a screenshot, pass or fail.
2. Create the check
Section titled “2. Create the check”-
Go to Observe → Monitors, open Add monitor and choose Browser check.
-
Configure:
- Name:
Demo login flow. - Frequency: Every 15 minutes.
- Timeout (seconds):
90. - Locations: keep the default, Virginia (
aws-us-east-1). On a paid Synthetic plan you can add more; see locations. - Notification groups: leave the Default group selected.
- Name:
-
Paste the script into the editor.
-
Click Create browser check. The first run kicks off within a minute.
With an API key exported as SITEQWALITY_API_KEY, save the script from step 1 as login.js, then:
curl -X POST https://api.siteqwality.com/browser_check \ -H "Authorization: Bearer $SITEQWALITY_API_KEY" \ -H "Content-Type: application/json" \ -d "$(jq -n --rawfile script login.js '{ name: "Demo login flow", script: $script, frequency: "15m", timeout_seconds: 90, check_regions: ["aws-us-east-1"], min_healthy_regions: 1, rerun_on_failure: true }')"The response includes the new check’s id. The steps below use it as $CHECK_ID.
3. Watch the first run
Section titled “3. Watch the first run”The check page lists its runs under Recent results. Click the latest one to see step results, screenshots, the HAR, the video, and web vitals. Check now starts a run straight away.
# Trigger a manual runcurl -X POST https://api.siteqwality.com/browser_check/$CHECK_ID/run \ -H "Authorization: Bearer $SITEQWALITY_API_KEY"
# Wait ~60 seconds, then list resultscurl https://api.siteqwality.com/browser_check/$CHECK_ID/results \ -H "Authorization: Bearer $SITEQWALITY_API_KEY"
# Get the HAR URL for one result; use artifact_type=video for the videocurl "https://api.siteqwality.com/browser_check/$CHECK_ID/results/$RESULT_ID/artifact_url?artifact_type=har" \ -H "Authorization: Bearer $SITEQWALITY_API_KEY"$RESULT_ID is a result’s id from the list.
4. Iterate
Section titled “4. Iterate”- 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(...)thenawait page.click(...)is more robust thanclick()alone. - Set explicit timeouts on assertions.
waitForSelector(..., { timeout: 10000 })is clearer than relying on the default 30s.
To iterate, edit the script, save, and click Check now.