feat: move playwright config at check level (#928)

* feat: move playwright config at check level

* feat: add playwright config to multistep checks

packages/cli/e2e/__tests__/sync-playwright.spec.ts

@@ -18,11 +18,11 @@ describe('sync-playwright', () => {
     expect(status).toBe(0)
     expect(stdout).toContain('Successfully updated Checkly config file')
     const checklyConfig = await loadChecklyConfig(path.join(__dirname, 'fixtures', 'test-playwright-project'))
-    expect(checklyConfig.config?.checks?.browserChecks?.playwrightConfig).toBeDefined()
-    expect(checklyConfig.config?.checks?.browserChecks?.playwrightConfig?.timeout).toEqual(1234)
-    expect(checklyConfig.config?.checks?.browserChecks?.playwrightConfig?.use).toBeDefined()
-    expect(checklyConfig.config?.checks?.browserChecks?.playwrightConfig?.use?.baseURL).toEqual('http://127.0.0.1:3000')
-    expect(checklyConfig.config?.checks?.browserChecks?.playwrightConfig?.expect).toBeDefined()
+    expect(checklyConfig.config?.checks?.playwrightConfig).toBeDefined()
+    expect(checklyConfig.config?.checks?.playwrightConfig?.timeout).toEqual(1234)
+    expect(checklyConfig.config?.checks?.playwrightConfig?.use).toBeDefined()
+    expect(checklyConfig.config?.checks?.playwrightConfig?.use?.baseURL).toEqual('http://127.0.0.1:3000')
+    expect(checklyConfig.config?.checks?.playwrightConfig?.expect).toBeDefined()
   })
 
   it('should fail if no playwright config file exists', async () => {

packages/cli/src/commands/sync-playwright.ts

@@ -32,16 +32,9 @@ export default class SyncPlaywright extends BaseCommand {
           'your Checkly config: https://www.checklyhq.com/docs/cli/constructs-reference/#project')
     }
 
-    const browserCheckAst = this.findPropertyByName(checksAst.value, 'browserChecks')
-    if (!browserCheckAst) {
-      return this.handleError('Unable to automatically sync your config file. This can happen if your Checkly config is ' +
-          'built using helper functions or other JS/TS features. You can still manually set Playwright config values in ' +
-          'your Checkly config: https://www.checklyhq.com/docs/cli/constructs-reference/#project')
-    }
-
     const pwtConfig = new PlaywrightConfigTemplate(config).getConfigTemplate()
     const pwtConfigAst = this.findPropertyByName(recast.parse(pwtConfig), 'playwrightConfig')
-    this.addOrReplacePlaywrightConfig(browserCheckAst.value, pwtConfigAst)
+    this.addOrReplacePlaywrightConfig(checksAst.value, pwtConfigAst)
 
     const checklyConfigData = recast.print(checklyAst, { tabWidth: 2 }).code
     const dir = path.resolve(path.dirname(configFile.fileName))

packages/cli/src/constructs/browser-check.ts

@@ -6,7 +6,7 @@ import { CheckConfigDefaults } from '../services/checkly-config-loader'
 import { pathToPosix } from '../services/util'
 import { Content, Entrypoint } from './construct'
 import { detectSnapshots, Snapshot } from '../services/snapshot-service'
-import { PlaywrightConfig } from './browser-defaults'
+import { PlaywrightConfig } from './playwright-config'
 
 export interface CheckDependency {
   path: string

packages/cli/src/constructs/multi-step-check.ts

@@ -7,13 +7,15 @@ import { pathToPosix } from '../services/util'
 import { Content, Entrypoint } from './construct'
 import CheckTypes from '../constants'
 import { CheckDependency } from './browser-check'
+import { PlaywrightConfig } from './playwright-config'
 
 export interface MultiStepCheckProps extends CheckProps {
   /**
    * A valid piece of Node.js javascript code describing a multi-step interaction
    * with the Puppeteer or Playwright frameworks.
    */
-  code: Content|Entrypoint
+  code: Content|Entrypoint,
+  playwrightConfig?: PlaywrightConfig
 }
 
 /**
@@ -27,6 +29,7 @@ export class MultiStepCheck extends Check {
   script: string
   scriptPath?: string
   dependencies?: Array<CheckDependency>
+  playwrightConfig?: PlaywrightConfig
 
   /**
    * Constructs the multi-step instance
@@ -42,6 +45,8 @@ export class MultiStepCheck extends Check {
     MultiStepCheck.applyDefaultMultiStepCheckConfig(props)
     super(logicalId, props)
 
+    this.playwrightConfig = props.playwrightConfig
+
     if (!Session.availableRuntimes[this.runtimeId!]?.multiStepSupport) {
       throw new Error('This runtime does not support multi step checks.')
     }
@@ -128,6 +133,7 @@ export class MultiStepCheck extends Check {
       script: this.script,
       scriptPath: this.scriptPath,
       dependencies: this.dependencies,
+      playwrightConfig: this.playwrightConfig,
     }
   }
 }

packages/cli/src/constructs/browser-defaults.ts → packages/cli/src/constructs/playwright-config.ts

@@ -43,7 +43,3 @@ export type PlaywrightConfig = {
     expect?: Expect,
     timeout?: number
 }
-
-export interface BrowserPlaywrightDefaults extends CheckProps {
-    playwrightConfig?: PlaywrightConfig
-}

packages/cli/src/playwright/playwright-config-template.ts

@@ -1,4 +1,4 @@
-import { PlaywrightConfig, Use, Expect } from '../constructs/browser-defaults'
+import { PlaywrightConfig, Use, Expect } from '../constructs/playwright-config'
 import * as JSON5 from 'json5'
 
 export default class PlaywrightConfigTemplate {

packages/cli/src/services/checkly-config-loader.ts

@@ -6,17 +6,13 @@ import { Session } from '../constructs'
 import { Construct } from '../constructs/construct'
 import type { Region } from '..'
 import { ReporterType } from '../reporters/reporter'
-import { BrowserPlaywrightDefaults } from '../constructs/browser-defaults'
 import * as fs from 'fs'
+import { PlaywrightConfig } from '../constructs/playwright-config'
 
 export type CheckConfigDefaults = Pick<CheckProps, 'activated' | 'muted' | 'doubleCheck'
   | 'shouldFail' | 'runtimeId' | 'locations' | 'tags' | 'frequency' | 'environmentVariables'
   | 'alertChannels' | 'privateLocations' | 'retryStrategy' | 'alertEscalationPolicy'>
 
-export type BrowserCheckDefaults = Pick<BrowserPlaywrightDefaults, 'activated' | 'muted' | 'doubleCheck'
-  | 'shouldFail' | 'runtimeId' | 'locations' | 'tags' | 'frequency' | 'environmentVariables'
-  | 'alertChannels' | 'privateLocations' | 'retryStrategy' | 'playwrightConfig' >
-
 export type ChecklyConfig = {
   /**
    * Friendly name for your project.
@@ -42,10 +38,13 @@ export type ChecklyConfig = {
      * List of glob patterns with directories to ignore.
      */
     ignoreDirectoriesMatch?: string[],
+
+    playwrightConfig?: PlaywrightConfig,
+
     /**
      * Browser checks default configuration properties.
      */
-    browserChecks?: BrowserCheckDefaults & {
+    browserChecks?: CheckConfigDefaults & {
       /**
        * Glob pattern where the CLI looks for Playwright test files, i.e. all `.spec.ts` files
        */

packages/create-cli/src/actions/playwright.ts

@@ -26,13 +26,8 @@ export async function copyPlaywrightConfig (dirPath: string, playwrightConfigFil
       return handleError(copySpinner, 'Could not parse you checkly file correctly')
     }
 
-    const browserCheckAst = findPropertyByName(checksAst.value, 'browserChecks')
-    if (!browserCheckAst) {
-      return handleError(copySpinner, 'Could not parse you checkly file correctly')
-    }
-
     const pwtConfigAst = findPropertyByName(recast.parse(pwtConfig), 'playwrightConfig')
-    addOrReplacePlaywrightConfig(browserCheckAst.value, pwtConfigAst)
+    addOrReplacePlaywrightConfig(checksAst.value, pwtConfigAst)
     fs.writeFileSync(path.join(dirPath, checklyConfig.fileName), recast.print(checklyAst, { tabWidth: 2 }).code)
   } catch (e) {
     handleError(copySpinner, e)