Browser Checks 2023.04

Browser checks allow you to monitor critical parts of your services, using Node.js' Playwright and @playwright/test APIs to run headless browsers for end-to-end testing.

It allows you to automate the Chromium browser using a single simple API. Use the powerful @playwright/test API to automate tests ran periodically. Typescript support.

Access logs for each run, and replay a record or view traces of failed runs. Each run has a time limit of 2 minutes. Make sure your tests end within this time frame, or it will occur of a timeout.

Create a browser check

Go to https://app.hyperping.io.
Click New monitor.
In PING PROTOCOL select Browser.
Give it a name and start coding!

Your monitor will now show up as a monitor for yourself and others in your dashboard.

Environment variables

You probably use sensitive information in your code base, and it is preferrable to use environment variables. You will find them below the code editor, in your browser check settings.

To access them, reference them in your code using standard Node.js syntax: process.env.ENV_VAR.

Double check / Consecutive failure

When creating a browser check, the Double Check setting is enabled by default. Upon failure, it will retry a second run right away to confirm a failed check.

Runtime 2023.04

This runtime version 2023.04 uses Node 16.x with a specific set of widely used libraries such as lodash, moment or axios.

The version of Node we use is 16x.

The full list of packages you can use are:

playwright ^1.33.0
@playwright/test 1.33
typescript ^5.0.4
expect ^27.5.1
uuid ^9.0.0
lodash 4.17.21
moment ^2.29.4
axios ^1.4.0
btoa 1.2.1
jsonwebtoken ^9.0.0
date-fns ^2.30.0
crypto-js ^4.1.1

Timeouts

Each browser check has a global timeout of 2 minutes for the entire run. By default, individual tests have a 30-second timeout as configured by Playwright. You can extend this per-test timeout using:

Code

test.setTimeout(120_000); // 2 minutes in milliseconds

Metrics Storage

Browser check logs, including those related to outages, are stored indefinitely and can be accessed at any time.

Scenario example

Code

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

test.beforeEach(async ({ page }) => {
  await page.goto('https://app.acme.com/login');
  await page.locator('input[type="text"]').type(process.env.EMAIL);
  await page.locator('input[type="password"]').type(process.env.PASSWORD);
  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
});

test('has title', async ({ page }) => {
  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Acme/);
});

test('is logged in', async ({ page }) => {
  const content = page.locator('#project-id');
  await expect(content).toHaveText('project_12345');
});