> ## Documentation Index
> Fetch the complete documentation index at: https://www.checklyhq.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser Checks Overview

> Monitor end-to-end user flows and realistic interactions with automated browser testing using Playwright.

> [!TIP]
>
> **Monitoring as Code**: Learn more about the [Browser Check Construct](https://www.checklyhq.com/docs/constructs/browser-check.md).

![Browser check overview](https://mintcdn.com/checkly-422f444a/x9HkiPSTkrv6lzMg/images/next/browser-check-overview-light.png?fit=max\&auto=format\&n=x9HkiPSTkrv6lzMg\&q=85\&s=c11ad36ab619cdf9830b3e042509072d)

## What are Browser Checks?

Browser checks are automated tests that use real browsers to interact with your web applications. They simulate user journeys like logging in, filling out forms, making purchases, or navigating through complex workflows, ensuring your critical user paths work and perform correctly.

**Browser checks are perfect for detecting downtime and performance issues in:**

* User authentication flows
* E-commerce checkout processes
* Form submissions and user journey validation
* Frontend performance monitoring

> [!NOTE]
>
> Supported Browsers:
>
> * **Chromium**: Default browser, fast and reliable
> * **Chrome**: Google Chrome for production-like testing
> * **Mobile Simulation**: Test responsive designs and mobile workflows

## How Browser Checks Work

Checkly uses Playwright to power your Browser checks. [Playwright](https://playwright.dev/docs/intro) is a robust, open-source framework for browser automation and end-to-end web application testing. It enables you to write idiomatic, reliable tests and easily control interactions within a web page. Browser checks execute automated test scripts in real browsers:

1. **Browser Launch** - Starts a real browser instance (Chromium or Chrome)
2. **Page Navigation** - Navigates to your web application
3. **User Interactions** - Simulates clicks, typing, form fills, and navigation
4. **Assertions** - Validates page content, elements, and user experience
5. **Performance Monitoring** - Captures Core Web Vitals and timing metrics
6. **Results Collection** - Records screenshots, videos, and detailed logs
7. **Alerts** - Triggers alerts if any of the assertions fail

## Check Structure

**Structure in the Checkly UI**

![Browser check dashboard](https://mintcdn.com/checkly-422f444a/rLWDrcTrLPyCqDy4/images/browser-check-settings.png?fit=max\&auto=format\&n=rLWDrcTrLPyCqDy4\&q=85\&s=447ba83b267a220f7dd2aa754c618971)

Create your Playwright test file in the Checkly IDE, then configure the check settings in the Checkly UI.

**Structure in Code**

Browser checks use Playwright's test framework with a familiar structure.

It works by connecting constructs to handle the configuration of your Browser Check, and then referencing the test file in your repository.

```ts browser-check.ts theme={null}
import { BrowserCheck, Frequency } from 'checkly/constructs'
import * as path from 'path'

new BrowserCheck('browser-check-1', {
  name: 'Browser check #1',
  frequency: Frequency.EVERY_10M,
  locations: ['us-east-1', 'eu-west-1'],
  code: {
    entrypoint: path.join(__dirname, 'home.spec.js')
  }
})
```

```typescript home.spec.ts theme={null}
import { test, expect } from '@playwright/test'

test('User login workflow', async ({ page }) => {
  // Navigate to login page
  await page.goto('https://app.example.com/login')
  
  // Fill in credentials
  await page.fill('[data-testid="email"]', 'user@example.com')
  await page.fill('[data-testid="password"]', 'securepassword')
  
  // Submit login form
  await page.click('[data-testid="login-button"]')
  
  // Verify successful login
  await expect(page.locator('[data-testid="dashboard"]')).toBeVisible()
  await expect(page).toHaveURL(/.*dashboard/)
})
```

> [!NOTE]
>
> To learn more about Playwright, see the our [Playwright documentation](https://www.checklyhq.com/docs/learn/playwright/overview.md).

## Browser Check Results

Individual browser check results contain:

* A short check summary, including errors broken down by category

  ![check results browser summary](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-summary.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=21d1caf48c97c7d7bc04f99e547249ca)

* When using Playwright Test Runner you will have an additional section displaying the test steps, error message, and assets (traces, videos, screenshots)

* An error log, only if your script failed

  ![check results browser error log](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-error-log.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=55c8545a6199ff865a9415c90ad18c3d)

* Expandable tabs on page your script navigated to

  ![check results browser page navigation](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-page-navigations.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=ecbe25cf4e38642d71e6488b3c85778f)

  When expanded, each tab shows its own navigation/loading time ribbon and web vitals...

  ![check results browser page navigation top](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-navigation-top.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=69864421e5faaa40d633a0c77fe273cc)

  ...together with browser console logs, network logs and any screenshots that had been taken (including one screenshot taken automatically on failure)

  ![check results browser page navigation bottom](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-navigation-bottom.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=432c5e67bdb613ee81dbf00f84c8b2c8)

* A job log for the check

  ![check results browser job log](https://mintcdn.com/checkly-422f444a/pk96p0t2gChABUbF/images/docs/images/monitoring/check-results-browser-job-log.png?fit=max\&auto=format\&n=pk96p0t2gChABUbF\&q=85\&s=f9710d48d076660b851848cb5309ffa8)

Learn more in our documentation on [Results](https://www.checklyhq.com/docs/concepts/results.md).

## Key Capabilities

> **Real Browser Automation**
>
> Execute scripts in real Chromium browsers to test complex user interactions, JavaScript functionality, and dynamic content.

> **Playwright Native Support**
>
> Write tests using Playwright's powerful API for cross-browser automation with built-in waiting, assertions, and debugging capabilities.

> **Visual Regression Testing**
>
> Capture and compare screenshots to detect unintended visual changes in your application's UI.

> **Performance Metric Collection**
>
> Monitor Core Web Vitals, page load times, and custom performance metrics to ensure optimal user experience.

> **Mobile Device Simulation**
>
> Test responsive designs and mobile-specific functionality by emulating various devices and screen sizes.

> **Global Monitoring Locations**
>
> Run checks from multiple worldwide locations to verify performance and availability across different regions.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.