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()
});

Need help?

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