feat(cli): playwright config file selection (#1255)

timohuovinen · web-flow · commit 74cb56d84209 · 2026-03-13T10:51:38.000Z
diff --git a/packages/create-cli/e2e/__tests__/bootstrap.spec.ts b/packages/create-cli/e2e/__tests__/bootstrap.spec.ts
@@ -291,9 +291,10 @@ describe('bootstrap', () => {
 
   it('Should copy the playwright config', async () => {
     const directory = path.join(__dirname, 'fixtures', 'playwright-project')
+    const playwrightConfigPath = path.join(directory, 'playwright.config.ts')
     const commandOutput = await runChecklyCreateCli({
       directory,
-      promptsInjection: [true, false, false, true],
+      promptsInjection: [true, false, false, true, playwrightConfigPath],
     })
 
     expectVersionAndName({ commandOutput, latestVersion, greeting })
diff --git a/packages/create-cli/package.json b/packages/create-cli/package.json
@@ -83,4 +83,4 @@
     "uuid": "^11.1.0",
     "vitest": "3.1.2"
   }
-}
+}
diff --git a/packages/create-cli/src/actions/playwright.ts b/packages/create-cli/src/actions/playwright.ts
@@ -93,3 +93,26 @@ function addOrReplacePlaywrightConfig (ast: any, node: any) {
     ast.properties.push(node)
   }
 }
+
+export function updatePlaywrightConfigPath (dirPath: string, relativePath: string) {
+  const checklyConfig = getChecklyConfigFile(dirPath)
+  if (!checklyConfig) {
+    return
+  }
+
+  const ast = recast.parse(checklyConfig.checklyConfig)
+  const checksAst = findPropertyByName(ast, 'checks')
+  if (!checksAst) {
+    return
+  }
+
+  const configPathProp = findPropertyByName(checksAst.value, 'playwrightConfigPath')
+  if (configPathProp) {
+    configPathProp.value = recast.types.builders.literal(relativePath)
+  }
+
+  fs.writeFileSync(
+    path.join(dirPath, checklyConfig.fileName),
+    recast.print(ast, { tabWidth: 2 }).code,
+  )
+}
diff --git a/packages/create-cli/src/commands/bootstrap.ts b/packages/create-cli/src/commands/bootstrap.ts
@@ -1,16 +1,18 @@
+import * as path from 'path'
 import axios from 'axios'
 import chalk from 'chalk'
 import prompts from 'prompts'
 import { Command, Flags } from '@oclif/core'
 import { getUserGreeting, header, footer, hint } from '../utils/messages'
-import { getPlaywrightConfig, hasPackageJsonFile } from '../utils/directory'
+import { collectConfigPaths, getPlaywrightConfig, hasPackageJsonFile, PLAYWRIGHT_CONFIG_FILES } from '../utils/directory'
 import {
   copyPlaywrightConfig,
   createProject,
   getProjectDirectory,
   installDependenciesAndInitGit,
   installWithinProject,
 } from '../utils/installation'
+import { askPlaywrightConfigPath } from '../utils/prompts'
 
 /**
  * This code is heavily inspired by the amazing create-astro package over at
@@ -115,10 +117,20 @@ export default class Bootstrap extends Command {
 
     await installDependenciesAndInitGit({ projectDirectory })
 
-    const playwrightConfig = getPlaywrightConfig(projectDirectory)
-    // Only prompt playwright copy when not using exampels
+    let playwrightConfig: string | undefined
+    if (interactive) {
+      const candidates = collectConfigPaths(projectDirectory, PLAYWRIGHT_CONFIG_FILES)
+      const { playwrightConfigPath } = await askPlaywrightConfigPath(candidates, projectDirectory, onCancel)
+      playwrightConfig = playwrightConfigPath
+        ? path.relative(projectDirectory, playwrightConfigPath)
+        : undefined
+    } else {
+      playwrightConfig = getPlaywrightConfig(projectDirectory)
+    }
+
+    // Only prompt playwright copy when not using examples
     if (playwrightConfig && existingProject) {
-      await copyPlaywrightConfig({ projectDirectory, playwrightConfig })
+      await copyPlaywrightConfig({ projectDirectory, playwrightConfig, onCancel })
     }
 
     // Show appropriate footer
diff --git a/packages/create-cli/src/utils/__tests__/directory.spec.ts b/packages/create-cli/src/utils/__tests__/directory.spec.ts
@@ -2,7 +2,7 @@ import path from 'node:path'
 
 import { describe, expect, test } from 'vitest'
 
-import { hasPackageJsonFile, isValidProjectDirectory, readPackageJson } from '../directory'
+import { collectConfigPaths, hasPackageJsonFile, isValidProjectDirectory, readPackageJson } from '../directory'
 
 describe('isValidProjectDirectory()', () => {
   type TestTuple = [string, boolean]
@@ -30,6 +30,27 @@ describe('hasPackageJsonFile()', () => {
   })
 })
 
+describe('collectConfigPaths()', () => {
+  const suffixes = ['playwright.config.ts', 'playwright.config.js']
+
+  test('finds configs recursively, sorted by depth then ts over js', () => {
+    const fixtureDir = path.join(__dirname, './fixtures/playwright-multi')
+    const results = collectConfigPaths(fixtureDir, suffixes)
+      .map(r => path.relative(fixtureDir, r).split(path.sep).join('/'))
+    expect(results).toEqual([
+      'playwright.config.ts',
+      'playwright.config.js',
+      'staging/playwright.config.ts',
+      'dev/playwright.config.js',
+    ])
+  })
+
+  test('returns empty array when no matches', () => {
+    const results = collectConfigPaths(path.join(__dirname, './fixtures/empty-project'), suffixes)
+    expect(results).toEqual([])
+  })
+})
+
 describe('readPackageJson()', () => {
   type TestTuple = [string, string]
   const cases: TestTuple[] = [
diff --git a/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/dev/playwright.config.js b/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/dev/playwright.config.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/playwright.config.js b/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/playwright.config.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/playwright.config.ts b/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/playwright.config.ts
@@ -0,0 +1 @@
+export default {}
diff --git a/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/staging/playwright.config.ts b/packages/create-cli/src/utils/__tests__/fixtures/playwright-multi/staging/playwright.config.ts
@@ -0,0 +1 @@
+export default {}
diff --git a/packages/create-cli/src/utils/__tests__/prompts.spec.ts b/packages/create-cli/src/utils/__tests__/prompts.spec.ts
@@ -12,6 +12,7 @@ import {
   askCreateInitialBrowserCheck,
   askInstallDependencies,
   askInitializeGit,
+  askPlaywrightConfigPath,
 } from '../prompts'
 import * as directoryUtils from '../../utils/directory'
 
@@ -69,4 +70,49 @@ describe('prompts', () => {
     }
     expect(onCancel).toBeCalledTimes(availableTemplates.length)
   })
+
+  it('should ask to select a playwright config path', async () => {
+    const projectDir = path.resolve(__dirname, './fixtures/playwright-multi')
+    const candidates = [
+      path.join(projectDir, 'playwright.config.ts'),
+      path.join(projectDir, 'staging/playwright.config.ts'),
+    ]
+
+    // Select first candidate
+    prompts.inject([candidates[0]])
+    const { playwrightConfigPath } = await askPlaywrightConfigPath(candidates, projectDir, onCancel)
+    expect(playwrightConfigPath).toBe(candidates[0])
+  })
+
+  it('should ask to select custom when choosing custom option', async () => {
+    const projectDir = path.resolve(__dirname, './fixtures/playwright-multi')
+    const candidates = [
+      path.join(projectDir, 'playwright.config.ts'),
+    ]
+
+    // Select custom (index 1 = last item), then provide a valid path
+    prompts.inject(['__custom__', 'playwright.config.ts'])
+    const { playwrightConfigPath } = await askPlaywrightConfigPath(candidates, projectDir, onCancel)
+    expect(playwrightConfigPath).toBe(path.resolve(projectDir, 'playwright.config.ts'))
+  })
+
+  it('should skip playwright config when user selects Skip', async () => {
+    const projectDir = path.resolve(__dirname, './fixtures/playwright-multi')
+    const candidates = [
+      path.join(projectDir, 'playwright.config.ts'),
+      path.join(projectDir, 'staging/playwright.config.ts'),
+    ]
+
+    prompts.inject(['__skip__'])
+    const { playwrightConfigPath } = await askPlaywrightConfigPath(candidates, projectDir, onCancel)
+    expect(playwrightConfigPath).toBeUndefined()
+  })
+
+  it('should fall back to custom input when no candidates', async () => {
+    const projectDir = path.resolve(__dirname, './fixtures/playwright-multi')
+
+    prompts.inject(['staging/playwright.config.ts'])
+    const { playwrightConfigPath } = await askPlaywrightConfigPath([], projectDir, onCancel)
+    expect(playwrightConfigPath).toBe(path.resolve(projectDir, 'staging/playwright.config.ts'))
+  })
 })
diff --git a/packages/create-cli/src/utils/directory.ts b/packages/create-cli/src/utils/directory.ts
@@ -3,6 +3,8 @@ import * as path from 'path'
 import { uniqueNamesGenerator, colors, animals } from 'unique-names-generator'
 import { loadFile } from './fileloader'
 
+export const PLAYWRIGHT_CONFIG_FILES = ['playwright.config.ts', 'playwright.config.js']
+
 export interface PackageJson {
   name: string
   devDependencies: {
@@ -14,9 +16,8 @@ export function hasPackageJsonFile (dirPath: string) {
   return fs.existsSync(path.join(dirPath, 'package.json'))
 }
 
-export function getPlaywrightConfig (dirPath: string) {
-  const playwrightConfigFiles = ['playwright.config.ts', 'playwright.config.js']
-  return playwrightConfigFiles.find(config => fs.existsSync(path.join(dirPath, config)))
+export function getPlaywrightConfig (dirPath: string): string | undefined {
+  return PLAYWRIGHT_CONFIG_FILES.find(config => fs.existsSync(path.join(dirPath, config)))
 }
 
 export function readPackageJson (dirPath: string): PackageJson {
@@ -97,3 +98,23 @@ export function generateProjectName (): string {
     style: 'lowerCase',
   })
 }
+
+// Recursively find config files matching the given suffixes, excluding node_modules and dot-prefixed dirs.
+// Results are sorted by path depth, then suffix priority (first suffix wins), then alphabetically.
+export function collectConfigPaths (dir: string, suffixes: string[]): string[] {
+  const entries = fs.readdirSync(dir, { recursive: true, withFileTypes: true })
+  const results = entries
+    .filter(e => e.isFile() && suffixes.some(s => e.name.endsWith(s)))
+    .map(e => path.join(e.parentPath, e.name))
+    .filter(p => {
+      const rel = path.relative(dir, p)
+      return !rel.split(path.sep).some(seg => seg === 'node_modules' || seg.startsWith('.'))
+    })
+  const segmentCount = (p: string) => path.relative(dir, p).split(path.sep).length
+  const suffixPriority = (p: string) => suffixes.findIndex(s => p.endsWith(s))
+  return results.sort((a, b) =>
+    segmentCount(a) - segmentCount(b)
+    || suffixPriority(a) - suffixPriority(b)
+    || a.localeCompare(b),
+  )
+}
diff --git a/packages/create-cli/src/utils/installation.ts b/packages/create-cli/src/utils/installation.ts
@@ -80,11 +80,14 @@ export async function installDependenciesAndInitGit (
   await initGit(projectDirectory)
 }
 
-export async function copyPlaywrightConfig ({ projectDirectory, playwrightConfig }:
-{ projectDirectory: string, playwrightConfig: string }) {
+export async function copyPlaywrightConfig ({ projectDirectory, playwrightConfig, onCancel }:
+{ projectDirectory: string, playwrightConfig: string, onCancel: () => void }) {
   debug('Check if playwright config exists in project')
-  const { shouldCopyPlaywrightConfig } = await askCopyPlaywrightProject(projectDirectory)
+  // The boilerplate template hardcodes playwrightConfigPath: './playwright.config.ts',
+  // update it to the path the user selected.
+  const { shouldCopyPlaywrightConfig } = await askCopyPlaywrightProject(onCancel)
   if (shouldCopyPlaywrightConfig) {
+    playwright.updatePlaywrightConfigPath(projectDirectory, `./${playwrightConfig}`)
     await playwright.copyPlaywrightConfig(projectDirectory, playwrightConfig)
   }
 }
diff --git a/packages/create-cli/src/utils/prompts.ts b/packages/create-cli/src/utils/prompts.ts
@@ -1,3 +1,4 @@
+import * as fs from 'fs'
 import * as path from 'path'
 import chalk from 'chalk'
 import prompts from 'prompts'
@@ -84,7 +85,68 @@ export function askCopyPlaywrightProject (onCancel: any): Promise<{ shouldCopyPl
   return prompts({
     type: 'confirm',
     name: 'shouldCopyPlaywrightConfig',
-    message: 'It looks like you have a Playwright config file. Would you like to copy your settings to your Checkly config file?',
+    message: 'Would you like to copy your Playwright settings to your Checkly config file?',
     initial: true,
   }, { onCancel })
 }
+
+export async function askPlaywrightConfigPath (
+  candidates: string[],
+  projectDir: string,
+  onCancel: any,
+): Promise<{ playwrightConfigPath: string | undefined }> {
+  // Nothing to suggest, fallthrough to custom input.
+  if (candidates.length === 0) {
+    return askCustomPlaywrightConfigPath(projectDir, onCancel)
+  }
+
+  const CUSTOM_VALUE = '__custom__'
+  const SKIP_VALUE = '__skip__'
+  const choices = [
+    ...candidates.map(c => ({
+      title: `./${path.relative(projectDir, c)}`,
+      value: c,
+    })),
+    { title: 'Custom path', value: CUSTOM_VALUE },
+    { title: 'Skip', value: SKIP_VALUE },
+  ]
+
+  const { playwrightConfigPath } = await prompts({
+    type: 'select',
+    name: 'playwrightConfigPath',
+    message: 'Which Playwright config file would you like to use?',
+    choices,
+    initial: 0,
+  }, { onCancel })
+
+  if (playwrightConfigPath === CUSTOM_VALUE) {
+    return askCustomPlaywrightConfigPath(projectDir, onCancel)
+  }
+
+  if (playwrightConfigPath === SKIP_VALUE) {
+    return { playwrightConfigPath: undefined }
+  }
+
+  return { playwrightConfigPath }
+}
+
+async function askCustomPlaywrightConfigPath (
+  projectDir: string,
+  onCancel: any,
+): Promise<{ playwrightConfigPath: string | undefined }> {
+  const { playwrightConfigPath } = await prompts({
+    type: 'text',
+    name: 'playwrightConfigPath',
+    message: 'Enter the path to your Playwright config file:',
+    validate (val: string) {
+      const resolved = path.resolve(projectDir, val)
+      if (!fs.existsSync(resolved)) {
+        return `File not found: ${chalk.bold(resolved)}`
+      }
+      return true
+    },
+    format: (val: string) => path.resolve(projectDir, val),
+  }, { onCancel })
+
+  return { playwrightConfigPath }
+}

Original file line number	Diff line number	Diff line change
`@@ -83,4 +83,4 @@`
`83`	`83`	`"uuid": "^11.1.0",`
`84`	`84`	`"vitest": "3.1.2"`
`85`	`85`	`}`
`86`		`-}`
	`86`	`+}`