Playwright Synthetic Browser Checks

Overview

Playwright synthetic checks go beyond simple HTTP monitoring by executing real browser interactions against your web application. Using custom Playwright scripts, you can simulate complete user journeys, including navigating pages, filling forms, clicking buttons, and verifying that the correct content appears on screen.

This is the most powerful monitoring type in upti.my. It catches issues that API-level checks miss, such as broken JavaScript, rendering errors, authentication flows that fail silently, and third-party widget failures.

How It Works

Each Playwright check runs your custom JavaScript script in a real Chromium browser instance. The script has full access to the Playwright API, allowing you to:

• Navigate to pages and wait for elements to load
• Fill in forms, click buttons, and interact with UI components
• Assert that specific text, elements, or conditions are present
• Handle authentication flows, including multi-step logins
• Verify that API-driven content renders correctly in the browser
• Test multi-page workflows like checkout or onboarding flows

Built-in Code Editor

upti.my provides a built-in code editor for writing and editing your Playwright scripts directly in the dashboard. The editor includes syntax highlighting, making it easy to write and maintain your monitoring scripts without switching between tools.

Example Script

Here is a simple Playwright script that verifies a login flow works correctly:

const { chromium } = require('playwright');

module.exports = async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  try {
    // Navigate to the login page
    await page.goto('https://app.example.com/login');

    // Fill in credentials
    await page.fill('#email', 'monitor@example.com');
    await page.fill('#password', 'monitoring-password');

    // Click the login button
    await page.click('button[type="submit"]');

    // Wait for the dashboard to load
    await page.waitForSelector('.dashboard-header', {
      timeout: 10000
    });

    // Verify the dashboard loaded correctly
    const title = await page.textContent('.dashboard-header');
    if (!title.includes('Dashboard')) {
      throw new Error('Dashboard did not load correctly');
    }

    console.log('Login check passed successfully');
  } finally {
    await browser.close();
  }
};

Response Data

Each Playwright health check execution captures the following data:

Common Use Cases

• Login Flows - Verify that users can sign in and reach the dashboard
• Checkout Processes - Ensure e-commerce checkout flows work end to end
• Form Submissions - Validate that contact forms, sign-up forms, and surveys submit correctly
• Search Functionality - Test that search returns relevant results
• Third-Party Integrations - Check that embedded widgets, payment forms, and analytics load properly
• Single-Page Applications - Monitor SPAs where content loads dynamically via JavaScript

Advanced Example

Here is a more advanced script that checks a search feature and validates the results:

const { chromium } = require('playwright');

module.exports = async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  try {
    await page.goto('https://shop.example.com');

    // Search for a product
    await page.fill('input[name="search"]', 'wireless headphones');
    await page.press('input[name="search"]', 'Enter');

    // Wait for results
    await page.waitForSelector('.search-results', {
      timeout: 15000
    });

    // Verify results are displayed
    const resultCount = await page.locator('.product-card').count();
    if (resultCount === 0) {
      throw new Error('No search results found');
    }

    console.log('Found ' + resultCount + ' products');
  } finally {
    await browser.close();
  }
};