Getting Started with Browser Checks as Code

Quick start guide for using Checkly constructs with the CLI

Get started with Checkly constructs by building your first monitoring setup using the CLI.

Prerequisites

• Node.js 18+ installed
• A Checkly account

Use this guide to manually set up your Checkly configuration. Follow the quickstart guide and npm create checkly for an automatic setup.

Installation

Create a new directory and initialize your monitoring project:

Terminal

mkdir my-monitoring-project
cd my-monitoring-project
npm init -y

Install the Checkly CLI.

Terminal

npm install --save-dev checkly

Recommended: Install jiti to use TypeScript for your Checkly monitoring setup.

Terminal

npm i --save-dev jiti

Project Setup

Create a checkly.config file with basic settings:

checkly.config.ts

TypeScript

import { defineConfig } from "checkly"
import { Frequency } from "checkly/constructs"

export default defineConfig({
  projectName: "Website Monitoring",
  logicalId: "website-monitoring-1",
  repoUrl: "https://github.com/you/your-project",
  checks: {
    activated: true,
    muted: false,
    runtimeId: "2025.04",
    frequency: Frequency.EVERY_5M,
    locations: ["us-east-1", "eu-west-1"],
    tags: ["website", "api"],
    checkMatch: "**/*.check.ts",
    browserChecks: {
      frequency: Frequency.EVERY_10M,
      testMatch: "browsers/**/*.spec.ts",
    },
    multiStepChecks: {
      testMatch: "multistep/**/*.spec.ts",
    },
  },
  cli: {
    runLocation: "eu-west-1",
  },
})

Learn more about the general Checkly settings at Project and Configuration.

Your First Checkly CLI Construct

Create a monitoring setup using monitoring as code constructs. First, create the directory structure:

Terminal

mkdir -p src/__checks__

Create src/__checks__/website-monitoring.check.ts:

src/__checks__/website-monitoring.check.ts

import {
  BrowserCheck,
  Frequency
} from 'checkly/constructs'

// Create a browser check running a Playwright Test script
new BrowserCheck("homepage-check", {
  name: "Homepage Test",
  frequency: Frequency.EVERY_5M,
  locations: ["us-east-1", "eu-west-1"],
  code: {
    entrypoint: "./homepage.spec.ts"
  }
})

Create the browser test file src/__checks__/homepage.spec.ts:

src/__checks__/homepage.spec.ts

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

test('Homepage loads successfully', async ({ page }) => {
  // Navigate to your website
  await page.goto('https://your-website.com')

  // Check the page title
  await expect(page).toHaveTitle(/Your Site Name/)

  // Verify main navigation is visible
  const navigation = page.locator('nav')
  await expect(navigation).toBeVisible()

  // Check for key content
  const mainContent = page.getByRole('main')
  await expect(mainContent).toBeVisible()
})

If you’re unfamiliar with Playwright Test, learn more about Microsoft’s end-to-end testing framework in the /learn section.

Testing Your Setup

Test your configuration locally before deployment:

Terminal

npx checkly test

This test command will run your browser check in the Checkly infrastructure. Use this flow to test your monitoring configuration and validate preview environments.

Deployment

Deploy your monitoring to Checkly:

Terminal

npx checkly deploy

The deploy command turns your browser check into a synthetic monitor checking your website every 5 minutes from multiple locations.

Next Steps

• Add API checks to monitor your backend services
• Set up alert channels for notifications
• Organize checks with check groups
• Create dashboards for monitoring visualization

Learn More

• Project configuration - Understand how to configure your monitoring project
• Browser checks - Deep dive into browser monitoring
• Retry strategies - Configure resilient monitoring