table of contents Table of contents
Docs / Browser checks / Login scenarios
CLI Enabled

Monitoring a login scenario with browser checks

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 👇

Username / password login

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

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()
})

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.

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()
})

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()
})

Social Login

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.

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()
})

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

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

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