Playwright Global Configuration in Beta

We now support a subset of global configuration options for our Playwright-powered Browser and Multistep checks via our CLI.

To get started, upgrade your CLI to version 4.6.0 and add any supported options to the new playwrightConfig section in your checkly.config.ts file. To quickly copy the supported settings over to your checkly.config.ts file, you can run...

npx checkly sync-playwright

You should now have a checkly.config.ts file similar to the example below 👇

import { defineConfig } from 'checkly'
import { devices } from '@playwright/test'

const config = defineConfig({
  projectName: 'Checkly website',
  logicalId: 'checkly-website-project',
  checks: {
    locations: ['us-east-1', 'eu-west-1'],
    playwrightConfig: {
      timeout: 30000,
      use: {
        baseURL: 'https://www.checklyhq.com',      
        ...devices['iPhone 12 Pro Max landscape'],
        extraHTTPHeaders: {
          'x-my-custom-header': 'value',        
        }
      }
    }, 
    checkMatch: ['**/__checks__/**/*.check.ts'],
    browserChecks: {
      testMatch: ['**/__checks__/**/*.spec.ts'],
    },   
  },
})

export default config

Note that we now set the timeout, baseUrl, device properties and extraHTTPHeaders globally for all Browser and Multistep checks using the canonical Playwright configuration options. You can now write a Browser check like...

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

test('Checkly pricing page', async ({ page, baseURL }) => {
  const response = await page.goto(baseURL! + '/pricing')
  expect(response?.status()).toBeLessThan(400)
})

After deploying your checks with npx checkly deploy, you can access the fully rendered configuration in the new "playwright test config"-section in the web UI editor.

This is our first step to fully support all global configuration options. We still have some dragons to slay to support globalSetup, globalTeardown, storageState and dependencies but we are working it!

Check our docs for more information.