chore: add more ct options to allow redirecting templates/cache (#14077)

packages/html-reporter/playwright.config.ts

@@ -24,7 +24,7 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
-    vitePort: 3101,
+    ctPort: 3101,
     trace: 'on-first-retry',
   },
   projects: [ ],

packages/playwright-ct-react/index.d.ts

@@ -26,7 +26,12 @@ import type {
 import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
-  use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+  use?: BasePlaywrightTestConfig['use'] & {
+    ctPort?: number,
+    ctTemplateDir?: string,
+    ctCacheDir?: string,
+    ctViteConfig?: InlineConfig
+  }
 };
 
 interface ComponentFixtures {

packages/playwright-ct-svelte/index.d.ts

@@ -26,7 +26,12 @@ import type {
 import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
-  use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+  use?: BasePlaywrightTestConfig['use'] & {
+    ctPort?: number,
+    ctTemplateDir?: string,
+    ctCacheDir?: string,
+    ctViteConfig?: InlineConfig
+  }
 };
 
 interface ComponentFixtures {

packages/playwright-ct-vue/index.d.ts

@@ -26,7 +26,12 @@ import type {
 import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
-  use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+  use?: BasePlaywrightTestConfig['use'] & {
+    ctPort?: number,
+    ctTemplateDir?: string,
+    ctCacheDir?: string,
+    ctViteConfig?: InlineConfig
+  }
 };
 
 interface ComponentFixtures {

packages/playwright-test/src/plugins/vitePlugin.ts

@@ -28,6 +28,14 @@ import { assert } from 'playwright-core/lib/utils';
 let previewServer: PreviewServer;
 const VERSION = 1;
 
+type CtConfig = {
+  ctPort?: number;
+  ctTemplateDir?: string;
+  ctCacheDir?: string;
+  ctViteConfig?: InlineConfig;
+};
+
+
 export function createPlugin(
   registerSourceFile: string,
   frameworkPluginFactory: () => Plugin): TestRunnerPlugin {
@@ -36,15 +44,16 @@ export function createPlugin(
     name: 'playwright-vite-plugin',
 
     setup: async (config: FullConfig, configDirectory: string, suite: Suite) => {
-      const use = config.projects[0].use as any;
-      const viteConfig: InlineConfig = use.viteConfig || {};
-      const port = use.vitePort || 3100;
       configDir = configDirectory;
-      process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL = `http://localhost:${port}/playwright/index.html`;
+      const use = config.projects[0].use as CtConfig;
+      const port = use.ctPort || 3100;
+      const viteConfig: InlineConfig = use.ctViteConfig || {};
+      const relativeTemplateDir = use.ctTemplateDir || 'playwright';
+      process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL = `http://localhost:${port}/${relativeTemplateDir}/index.html`;
 
       const rootDir = viteConfig.root || configDir;
-      const outDir = viteConfig?.build?.outDir || path.join(rootDir, 'playwright', '.cache');
+      const templateDir = path.join(rootDir, relativeTemplateDir);
-      const templateDir = path.join(rootDir, 'playwright');
+      const outDir = viteConfig?.build?.outDir || (use.ctCacheDir ? path.resolve(rootDir, use.ctCacheDir) : path.resolve(templateDir, '.cache'));
 
       const buildInfoFile = path.join(outDir, 'metainfo.json');
       let buildInfo: BuildInfo;
@@ -79,7 +88,7 @@ export function createPlugin(
           frameworkPluginFactory()
         ];
         const registerSource = await fs.promises.readFile(registerSourceFile, 'utf-8');
-        viteConfig.plugins.push(vitePlugin(registerSource, buildInfo, componentRegistry));
+        viteConfig.plugins.push(vitePlugin(registerSource, relativeTemplateDir, buildInfo, componentRegistry));
         viteConfig.configFile = viteConfig.configFile || false;
         viteConfig.define = viteConfig.define || {};
         viteConfig.define.__VUE_PROD_DEVTOOLS__ = true;
@@ -218,7 +227,7 @@ async function parseTestFile(testFile: string): Promise<ComponentInfo[]> {
   return result;
 }
 
-function vitePlugin(registerSource: string, buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Plugin {
+function vitePlugin(registerSource: string, relativeTemplateDir: string, buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Plugin {
   buildInfo.sources = {};
   return {
     name: 'playwright:component-index',
@@ -235,7 +244,7 @@ function vitePlugin(registerSource: string, buildInfo: BuildInfo, componentRegis
         }
       }
 
-      if (!id.endsWith('playwright/index.ts') && !id.endsWith('playwright/index.tsx') && !id.endsWith('playwright/index.js'))
+      if (!id.endsWith(`${relativeTemplateDir}/index.ts`) && !id.endsWith(`${relativeTemplateDir}/index.tsx`) && !id.endsWith(`${relativeTemplateDir}/index.js`))
         return;
 
       const folder = path.dirname(id);

packages/web/playwright.config.ts

@@ -23,7 +23,7 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
-    vitePort: 3102,
+    ctPort: 3102,
     trace: 'on-first-retry',
   },
   projects: [

tests/components/ct-react-vite/package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
+    "preview": "vite preview"
-    "playwright-dev": "vite --config playwright.vite.config.ts"
   },
   "dependencies": {
     "react": "^17.0.2",

tests/components/ct-svelte-vite/package.json

@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
-    "playwright-dev": "vite --config playwright.vite.config.ts"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",

tests/components/ct-vue-vite/package.json

@@ -4,8 +4,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5050",
+    "preview": "vite preview --port 5050"
-    "playwright-dev": "vite --config playwright.vite.config.js"
   },
   "dependencies": {
     "vue": "^3.2.31"

tests/components/ct-vue-vite/playwright.config.ts

@@ -22,6 +22,8 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
+    ctTemplateDir: 'playwright',
+    ctCacheDir: 'playwright/.cache',
     trace: 'on-first-retry',
   },
   projects: [