diff --git a/examples/components-vue/README.md b/examples/components-vue/README.md index 110701bbce..c7bd4b7d6f 100644 --- a/examples/components-vue/README.md +++ b/examples/components-vue/README.md @@ -67,7 +67,7 @@ npm run test -
+
diff --git a/examples/components-vue/tests.html b/examples/components-vue/tests.html index 7c7cd1fccd..346f02bff5 100644 --- a/examples/components-vue/tests.html +++ b/examples/components-vue/tests.html @@ -4,7 +4,7 @@ -
+
diff --git a/packages/html-reporter/playwright.config.ts b/packages/html-reporter/playwright.config.ts index 8d795500a2..f06fece59e 100644 --- a/packages/html-reporter/playwright.config.ts +++ b/packages/html-reporter/playwright.config.ts @@ -28,13 +28,13 @@ const config: PlaywrightTestConfig = { ['html', { open: 'on-failure' }] ], webServer: { - url: 'http://localhost:3101/playwright.html', + url: 'http://localhost:3101/playwright/index.html', command: 'npm run playwright-dev', cwd: __dirname, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3101/playwright.html', + baseURL: 'http://localhost:3101/playwright/index.html', trace: 'on-first-retry', }, projects: [ ], diff --git a/packages/html-reporter/playwright.vite.config.ts b/packages/html-reporter/playwright.vite.config.ts index 80df12e8a7..25d883b5b7 100644 --- a/packages/html-reporter/playwright.vite.config.ts +++ b/packages/html-reporter/playwright.vite.config.ts @@ -16,16 +16,14 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; +import playwright from '@playwright/experimental-ct-react/vitePlugin'; import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), - playwrightPlugin({ - imports: ['./src/theme.css'] - }), + playwright(), ], resolve: { alias: { diff --git a/packages/html-reporter/playwright.html b/packages/html-reporter/playwright/index.html similarity index 93% rename from packages/html-reporter/playwright.html rename to packages/html-reporter/playwright/index.html index b259aa5cf4..9bba58cfa3 100644 --- a/packages/html-reporter/playwright.html +++ b/packages/html-reporter/playwright/index.html @@ -24,6 +24,6 @@
- + diff --git a/packages/html-reporter/playwright.app.ts b/packages/html-reporter/playwright/index.ts similarity index 87% rename from packages/html-reporter/playwright.app.ts rename to packages/html-reporter/playwright/index.ts index 6eba64fc0b..5137631e68 100644 --- a/packages/html-reporter/playwright.app.ts +++ b/packages/html-reporter/playwright/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -// Playwright's Vite plugin is dynamically populating this file with the components. \ No newline at end of file +import '../src/theme.css'; diff --git a/packages/playwright-ct-react/vitePlugin.d.ts b/packages/playwright-ct-react/vitePlugin.d.ts index 735f46d3a8..7e7d635c28 100644 --- a/packages/playwright-ct-react/vitePlugin.d.ts +++ b/packages/playwright-ct-react/vitePlugin.d.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export default function(options?: { include?: string, imports?: string[] }): any; +export default function(options?: { include?: string }): any; diff --git a/packages/playwright-ct-svelte/register.mjs b/packages/playwright-ct-svelte/register.mjs index 2fef72f9b2..358849e332 100644 --- a/packages/playwright-ct-svelte/register.mjs +++ b/packages/playwright-ct-svelte/register.mjs @@ -41,11 +41,11 @@ const playwrightMount = component => { throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...registry.keys()]}`); const wrapper = new componentCtor({ - target: document.getElementById('app'), + target: document.getElementById('root'), props: component.options?.props, }); for (const [key, listener] of Object.entries(component.options?.on || {})) wrapper.$on(key, event => listener(event.detail)); - return '#app > *'; + return '#root > *'; }; diff --git a/packages/playwright-ct-svelte/vitePlugin.d.ts b/packages/playwright-ct-svelte/vitePlugin.d.ts index 735f46d3a8..7e7d635c28 100644 --- a/packages/playwright-ct-svelte/vitePlugin.d.ts +++ b/packages/playwright-ct-svelte/vitePlugin.d.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export default function(options?: { include?: string, imports?: string[] }): any; +export default function(options?: { include?: string }): any; diff --git a/packages/playwright-ct-vue/register.mjs b/packages/playwright-ct-vue/register.mjs index 0032d7f64f..e4856df8e4 100644 --- a/packages/playwright-ct-vue/register.mjs +++ b/packages/playwright-ct-vue/register.mjs @@ -129,6 +129,6 @@ window.playwrightMount = async component => { render: () => render(component) }); instance.setDevtoolsHook(createDevTools(), {}); - app.mount('#app'); - return '#app > *'; + app.mount('#root'); + return '#root > *'; }; diff --git a/packages/playwright-ct-vue/vitePlugin.d.ts b/packages/playwright-ct-vue/vitePlugin.d.ts index 735f46d3a8..7e7d635c28 100644 --- a/packages/playwright-ct-vue/vitePlugin.d.ts +++ b/packages/playwright-ct-vue/vitePlugin.d.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export default function(options?: { include?: string, imports?: string[] }): any; +export default function(options?: { include?: string }): any; diff --git a/packages/playwright-test/src/vitePlugin.ts b/packages/playwright-test/src/vitePlugin.ts index 0c972a8129..202012a48d 100644 --- a/packages/playwright-test/src/vitePlugin.ts +++ b/packages/playwright-test/src/vitePlugin.ts @@ -23,20 +23,18 @@ import { componentInfo, collectComponentUsages } from './tsxTransform'; import type { ComponentInfo } from './tsxTransform'; const imports: Map = new Map(); -let configDir: string; export function createVitePlugin(registerFunction: string) { - return (options?: { include: string, imports?: string[] }) => { + return (options?: { include: string }) => { return vitePlugin({ ...(options || {}), registerFunction }); }; } -function vitePlugin(options: { include?: string, imports?: string[], registerFunction: string }): Plugin { +function vitePlugin(options: { include?: string, registerFunction: string }): Plugin { return { name: 'playwright-gallery', configResolved: async config => { - configDir = path.dirname(config.configFile || ''); const files = await new Promise((f, r) => { glob(options.include || config.root + '/**/*.{test,spec}.[tj]s{x,}', {}, function(err, files) { if (err) @@ -72,12 +70,12 @@ function vitePlugin(options: { include?: string, imports?: string[], registerFun } }, - transform: async (_, id) => { - if (!id.includes('playwright.app.ts') && !id.includes('playwright.app.js')) + transform: async (content, id) => { + if (!id.endsWith('playwright/index.ts') && !id.endsWith('playwright/index.tsx') && !id.endsWith('playwright/index.js')) return; const folder = path.dirname(id); - const lines = []; + const lines = [content, '']; lines.push(`import register from '${options.registerFunction}';`); for (const [alias, value] of imports) { @@ -88,11 +86,6 @@ function vitePlugin(options: { include?: string, imports?: string[], registerFun lines.push(`import ${alias} from '${importPath}';`); } - for (const i of options.imports || []) { - const importPath = configDir && i.startsWith('.') ? './' + path.relative(folder, path.resolve(configDir, i)).replace(/\\/g, '/') : i; - lines.push(`import '${importPath}';`); - } - lines.push(`register({ ${[...imports.keys()].join(',\n ')} });`); return lines.join('\n'); }, diff --git a/packages/web/playwright.config.ts b/packages/web/playwright.config.ts index 6b251e2805..3d89da498c 100644 --- a/packages/web/playwright.config.ts +++ b/packages/web/playwright.config.ts @@ -27,13 +27,13 @@ const config: PlaywrightTestConfig = { ['html', { open: 'on-failure' }] ], webServer: { - url: 'http://localhost:3102/playwright.html', + url: 'http://localhost:3102/playwright/index.html', command: 'npx vite --config playwright.vite.config.ts dev', cwd: __dirname, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3102/playwright.html', + baseURL: 'http://localhost:3102/playwright/index.html', trace: 'on-first-retry', }, projects: [ diff --git a/packages/web/playwright.vite.config.ts b/packages/web/playwright.vite.config.ts index a9ef1661d6..fc576a0ede 100644 --- a/packages/web/playwright.vite.config.ts +++ b/packages/web/playwright.vite.config.ts @@ -16,19 +16,13 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; +import playwright from '@playwright/experimental-ct-react/vitePlugin'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), - playwrightPlugin({ - imports: [ - './src/common.css', - './src/theme.ts', - './src/third_party/vscode/codicon.css', - ], - }), + playwright(), ], server: { port: 3102, diff --git a/packages/web/playwright.html b/packages/web/playwright/index.html similarity index 93% rename from packages/web/playwright.html rename to packages/web/playwright/index.html index bc2047b8e9..b5fe7b6014 100644 --- a/packages/web/playwright.html +++ b/packages/web/playwright/index.html @@ -24,6 +24,6 @@
- + diff --git a/packages/web/playwright.app.ts b/packages/web/playwright/index.ts similarity index 85% rename from packages/web/playwright.app.ts rename to packages/web/playwright/index.ts index 6eba64fc0b..1c6abfbafa 100644 --- a/packages/web/playwright.app.ts +++ b/packages/web/playwright/index.ts @@ -14,4 +14,6 @@ * limitations under the License. */ -// Playwright's Vite plugin is dynamically populating this file with the components. \ No newline at end of file +import '../src/common.css'; +import '../src/theme.ts'; +import '../src/third_party/vscode/codicon.css'; diff --git a/tests/components/ct-react-vite/playwright.app.ts b/tests/components/ct-react-vite/playwright.app.ts deleted file mode 100644 index 39a68ba4e6..0000000000 --- a/tests/components/ct-react-vite/playwright.app.ts +++ /dev/null @@ -1 +0,0 @@ -// Playwright's Vite plugin is dynamically populating this file with the components. \ No newline at end of file diff --git a/tests/components/ct-react-vite/playwright.config.ts b/tests/components/ct-react-vite/playwright.config.ts index 3631b6eada..d02b5fb0e5 100644 --- a/tests/components/ct-react-vite/playwright.config.ts +++ b/tests/components/ct-react-vite/playwright.config.ts @@ -26,12 +26,12 @@ const config: PlaywrightTestConfig = { ['html', { open: 'on-failure' }] ], webServer: { - url: 'http://localhost:3000/playwright.html', + url: 'http://localhost:3000/playwright/index.html', command: 'npm run playwright-dev', reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/playwright.html', + baseURL: 'http://localhost:3000/playwright/index.html', trace: 'on-first-retry', }, projects: [ diff --git a/tests/components/ct-react-vite/playwright.vite.config.ts b/tests/components/ct-react-vite/playwright.vite.config.ts index 11ad4bb41a..1c9fd0014a 100644 --- a/tests/components/ct-react-vite/playwright.vite.config.ts +++ b/tests/components/ct-react-vite/playwright.vite.config.ts @@ -1,13 +1,11 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; +import playwright from '@playwright/experimental-ct-react/vitePlugin'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), - playwrightPlugin({ - imports: ['./src/index.css'] - }), + playwright(), ] }); diff --git a/tests/components/ct-react-vite/playwright.html b/tests/components/ct-react-vite/playwright/index.html similarity index 83% rename from tests/components/ct-react-vite/playwright.html rename to tests/components/ct-react-vite/playwright/index.html index 0dc3d70b47..2cd3885b70 100644 --- a/tests/components/ct-react-vite/playwright.html +++ b/tests/components/ct-react-vite/playwright/index.html @@ -8,6 +8,6 @@
- + diff --git a/tests/components/ct-react-vite/playwright/index.ts b/tests/components/ct-react-vite/playwright/index.ts new file mode 100644 index 0000000000..896b6ec818 --- /dev/null +++ b/tests/components/ct-react-vite/playwright/index.ts @@ -0,0 +1 @@ +import '../src/index.css'; diff --git a/tests/components/ct-svelte-kit/src/routes/tests/index.svelte b/tests/components/ct-svelte-kit/src/routes/tests/index.svelte index 965bb3305e..1563c63d94 100644 --- a/tests/components/ct-svelte-kit/src/routes/tests/index.svelte +++ b/tests/components/ct-svelte-kit/src/routes/tests/index.svelte @@ -12,4 +12,4 @@ onMount(async () => { }); -
+
diff --git a/tests/components/ct-svelte-vite/playwright.app.ts b/tests/components/ct-svelte-vite/playwright.app.ts deleted file mode 100644 index 39a68ba4e6..0000000000 --- a/tests/components/ct-svelte-vite/playwright.app.ts +++ /dev/null @@ -1 +0,0 @@ -// Playwright's Vite plugin is dynamically populating this file with the components. \ No newline at end of file diff --git a/tests/components/ct-svelte-vite/playwright.config.ts b/tests/components/ct-svelte-vite/playwright.config.ts index 9597192242..b56cbe175a 100644 --- a/tests/components/ct-svelte-vite/playwright.config.ts +++ b/tests/components/ct-svelte-vite/playwright.config.ts @@ -27,12 +27,12 @@ const config: PlaywrightTestConfig = { ['html', { open: 'on-failure' }] ], webServer: { - url: 'http://localhost:3000/playwright.html', + url: 'http://localhost:3000/playwright/index.html', command: 'npm run playwright-dev', reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/playwright.html', + baseURL: 'http://localhost:3000/playwright/index.html', trace: 'on-first-retry', }, projects: [ diff --git a/tests/components/ct-svelte-vite/playwright.vite.config.ts b/tests/components/ct-svelte-vite/playwright.vite.config.ts index 69565025f0..46e99c1b4b 100644 --- a/tests/components/ct-svelte-vite/playwright.vite.config.ts +++ b/tests/components/ct-svelte-vite/playwright.vite.config.ts @@ -1,11 +1,11 @@ import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' -import playwrightPlugin from '@playwright/experimental-ct-svelte/vitePlugin'; +import playwright from '@playwright/experimental-ct-svelte/vitePlugin'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ svelte(), - playwrightPlugin(), + playwright(), ] }) diff --git a/tests/components/ct-svelte-vite/playwright.html b/tests/components/ct-svelte-vite/playwright/index.html similarity index 75% rename from tests/components/ct-svelte-vite/playwright.html rename to tests/components/ct-svelte-vite/playwright/index.html index 5974e7e43a..1f7a3a766e 100644 --- a/tests/components/ct-svelte-vite/playwright.html +++ b/tests/components/ct-svelte-vite/playwright/index.html @@ -7,7 +7,7 @@ Svelte + TS + Vite App -
- +
+ diff --git a/tests/components/ct-svelte-vite/playwright/index.ts b/tests/components/ct-svelte-vite/playwright/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/tests/components/ct-svelte/public/tests.html b/tests/components/ct-svelte/public/tests.html index 75d6383407..b378a72f67 100644 --- a/tests/components/ct-svelte/public/tests.html +++ b/tests/components/ct-svelte/public/tests.html @@ -14,6 +14,6 @@ -
+
diff --git a/tests/components/ct-vue-cli/src/tests.html b/tests/components/ct-vue-cli/src/tests.html index f98a0fa12d..6494cb9dd5 100644 --- a/tests/components/ct-vue-cli/src/tests.html +++ b/tests/components/ct-vue-cli/src/tests.html @@ -6,7 +6,7 @@ -
+
diff --git a/tests/components/ct-vue-vite/playwright.app.js b/tests/components/ct-vue-vite/playwright.app.js deleted file mode 100644 index 39a68ba4e6..0000000000 --- a/tests/components/ct-vue-vite/playwright.app.js +++ /dev/null @@ -1 +0,0 @@ -// Playwright's Vite plugin is dynamically populating this file with the components. \ No newline at end of file diff --git a/tests/components/ct-vue-vite/playwright.config.ts b/tests/components/ct-vue-vite/playwright.config.ts index 3631b6eada..d02b5fb0e5 100644 --- a/tests/components/ct-vue-vite/playwright.config.ts +++ b/tests/components/ct-vue-vite/playwright.config.ts @@ -26,12 +26,12 @@ const config: PlaywrightTestConfig = { ['html', { open: 'on-failure' }] ], webServer: { - url: 'http://localhost:3000/playwright.html', + url: 'http://localhost:3000/playwright/index.html', command: 'npm run playwright-dev', reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/playwright.html', + baseURL: 'http://localhost:3000/playwright/index.html', trace: 'on-first-retry', }, projects: [ diff --git a/tests/components/ct-vue-vite/playwright.vite.config.js b/tests/components/ct-vue-vite/playwright.vite.config.js index b48bf44109..9b77c81fdd 100644 --- a/tests/components/ct-vue-vite/playwright.vite.config.js +++ b/tests/components/ct-vue-vite/playwright.vite.config.js @@ -1,18 +1,11 @@ -import { fileURLToPath, URL } from 'url' - import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import playwrightPlugin from '@playwright/experimental-ct-vue/vitePlugin'; +import playwright from '@playwright/experimental-ct-vue/vitePlugin'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), - playwrightPlugin(), - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - }, + playwright(), + ] }) diff --git a/tests/components/ct-vue-vite/playwright.html b/tests/components/ct-vue-vite/playwright/index.html similarity index 74% rename from tests/components/ct-vue-vite/playwright.html rename to tests/components/ct-vue-vite/playwright/index.html index 7df332c3d9..d589c5584c 100644 --- a/tests/components/ct-vue-vite/playwright.html +++ b/tests/components/ct-vue-vite/playwright/index.html @@ -7,7 +7,7 @@ Vite App -
- +
+ diff --git a/tests/components/ct-vue-vite/playwright/index.js b/tests/components/ct-vue-vite/playwright/index.js new file mode 100644 index 0000000000..e69de29bb2