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

# Creating A Browser Check

> Get started with Checkly by creating your first Browser Check

<Tip>
  Learn more about all the [Browser Check capabilities](/detect/synthetic-monitoring/browser-checks/overview) in the general overview.
</Tip>

This guide will walk you through creating your first Browser Check with Checkly.

Browser Checks are perfect for monitoring realistic user flows within your application or services. If you are looking for monitoring general availability, check out the [Uptime Monitor Quickstart](/detect/uptime-monitoring/url-monitors/quickstart).

<Accordion title="Prerequisites">
  * A Checkly account (sign up at [checklyhq.com](https://checklyhq.com))
  * The URL of a website you want to monitor
</Accordion>

<Steps>
  <Step title="Create a Browser Check">
    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/SdrQKfCB6NPoo3Ex/images/next/quickstart-welcome-light.png?fit=max&auto=format&n=SdrQKfCB6NPoo3Ex&q=85&s=8d605f10aff58de518896eb60261e65c" alt="Light mode interface" width="1928" height="1392" data-path="images/next/quickstart-welcome-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/SdrQKfCB6NPoo3Ex/images/next/quickstart-welcome-dark.png?fit=max&auto=format&n=SdrQKfCB6NPoo3Ex&q=85&s=9b01bb7aebe3ca8c4796f40decb895e2" alt="Dark mode interface" width="1920" height="1398" data-path="images/next/quickstart-welcome-dark.png" />
    </Frame>

    1. **Head to [Create a Check](https://app.checklyhq.com/accounts/create)**
    2. **Choose from one of the Browser Check templates** to start from a working example
  </Step>

  <Step title="Edit Your Test Script">
    The following test script will check if the homepage is available, performing correctly, and [looks visually correct](/detect/synthetic-monitoring/browser-checks/visual-regressions).

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-test-light.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=6a60d9f9d13cf2d2ec08e2718a219603" alt="Light mode interface" width="1924" height="1402" data-path="images/next/quickstart-test-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-test-dark.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=ed5bdedce4399e8cf3cf156882774ae7" alt="Dark mode interface" width="1928" height="1392" data-path="images/next/quickstart-test-dark.png" />
    </Frame>
  </Step>

  <Step title="Configure Check Settings">
    Configure your check settings by clicking the "Settings" button in the top right corner of the check editor

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-settings-light.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=e175612d2964b9cd19d5a0bde564853c" alt="Light mode interface" width="2360" height="1268" data-path="images/next/quickstart-settings-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-settings-dark.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=71818671726f076082bea2e314ee03a6" alt="Dark mode interface" width="2360" height="1274" data-path="images/next/quickstart-settings-dark.png" />
    </Frame>

    <Note>
      For your first check, the default settings work well. You can always adjust them later.
    </Note>
  </Step>

  <Step title="Choose Scheduling Frequency and Locations">
    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-schedule-light.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=c177f1165623da958ce64bcf498e5c7c" alt="Light mode interface" width="2058" height="1364" data-path="images/next/quickstart-schedule-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-schedule-dark.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=c3e44b89746d9f4e9826550a9ce70dc5" alt="Dark mode interface" width="2052" height="1380" data-path="images/next/quickstart-schedule-dark.png" />
    </Frame>
  </Step>

  <Step title="Set Up Alerts">
    Configure who gets notified when issues are detected:

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-alerts-light.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=f0ac0d4ff70bbfd069df618b247dc85b" alt="Light mode interface" width="2054" height="1456" data-path="images/next/quickstart-alerts-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-alerts-dark.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=146808a033acd1f73bf965f5fb06a682" alt="Dark mode interface" width="2050" height="1454" data-path="images/next/quickstart-alerts-dark.png" />
    </Frame>
  </Step>

  <Step title="Test and Save">
    Before activating your check:

    1. **Click "Test Check"** to run it once and verify it works
    2. **Review the results** to ensure your website loads correctly
    3. **Check for any errors** in the console or network tabs
    4. **Click "Save and Activate"** to start continuous monitoring
  </Step>

  <Step title="View Results">
    Once your check is active:

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-reporting-light.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=cfa6f1a2b1cb1c9d8eb159091771f2f7" alt="Light mode interface" width="1914" height="498" data-path="images/next/quickstart-reporting-light.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/checkly-422f444a/6qveEuGHBRjnnvr2/images/next/quickstart-reporting-dark.png?fit=max&auto=format&n=6qveEuGHBRjnnvr2&q=85&s=0066bd3c83d62d06955b4eaf6d96639b" alt="Dark mode interface" width="1904" height="522" data-path="images/next/quickstart-reporting-dark.png" />
    </Frame>

    1. **Visit your dashboard** to see real-time results
    2. **Check the results page** for detailed performance metrics
    3. **Review screenshots** and timing information
    4. **Set up additional checks** for other critical pages
  </Step>
</Steps>

## Next Steps

Now that you have your first check running:

* **Add API Checks**: Monitor your backend services and APIs
* **Create Check Groups**: Organize related checks together
* **Set up Status Pages**: Share uptime information with users
* **Explore Integrations**: Connect with Slack, PagerDuty, or other tools

## Upgrading to Monitoring as Code

As your monitoring needs grow, consider upgrading to our CLI approach:

* **Version Control**: Keep your monitoring configuration in Git
* **Team Collaboration**: Review changes through pull requests
* **CI/CD Integration**: Deploy monitoring alongside your applications
* **Advanced Scripting**: Write custom Playwright tests for complex flows

Ready to make the switch? Check out the **Monitoring as Code** tab above!
