Skip to main content

Login Flows

If you want to monitor a web app it's probably only accessible after logging in. A login flow signs into a user account before the page is loaded for analysis.

Login flows are a type of setup flow.

Open the flow editor​

When creating or editing a page, click Add Advanced Setting and choose User Flow. The flow editor opens straight away.

info

Sign in with a generic account created for monitoring rather than using an account with special priviledges.

Let AI set up the login​

The quickest way to get a working login is to describe it. Click Configure Flow With AI, say where the login form is and which account to use, and DebugBear signs in using a real browser and records the actions it took:

Go to example.com/login, sign in as monitoring@example.com with the password
my-test-password, and check that the page says My account

The recorded steps land in the editor, where you can edit them like any other flow. See creating flows with AI for what else it can do.

Set up the login by hand​

Click Add Action Group, which starts a group with a Go to URL action in it, then use Add An Action for each step that follows. A typical login is four actions:

  1. Go to URL: your login page, for example https://example.com/login
  2. Enter Text: the CSS selector of the email field, such as input[name="email"], and the address to sign in with
  3. Enter Text: the CSS selector of the password field, such as input[name="password"], and the password
  4. Click Element: the CSS selector of the submit button, such as button[type="submit"]

DebugBear waits for each element to appear before using it, so you don't need a separate wait between the steps.

Give each action a name to keep the flow readable once the steps are collapsed.

Confirm that the login worked​

Add one more action at the end. Without it a broken login fails quietly and you end up monitoring a logged-out page:

  • Check Element Text looks for text that only appears once you're signed in, such as the account name in the header. The flow fails if nothing matching the selector contains that text within 10 seconds.
  • Wait For takes a JavaScript expression instead, which is useful when the URL is the only signal: location.pathname.includes("/account")

A login flow built from five actions

Test the login flow​

Click Test Flow to run the actions you've set up. Check that:

  • no action failed, for example because an element wasn't found in the DOM
  • the screenshots don't show a message like "invalid password"
  • the last screenshot shows a signed-in page

Testing the user flow

Last updated on