Playwright monitor

Set up fast and reliable end-to-end monitoring for your web apps.

Getting started

Create your first Playwright scenario:

• Navigate to Monitors → Create monitor.
• Select Alert us when: Playwright scenario fails.
• Use the following code:
  

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

test('mobile page contains Sign up', async ({ page }) => {
  await page.setViewportSize({ width: 360, height: 640 }); 
  await page.goto('https://betterstack.com/');
  const pageContent = await page.textContent('body');
  expect(pageContent).toContain('Sign up');
}); 

With this simple test, you can make sure that your customers can sign up from your landing page on mobile. Creating Playwright scenarios for critical user flows is a great way to protect yourself from regressions and unexpected issues.

How to create Playwright scenarios?

We recommend using the Playwright Codegen or ChatGPT:

• Playwright Codegen: Record end-to-end tests using VSCode or Playwright Inspector. Read more in the official Playwright guide.

• ChatGPT: Generate your tests with the help of AI. Go to ChatGPT and start with this query:


Write a Playwright test using test and expect in JavaScript:
- Set viewport to mobile device size
- Open betterstack.com
- Click Sign up button
- ...


Using environment variables

You can use passwords, secrets, and tokens securely in your scenarios by defining them as environment variables:

1. Navigate to Monitors → Select a monitor → Configure → Advanced settings → Environment variables.
2. Add variable names and values as needed.

To access defined variables in your scenario, use expressions like process.env.PASSWORD:

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

test('users can sign in', async ({ page }) => {
  await page.goto('https://app.example.com/');

  await page.getByLabel('E-mail').fill('user@example.com');
  await page.getByLabel('Password').fill(process.env.PASSWORD);
  await page.getByRole('button', { name: 'Sign in' }).click();

  await page.waitForURL('https://app.example.com/dashboard');
});

Adding instant retries of failing test

You can avoid flaky tests using retries in Playwright:

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

// Retries failing tests up to 2 times
test.describe.configure({ retries: 2 });

test('has title', async ({ page }) => {
  await page.goto('https://betterstack.com/')
  await expect(page).toHaveTitle(/Better Stack/)

  // Add some randomness to the results to test retry
  // A single test succeeds only in 50% of cases
  await expect(Math.random() > 0.5).toBeTruthy()
});

Using Playwright to monitor APIs

You can call your API directly using fetch and use custom Javascript to verify the results:

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

test('No expensive coffee in API', async () => {
  const URL = 'https://api.sampleapis.com/coffee/hot';
  const MAX_PRICE = 2.9;

  const response = await fetch(URL, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${process.env.API_TOKEN}`,
      'Content-Type': 'application/json',
    },
  });
  console.debug("API Response:", response);
  expect(response.ok).toBeTruthy();

  const data = await response.json();
  console.debug("API JSON data:", data);

  const expensiveItems = data
    .filter(item => item.price > MAX_PRICE);

  if (expensiveItems.length > 0) {
    console.warn('🚨 Found expensive items:');
    expensiveItems.forEach(item => {
      console.warn(`- ${item.title}: $${item.price}`);
    });

    throw new Error(`Found ${expensiveItems.length} item(s) over $${MAX_PRICE}.`);
  }
});

Using console.log can provide additional info in case an incident is created.

Storing and querying data in Playwright scripts

Playwright monitors are stateless. For persistent storage or to react to previous states, use an HTTP Telemetry source and our SQL API.

Ingest data: Send your Playwright script's output, console logs, or custom event data as JSON events to an HTTP Telemetry source. This allows you to retain any custom data you extract, detailed records of each test run, or performance metrics.

SQL API: Leverage our SQL API to read any data you stored. You can use fetch() with FORMAT JSON to read the data directly in your Playwright monitor, enabling it to react to the previous state.

Alerts: Use the data to create custom alerting based on thresholds or detected anomalies in your Playwright script's performance or output.

Need help?

Please let us know at hello@betterstack.com.
We're happy to help! 🙏