January 26th, 2024
New
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 extraHTTPHeader
s 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.