chore: vite all frameworks (#13780)

examples/components-vue/playwright.config.ts

@@ -1,6 +1,5 @@
 import { PlaywrightTestConfig, devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-vue/vitePlugin';
-import vue from '@vitejs/plugin-vue';
+import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -12,7 +11,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite({ config: { plugins: [ vue() ] }}),
+    viteCT()
   ],
   use: {
     trace: 'on-first-retry',

packages/html-reporter/playwright.config.ts

@@ -17,7 +17,7 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import path from 'path';
 import { devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-react/vitePlugin';
+import viteCT from '@playwright/experimental-ct-react/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -29,7 +29,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite({ port: 3101 })
+    viteCT({ port: 3101 })
   ],
   use: {
     trace: 'on-first-retry',

packages/playwright-ct-react/package.json

@@ -17,6 +17,10 @@
     "./test": "./test.js",
     "./vitePlugin": "./vitePlugin.js"
   },
+  "dependencies": {
+    "@vitejs/plugin-react": "^1.0.7",
+    "vite": "^2.9.5"
+  },
   "devDependencies": {
     "@playwright/test": "1.22.0-next"
   }

packages/playwright-ct-react/vitePlugin.js

@@ -17,5 +17,8 @@
 const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
 module.exports = (options = {}) => {
-  return createPlugin('@playwright/experimental-ct-react/register', options);
+  return createPlugin(
+    '@playwright/experimental-ct-react/register',
+    () => require('@vitejs/plugin-react')(),
+    options);
 };

packages/playwright-ct-svelte/package.json

@@ -17,6 +17,10 @@
     "./test": "./test.js",
     "./vitePlugin": "./vitePlugin.js"
   },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+    "vite": "^2.9.5"
+  },
   "devDependencies": {
     "@playwright/test": "1.22.0-next"
   }

packages/playwright-ct-svelte/vitePlugin.js

@@ -17,5 +17,8 @@
 const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
 module.exports = (options = {}) => {
-  return createPlugin('@playwright/experimental-ct-svelte/register', options);
+  return createPlugin(
+    '@playwright/experimental-ct-svelte/register',
+    () => require('@sveltejs/vite-plugin-svelte').svelte(),
+    options);
 };

packages/playwright-ct-vue/package.json

@@ -17,6 +17,10 @@
     "./test": "./test.js",
     "./vitePlugin": "./vitePlugin.js"
   },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^2.3.1",
+    "vite": "^2.9.5"
+  },
   "devDependencies": {
     "@playwright/test": "1.22.0-next"
   }

packages/playwright-ct-vue/vitePlugin.js

@@ -17,5 +17,8 @@
 const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
 module.exports = (options = {}) => {
-  return createPlugin('@playwright/experimental-ct-vue/register', options);
+  return createPlugin(
+    '@playwright/experimental-ct-vue/register',
+    () => require('@vitejs/plugin-vue')(),
+    options);
 };

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

@@ -27,6 +27,7 @@ let viteDevServer: ViteDevServer;
 
 export function createPlugin(
   registerFunction: string,
+  frameworkPluginFactory: () => Plugin,
   options: {
     include?: string,
     port?: number,
@@ -46,7 +47,9 @@ export function createPlugin(
 
     setup: async () => {
       viteConfig.root = viteConfig.root || configDir;
-      viteConfig.plugins = viteConfig.plugins || [];
+      viteConfig.plugins = viteConfig.plugins || [
+        frameworkPluginFactory()
+      ];
       viteConfig.plugins.push(vitePlugin(registerFunction, options.include));
       viteConfig.configFile = viteConfig.configFile || false;
       viteConfig.server = viteConfig.server || {};

packages/web/playwright.config.ts

@@ -16,7 +16,7 @@
 
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-react/vitePlugin';
+import viteCT from '@playwright/experimental-ct-react/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -28,7 +28,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite({ port: 3101 })
+    viteCT({ port: 3101 })
   ],
   use: {
     trace: 'on-first-retry',

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

@@ -15,7 +15,7 @@
  */
 
 import { PlaywrightTestConfig, devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-react/vitePlugin';
+import viteCT from '@playwright/experimental-ct-react/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -27,7 +27,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite(),
+    viteCT(),
   ],
   use: {
     trace: 'on-first-retry',

tests/components/ct-react/playwright.config.ts

@@ -15,6 +15,7 @@
  */
 
 import { PlaywrightTestConfig, devices } from '@playwright/test';
+import viteCT from '@playwright/experimental-ct-react/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -25,18 +26,10 @@ const config: PlaywrightTestConfig = {
   ] : [
     ['html', { open: 'on-failure' }]
   ],
-  webServer: {
-    url: 'http://localhost:3001/',
-    command: 'npm run start',
-    reuseExistingServer: !process.env.CI,
-    env: {
-      BROWSER: 'none',
-      PORT: '3001',
-      REACT_APP_TESTING: '1',
-    }
-  },
+  plugins: [
+    viteCT(),
+  ],
   use: {
-    baseURL: 'http://localhost:3001/',
     trace: 'on-first-retry',
   },
   projects: [

tests/components/ct-react/playwright/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/playwright/index.js"></script>
   </body>
 </html>

tests/components/ct-react/src/index-app.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);

tests/components/ct-react/src/index-tests.tsx

@@ -1,4 +0,0 @@
-import register from '@playwright/experimental-ct-react/register';
-import App from './App';
-
-register({ App });

tests/components/ct-react/src/index.tsx

@@ -1,6 +1,11 @@
-if (process.env.REACT_APP_TESTING)
-  import('./index-tests');
-else
-  import('./index-app');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
 
-export {};
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

tests/components/ct-svelte-kit/playwright.config.ts

@@ -16,6 +16,7 @@
 
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
+import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -26,13 +27,10 @@ const config: PlaywrightTestConfig = {
   ] : [
     ['html', { open: 'on-failure' }]
   ],
-  webServer: {
-    url: 'http://localhost:3000/tests',
-    command: 'npm run dev',
-    reuseExistingServer: !process.env.CI,
-  },
+  plugins: [
+    viteCT(),
+  ],
   use: {
-    baseURL: 'http://localhost:3000/tests',
     trace: 'on-first-retry',
   },
   projects: [

tests/components/ct-svelte-kit/playwright/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/playwright/index.ts"></script>
+  </body>
+</html>

tests/components/ct-svelte-kit/src/routes/tests/index.svelte

@@ -1,15 +0,0 @@
-<script>
-import { onMount } from 'svelte';
-import Counter from '../../lib/Counter.svelte';
-import register from '@playwright/experimental-ct-svelte/register';
-
-onMount(async () => {
-  register({
-    Counter
-  }, {
-    window
-  });
-});
-</script>
-
-<div id="root"></div>

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

@@ -16,8 +16,7 @@
 
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-svelte/vitePlugin';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -29,9 +28,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite({
-      config: { plugins: [ svelte() ] }
-    }),
+    viteCT(),
   ],
   use: {
     trace: 'on-first-retry',

tests/components/ct-svelte/playwright.config.ts

@@ -16,6 +16,7 @@
 
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
+import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -26,13 +27,10 @@ const config: PlaywrightTestConfig = {
   ] : [
     ['html', { open: 'on-failure' }]
   ],
-  webServer: {
-    url: 'http://localhost:8080/tests.html',
-    command: 'npm run dev',
-    reuseExistingServer: !process.env.CI,
-  },
+  plugins: [
+    viteCT(),
+  ],
   use: {
-    baseURL: 'http://localhost:8080/tests.html',
     trace: 'on-first-retry',
   },
   projects: [

tests/components/ct-svelte/playwright/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/playwright/index.ts"></script>
+  </body>
+</html>

tests/components/ct-svelte/public/tests.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width,initial-scale=1'>
-
-  <title>Svelte app</title>
-
-  <link rel='icon' type='image/png' href='/favicon.png'>
-  <link rel='stylesheet' href='/global.css'>
-  <link rel='stylesheet' href='/tests/bundle.css'>
-
-  <script defer src='/tests/bundle.js'></script>
-</head>
-
-<body>
-    <div id="root"></div>
-</body>
-</html>

tests/components/ct-svelte/src/tests.js

@@ -1,4 +0,0 @@
-import register from '@playwright/experimental-ct-svelte/register';
-import App from './App.svelte';
-
-register({ App });

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

@@ -15,6 +15,7 @@
  */
 
 import { PlaywrightTestConfig, devices } from '@playwright/test';
+import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -25,13 +26,10 @@ const config: PlaywrightTestConfig = {
   ] : [
     ['html', { open: 'on-failure' }]
   ],
-  webServer: {
-    url: 'http://localhost:8080/tests.html',
-    command: 'npm run serve',
-    reuseExistingServer: !process.env.CI,
-  },
+  plugins: [
+    viteCT(),
+  ],
   use: {
-    baseURL: 'http://localhost:8080/tests.html',
     trace: 'on-first-retry',
   },
   projects: [

tests/components/ct-vue-cli/playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/playwright/index.js"></script>
+  </body>
+</html>

tests/components/ct-vue-cli/src/tests.js

@@ -1,18 +0,0 @@
-import { createApp, setDevtoolsHook, h } from 'vue'
-import register from '@playwright/experimental-ct-vue/register'
-
-import Button from './components/Button.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-
-register({
-  Button,
-  DefaultSlot,
-  NamedSlots
-}, {
-  // This is only needed if you are using Vue CLI (webpack).
-  // Vite does not need this line.
-  createApp,
-  setDevtoolsHook,
-  h
-})

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

@@ -15,8 +15,7 @@
  */
 
 import { PlaywrightTestConfig, devices } from '@playwright/test';
-import vite from '@playwright/experimental-ct-vue/vitePlugin';
-import vue from '@vitejs/plugin-vue'
+import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
@@ -28,11 +27,7 @@ const config: PlaywrightTestConfig = {
     ['html', { open: 'on-failure' }]
   ],
   plugins: [
-    vite({
-      config: {
-        plugins: [ vue() ]
-      }
-    }),
+    viteCT(),
   ],
   use: {
     trace: 'on-first-retry',

tsconfig.json

@@ -27,6 +27,9 @@
   "exclude": [
     "packages/*/lib",
     "packages/html-reporter",
+    "packages/playwright-ct-react",
+    "packages/playwright-ct-svelte",
+    "packages/playwright-ct-vue",
     "packages/recorder",
     "packages/trace-viewer",
     "packages/web",