Monitoring a login scenario with browser checks

Table of contents

On this page

Scenarios where a user provides credentials to get access to a web app are extremely common. They are also a great candidate for a browser check as these site transactions tend to be very crucial.

Using Vercel deployment protection? Read this section on how to make this work with Checkly.

To get started, check out the video below 👇

The code snippet below shows how you can log into GitHub.

Typescript

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

test('Login into Github', async ({ page }) => {
    // Go to login page
    await page.goto('https://github.com/login')

    // Fill in credentials
    await page.getByLabel('Username or email address').type('janedoe@example.com')
    await page.getByLabel('Password').type('mypasswd')
    await page.getByRole('button', { name: 'Sign in' })

    // Verify successful login
    await expect(page.locator('#login-message')).toBeVisible()
})

Javascript

const { expect, test } = require('@playwright/test')

test('Login into Github', async ({ page }) => {
    // Go to login page
    await page.goto('https://github.com/login')

    // Fill in credentials
    await page.getByLabel('Username or email address').type('janedoe@example.com')
    await page.getByLabel('Password').type('mypasswd')
    await page.getByRole('button', { name: 'Sign in' })

    // Verify successful login
    await expect(page.locator('#login-message')).toBeVisible()
})

In certain cases, for example with Vercel password-protected deployments, websites might require a password to be entered before the target page is made available. Much like login cases, this can be solved directly using Playwright Test following the example above.

However, notice we are hard coding the username and password into our script. That’s never a good idea… Better to replace them with some environment variables. Read more about how to use environment variables in your browser checks.

Typescript

envvars.spec.ts

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

test('Login into Github', async ({ page }) => {
    // Go to login page
    await page.goto('https://github.com/login')

    // Fill in credentials
    await page.getByLabel('Username or email address').type(process.env.GITHUB_USER)
    await page.getByLabel('Password').type(process.env.GITHUB_PWD)
    await page.getByRole('button', { name: 'Sign in' })

    // Verify successful login
    await expect(page.locator('#login-message')).toBeVisible()
})

Javascript

envvars.spec.js

const { expect, test } = require('@playwright/test')

test('Login into Github', async ({ page }) => {
    // Go to login page
    await page.goto('https://github.com/login')

    // Fill in credentials
    await page.getByLabel('Username or email address').type(process.env.GITHUB_USER)
    await page.getByLabel('Password').type(process.env.GITHUB_PWD)
    await page.getByRole('button', { name: 'Sign in' })

    // Verify successful login
    await expect(page.locator('#login-message')).toBeVisible()
})

Authenticating via social login providers like Facebook, Google and GitHub can be a bit tricky to script because of the redirects involved. Also, many providers make their login pages “bot resistant” which makes scripting harder. The example below uses the Google social login option on the Checkly login page.

Typescript

social.spec.ts

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

test('Login into Checkly with Google social login', async ({ page }) => {
    await page.goto('https://app.checklyhq.com/')

    // Click Google login
    await page.getByText('Sign in with Google').click()

    // Provide email address and click 'next' button
    await page.locator('input[type="email"]').type(process.env.GOOGLE_USERNAME)
    await page.getByRole('button', { name: 'Next' }).click()

    // Provide password, click 'sign in' button
    await page.locator('input[type="password"]').type(process.env.GOOGLE_PASSWORD)
    await page.getByRole('button', { name: 'Sign in' }).click()

    // Verify successful login
    await expect(page.getByTestId('home-dashboard-table')).toBeVisible()
})

Javascript

social.spec.js

const { expect, test } = require('@playwright/test')

test('Login into Checkly with Google social login', async ({ page }) => {
    await page.goto('https://app.checklyhq.com/')

    // Click Google login
    await page.getByText('Sign in with Google').click()

    // Provide email address and click 'next' button
    await page.locator('input[type="email"]').type(process.env.GOOGLE_USERNAME)
    await page.getByRole('button', { name: 'Next' }).click()

    // Provide password, click 'sign in' button
    await page.locator('input[type="password"]').type(process.env.GOOGLE_PASSWORD)
    await page.getByRole('button', { name: 'Sign in' }).click()

    // Verify successful login
    await expect(page.getByTestId('home-dashboard-table')).toBeVisible()
})

Note the following:

We of course store our credentials in environment variables.
Playwright Test’s locators will wait for your elements to be visible until the test times out (which will make the check fail).

More resources

File uploads, downloads and the file system Handling variables and secrets

Last updated on December 13, 2024. You can contribute to this documentation by editing this page on Github

Monitoring a login scenario with browser checks

Username / password login

Social Login

More resources