Browser Checks

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

Both of those frameworks allows you to automate the Chromium, Webkit and Firefox browsers using a single, dead simple API.

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'

(async () => {
  const browser = await webkit.launch()
  const context = await browser.newContext()
  const page = await context.newPage()
  await page.goto(process.env.SITE_URL)
  // Assert something
  await browser.close()
})()

Create a browser check

  1. Go to https://app.hyperping.io.
  2. Click New monitor.
  3. In PING PROTOCOL select Browser.
  4. 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.

Runtime

We use a specific Nodejs version with a specific set of widely used libraries such as lodash, moment or axios.

The version of Node we use is v14.18.1.

The full list of packages you can use are:

  • playwright ^1.15.2
  • expect ^27.2.5
  • request ^2.88.2
  • puppeteer ^10.4.0
  • uuid ^8.3.2
  • lodash ^4.17.21
  • axios ^0.23.0
  • moment ^2.29.1
  • mocha ^9.1.3
  • crypto-js ^4.1.1

Scenario examples

Login scenario

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

const browser = await chromium.launch()
const page = await browser.newPage()
await page.goto('https://github.com/login')

await page.type('#login_field', process.env.LOGIN_EMAIL)
await page.type('#password', process.env.LOGIN_PASSWORD)
const navigationPromise = page.waitForNavigation()
await page.click('.js-sign-in-button')
await navigationPromise

const content = await page.textContent('.auth-form-header.p-0 > h1')
expect(content).toBe('Two-factor authentication')

await browser.close()

Assert list length

Let's say you have a search tool in your web app that returns an expected amount of results. You could assert that the length of this list matches what is expected:

const { chromium } = require("playwright")
const expect = require("expect")

const browser = await chromium.launch()
const page = await browser.newPage()

await page.goto("https://news.ycombinator.com")

const length = await page.$$eval('table.itemlist > tbody > tr.athing', (items) => items.length)
expect(length === 30).toBeTruthy()

await browser.close()

Assertion failures

We will catch every node error and report them in your dashboard to understand what causes your script to fail, alongside sending you alerts when it fails and recovers.