---
title: Browser check quickstart: your first Playwright monitor
description: Create your first browser check in five minutes — see an example pass on a practice site, then point it at your own site, store the password as a secret and schedule it.
canonical: https://watchfor.io/docs/monitors/browser-checks/quickstart
---

# Browser check quickstart: your first Playwright monitor

Create your first browser check in five minutes — see an example pass on a practice site, then point it at your own site, store the password as a secret and schedule it.

Every example starts on a public practice site it was written for, so your very
first test run is green and you see what a good result looks like. Then you
point it at your site.

**Open a new browser check.** **New monitor → Browser check**, or go straight
to the [Login example](/dashboard/organization/monitors/new/playwright?template=login).
You get three ways in: **Start from a working example**, **Import a script**
and **Ask your agent**. Pick **Login**.

**Press Test run** (⌘/Ctrl + Enter). The script runs once in a real browser
from one of our locations against `the-internet.herokuapp.com/login`, a public
Selenium practice site that publishes a test account. The steps tick past and
the run passes in a few seconds. Nothing is saved yet.

**Press Use my site.** The URL field empties for your login page, and the
practice site's username and password in the script become variables:

```ts
// Set LOGIN_USERNAME and LOGIN_PASSWORD in Settings › Variables & secrets
// (LOGIN_PASSWORD as a secret).
const username = process.env.LOGIN_USERNAME!;
const password = process.env.LOGIN_PASSWORD!;
```

A real password never goes into the script.

**Enter your login page's URL** and match the field labels to your form, for
example `page.getByLabel('Email')` instead of `'Username'`. Not sure what to
write? Run `npx playwright codegen https://your-site.example`, sign in once,
and copy the lines it records.

**Add the variables.** The **Variables** strip under the editor marks
`LOGIN_USERNAME` and `LOGIN_PASSWORD` in amber: they aren't set yet. Click each
one to add it, and save the password
as a **secret**, so it is encrypted, never shown again and masked in logs,
traces and screenshots. Use a dedicated test account, never a real person's.

**Test run again.** If it fails, the failed step shows what was expected and
what the page showed, a screenshot of the page, and for common errors a line
on the likely cause with a link to
[Troubleshooting](/docs/monitors/browser-checks/troubleshooting).

**Name it and press Create check.** Pick how often it runs and from where. The
first scheduled run starts at once and keeps full screenshots and a trace.
**Journey failed** alerts are on by default.

## The examples

| Example | Practice site | What it shows |
|---|---|---|
| [Page loads cleanly](/dashboard/organization/monitors/new/playwright?template=page-loads) | playwright.dev | Status code, a visible heading, no console or page errors |
| [Login](/dashboard/organization/monitors/new/playwright?template=login) | the-internet.herokuapp.com | Sign in, land on the signed-in page |
| [Login with 2FA (TOTP)](/dashboard/organization/monitors/new/playwright?template=login-totp) | authenticationtest.com | Password plus a one-time code from an authenticator secret |
| [Search](/dashboard/organization/monitors/new/playwright?template=search) | en.wikipedia.org | Search, results, open the first result |
| [Checkout (add to cart)](/dashboard/organization/monitors/new/playwright?template=checkout) | saucedemo.com | Sign in, add to cart, reach the order summary — no payment |
| [API + UI](/dashboard/organization/monitors/new/playwright?template=api-ui) | Wikipedia and its REST API | An API call and the page agree |
| [Blank](/dashboard/organization/monitors/new/playwright?template=blank) | playwright.dev | Open a page; write the rest |

The practice sites belong to other people. They are good for a first run, not
for monitoring: once the example works, point it at your own site.

## Bring a script instead

**Import** takes a `.spec.ts` / `.js` file or pasted code (`npx playwright
codegen` output and Checkly browser checks work unchanged) and **Chrome DevTools
Recorder** exports (`.json`). A Recorder export becomes editable Playwright
code with one `test.step` per recorded step. A password typed during the
recording is never carried over: it becomes `process.env.LOGIN_PASSWORD`.

## Next

- [Recipes](/docs/monitors/browser-checks/recipes) for 2FA, checkout, cookie
  banners, iframes, mobile and downloads.
- [Run locally](/docs/monitors/browser-checks/run-locally) to debug with the
  exact runtime on your machine.

---

Canonical page: https://watchfor.io/docs/monitors/browser-checks/quickstart · All docs: https://watchfor.io/docs · Site guide: https://watchfor.io/llms.txt