feat: add ability to copy playwright config into checkly config

packages/cli/package.json

@@ -93,7 +93,9 @@
     "prompts": "2.4.2",
     "proxy-from-env": "1.1.0",
     "tunnel": "0.0.6",
-    "uuid": "9.0.0"
+    "uuid": "9.0.0",
+    "handlebars": "4.7.8",
+    "recast": "0.23.4"
   },
   "devDependencies": {
     "@types/config": "3.3.3",

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

@@ -0,0 +1,84 @@
+import { BaseCommand } from './baseCommand'
+import * as recast from 'recast'
+import playwrightConfigTemplate from '../playwright/playwright-template'
+import { getChecklyConfigFile } from '../services/checkly-config-loader'
+import { loadPlaywrightConfig } from '../playwright/playwright-config-loader'
+import { parse } from '../services/handlebars-helpers'
+import * as Handlebars from 'handlebars'
+import fs from 'fs'
+import path from 'path'
+import { ux } from '@oclif/core'
+
+export default class SyncPlaywright extends BaseCommand {
+  static hidden = true
+  static description = 'Sync playwright config'
+
+  async run (): Promise<void> {
+    ux.action.start('Sync playwright config with checkly config', undefined, { stdout: true })
+
+    const config = await loadPlaywrightConfig()
+    if (!config) {
+      return this.handleError('Could not find any playwright.config file.')
+    }
+
+    Handlebars.registerHelper('parse', parse)
+    const pwtConfig = Handlebars.compile(playwrightConfigTemplate)(config)
+    const configFile = getChecklyConfigFile()
+    if (!configFile) {
+      return this.handleError('Could not find a checkly config file')
+    }
+
+    const checklyAst = recast.parse(configFile.checklyConfig)
+    const checksAst = this.findPropertyByName(checklyAst, 'checks')
+    if (!checksAst) {
+      return this.handleError('Could not parse your checkly config file')
+    }
+
+    const browserCheckAst = this.findPropertyByName(checksAst.value, 'browserChecks')
+    if (!browserCheckAst) {
+      return this.handleError('Could not parse your checkly config file')
+    }
+    const pwtConfigAst = this.findPropertyByName(recast.parse(pwtConfig), 'playwrightConfig')
+    this.addOrReplacePlaywrightConfig(browserCheckAst.value, pwtConfigAst)
+
+    const checklyConfigData = recast.print(checklyAst, { tabWidth: 2 }).code
+    const dir = path.resolve(path.dirname(configFile.fileName))
+    this.reWriteChecklyConfigFile(checklyConfigData, configFile.fileName, dir)
+
+    ux.action.stop('✅ ')
+    this.log('Successfully sync')
+    this.exit(0)
+  }
+
+  private handleError (message: string) {
+    ux.action.stop('❌')
+    this.log(message)
+    this.exit(1)
+  }
+
+  private findPropertyByName (ast: any, name: string): recast.types.namedTypes.Property | undefined {
+    let node
+    recast.visit(ast, {
+      visitProperty (path: any) {
+        if (path.node.key.name === name) {
+          node = path.node
+        }
+        return false
+      },
+    })
+    return node
+  }
+
+  private addOrReplacePlaywrightConfig (ast: any, node: any) {
+    const playWrightConfig = this.findPropertyByName(ast, 'playwrightConfig')
+    if (playWrightConfig) {
+      playWrightConfig.value = node.value
+    } else {
+      ast.properties.push(node)
+    }
+  }
+
+  private reWriteChecklyConfigFile (data: string, fileName: string, dir: string) {
+    fs.writeFileSync(path.join(dir, fileName), data)
+  }
+}

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

@@ -0,0 +1,15 @@
+import path from 'path'
+import { loadFile } from '../services/checkly-config-loader'
+
+export async function loadPlaywrightConfig () {
+  let config
+  const filenames = ['playwright.config.ts', 'playwright.config.js']
+  for (const configFile of filenames) {
+    const dir = path.resolve(path.dirname(configFile))
+    config = await loadFile(path.join(dir, configFile))
+    if (config) {
+      break
+    }
+  }
+  return config
+}

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

@@ -0,0 +1,134 @@
+const playwrightConfigTemplate = `
+const playwrightConfig = {
+  playwrightConfig: {
+  {{#timeout}}
+    timeout: {{.}},
+  {{/timeout}}
+  {{#use}}
+    use: {
+      {{#baseURL}}
+      baseURL: '{{.}}',
+      {{/baseURL}}
+      {{#colorScheme}}
+      colorScheme: '{{.}}',
+      {{/colorScheme}}
+      {{#geolocation}}
+      geolocation: {
+       {{#longitude}}
+       longitude: {{.}},
+       {{/longitude}}
+       {{#latitude}}
+       latitude: {{.}},
+       {{/latitude}}
+       {{#accuracy}}
+       accuracy: {{.}},
+       {{/accuracy}}
+      },
+      {{/geolocation}}
+      {{#locale}}
+      locale: '{{.}}',
+      {{/locale}}
+      {{#if permissions}}
+      permissions: [{{#permissions}}'{{.}}',{{/permissions}}],
+      {{/if}}
+      {{#timezoneId}}
+      timezoneId: '{{.}}',
+      {{/timezoneId}}
+      {{#viewport}}
+      viewport: {
+        {{#width}}
+        width: {{.}},
+        {{/width}}
+        {{#height}}
+        height: {{.}},
+        {{/height}}
+      },
+      {{/viewport}}
+      {{#deviceScaleFactor}}
+      deviceScaleFactor: {{.}},
+      {{/deviceScaleFactor}}
+      {{#hasTouch}}
+      hasTouch: {{.}},
+      {{/hasTouch}}
+      {{#isMobile}}
+      isMobile: {{.}},
+      {{/isMobile}}
+      {{#javaScriptEnabled}}
+      javaScriptEnabled: {{.}},
+      {{/javaScriptEnabled}}
+      {{#acceptDownloads}}
+      acceptDownloads: {{.}},
+      {{/acceptDownloads}}
+      {{#extraHTTPHeaders}}
+      extraHTTPHeaders: {
+        {{#each .}}
+        {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/extraHTTPHeaders}}
+      {{#httpCredentials}}
+      httpCredentials: {
+        {{#each .}}
+        {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/httpCredentials}}
+      {{#ignoreHTTPSErrors}}
+      ignoreHTTPSErrors: {{.}},
+      {{/ignoreHTTPSErrors}}
+      {{#offline}}
+      offline: {{.}},
+      {{/offline}}
+      {{#actionTimeout}}
+      actionTimeout: {{.}},
+      {{/actionTimeout}}
+      {{#navigationTimeout}}
+      navigationTimeout: {{.}},
+      {{/navigationTimeout}}
+      {{#testIdAttribute}}
+      testIdAttribute: '{{.}}',
+      {{/testIdAttribute}}
+      {{#launchOptions}}
+      launchOptions: {
+        {{#each .}}
+        {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/launchOptions}}
+      {{#contextOptions}}
+      contextOptions: {
+        {{#each .}}
+        {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/contextOptions}}
+      {{#bypassCSP}}
+      bypassCSP: '{{.}}',
+      {{/bypassCSP}}
+    },
+  {{/use}}
+  {{#expect}}
+    expect: {
+      {{#timeout}}
+      timeout: {{.}},
+      {{/timeout}}
+      {{#toHaveScreenshot}}
+      toHaveScreenshot: {
+        {{#each .}}
+         {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/toHaveScreenshot}}
+      {{#toMatchSnapshot}}
+      toMatchSnapshot: {
+        {{#each .}}
+        {{@key}}: {{{parse this}}},
+        {{/each}}
+      },
+      {{/toMatchSnapshot}}
+    },
+  {{/expect}}
+ }
+}
+`
+export default playwrightConfigTemplate

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

@@ -7,6 +7,7 @@ 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'
 
 export type CheckConfigDefaults = Pick<CheckProps, 'activated' | 'muted' | 'doubleCheck'
   | 'shouldFail' | 'runtimeId' | 'locations' | 'tags' | 'frequency' | 'environmentVariables'
@@ -69,7 +70,7 @@ enum Extension {
   TS = '.ts',
 }
 
-function loadFile (file: string) {
+export function loadFile (file: string) {
   if (!existsSync(file)) {
     return Promise.resolve(null)
   }
@@ -89,6 +90,26 @@ function isString (obj: any) {
   return (Object.prototype.toString.call(obj) === '[object String]')
 }
 
+export function getChecklyConfigFile (): {checklyConfig: string, fileName: string} | undefined {
+  const filenames: string[] = ['checkly.config.ts', 'checkly.config.js', 'checkly.config.mjs']
+  let config
+  for (const configFile of filenames) {
+    const dir = path.resolve(path.dirname(configFile))
+    if (!existsSync(path.resolve(dir, configFile))) {
+      continue
+    }
+    const file = fs.readFileSync(path.resolve(dir, configFile))
+    if (file) {
+      config = {
+        checklyConfig: file.toString(),
+        fileName: configFile,
+      }
+      break
+    }
+  }
+  return config
+}
+
 export async function loadChecklyConfig (dir: string, filenames = ['checkly.config.ts', 'checkly.config.js', 'checkly.config.mjs']): Promise<{ config: ChecklyConfig, constructs: Construct[] }> {
   let config
   Session.loadingChecklyConfigFile = true

packages/cli/src/services/handlebars-helpers.ts

@@ -0,0 +1,30 @@
+// Handlebars do not handle properly nested objects/arrays
+export function parse (input: any): any {
+  if (typeof input === 'string') {
+    return `'${input}'`
+  }
+  if (typeof input === 'number' || typeof input === 'boolean') {
+    return input
+  }
+  if (Array.isArray(input)) {
+    let arr
+    for (const o of input) {
+      if (!arr) {
+        arr = parse(o)
+        continue
+      }
+      arr = `${arr}, ${parse(o)}`
+    }
+    return `[${arr}]`
+  }
+  if (typeof input === 'object') {
+    const keys = Object.keys(input)
+    let returnObj = ''
+    for (const key of keys) {
+      const curr = `${key}: ${parse(input[key])}`
+      returnObj = `${returnObj} ${curr},`
+    }
+    return `{${returnObj}}`
+  }
+  return input
+}

packages/create-cli/package.json

@@ -39,6 +39,7 @@
   },
   "homepage": "https://github.com/checkly/checkly-cli#readme",
   "dependencies": {
+    "handlebars": "4.7.8",
     "@oclif/core": "2.8.11",
     "@oclif/plugin-help": "5.1.20",
     "@oclif/plugin-plugins": "2.3.0",
@@ -50,6 +51,7 @@
     "ora": "5.4.1",
     "passwd-user": "3.0.0",
     "prompts": "2.4.2",
+    "recast": "0.23.4",
     "unique-names-generator": "4.7.1"
   },
   "devDependencies": {