chore: restore component testing options (#13910)

examples/components-vue/playwright.config.ts

@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',

examples/components-vue/src/components/Counter.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import Counter from './Counter.vue'
 

examples/components-vue/src/components/Counter.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import Counter from './Counter.vue'
 

examples/components-vue/src/components/HelloWorld.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import HelloWorld from './HelloWorld.vue'
 

examples/components-vue/src/components/HelloWorld.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import HelloWorld from './HelloWorld.vue'
 

examples/components-vue/src/components/NamedSlots.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import NamedSlots from './NamedSlots.vue'
 

examples/components-vue/src/components/NamedSlots.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import NamedSlots from './NamedSlots.vue'
 

examples/components-vue/src/components/WelcomeItem.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import WelcomeItem from './WelcomeItem.vue'

packages/html-reporter/playwright.config.ts

@@ -14,20 +14,17 @@
  * limitations under the License.
  */
 
-import type { PlaywrightTestConfig } from '@playwright/test';
 import path from 'path';
-import { devices } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
+import { devices } from '@playwright/experimental-ct-react';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  reporter: process.env.CI ? [
+  reporter: 'html',
-    ['html', { open: 'never' }],
-  ] : [
-    ['html', { open: 'on-failure' }]
-  ],
   use: {
+    vitePort: 3101,
     trace: 'on-first-retry',
   },
   projects: [ ],

packages/html-reporter/src/chip.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { expect, test } from '@playwright/experimental-ct-react/test';
+import { expect, test } from '@playwright/experimental-ct-react';
 import { AutoChip, Chip as LocalChip } from './chip';
 
 test.use({ viewport: { width: 500, height: 500 } });

packages/html-reporter/src/headerView.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { test, expect } from '@playwright/experimental-ct-react/test';
+import { test, expect } from '@playwright/experimental-ct-react';
 import { HeaderView } from './headerView';
 
 test.use({ viewport: { width: 720, height: 200 } });

packages/html-reporter/src/imageDiffView.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { test, expect } from '@playwright/experimental-ct-react/test';
+import { test, expect } from '@playwright/experimental-ct-react';
 import type { ImageDiff } from './imageDiffView';
 import { ImageDiffView } from './imageDiffView';
 

packages/html-reporter/src/testCaseView.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { test, expect } from '@playwright/experimental-ct-react/test';
+import { test, expect } from '@playwright/experimental-ct-react';
 import { TestCaseView } from './testCaseView';
 import type { TestCase, TestResult } from '../../playwright-test/src/reporters/html';
 

packages/playwright-ct-react/.npmignore

@@ -4,7 +4,5 @@
 !LICENSE
 !register.d.ts
 !register.mjs
-!test.d.ts
+!index.d.ts
-!test.js
+!index.js
-!vitePlugin.d.ts
-!vitePlugin.js

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

@@ -17,11 +17,17 @@
 import type {
   TestType,
   PlaywrightTestArgs,
+  PlaywrightTestConfig as BasePlaywrightTestConfig,
   PlaywrightTestOptions,
   PlaywrightWorkerArgs,
   PlaywrightWorkerOptions,
   Locator,
 } from '@playwright/test';
+import type { InlineConfig } from 'vite';
+
+export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
+  use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+};
 
 interface ComponentFixtures {
   mount(component: JSX.Element): Promise<Locator>;
@@ -31,4 +37,4 @@ export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
   PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
 
-export { expect } from '@playwright/test';
+export { expect, devices } from '@playwright/test';

packages/playwright-ct-react/index.js

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
-const { test: baseTest, expect, _addRunnerPlugin } = require('@playwright/test');
+const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test');
 const { mount } = require('@playwright/test/lib/mount');
-const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
-_addRunnerPlugin(createPlugin(
+_addRunnerPlugin(() => {
-  '@playwright/experimental-ct-react/register',
+  // Only fetch upon request to avoid resolution in workers.
-  () => require('@vitejs/plugin-react')()));
+  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  return createPlugin(
+    '@playwright/experimental-ct-react/register',
+    () => require('@vitejs/plugin-react')());
+});
 
 const test = baseTest.extend({
   _workerPage: [async ({ browser }, use) => {
@@ -45,4 +48,4 @@ const test = baseTest.extend({
   },
 });
 
-module.exports = { test, expect };
+module.exports = { test, expect, devices };

packages/playwright-ct-react/package.json

@@ -14,7 +14,7 @@
   "license": "Apache-2.0",
   "exports": {
     "./register": "./register.mjs",
-    "./test": "./test.js"
+    ".": "./index.js"
   },
   "dependencies": {
     "@vitejs/plugin-react": "^1.0.7",

packages/playwright-ct-svelte/.npmignore

@@ -4,7 +4,5 @@
 !LICENSE
 !register.d.ts
 !register.mjs
-!test.d.ts
+!index.d.ts
-!test.js
+!index.js
-!vitePlugin.d.ts
-!vitePlugin.js

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

@@ -17,11 +17,17 @@
 import type {
   TestType,
   PlaywrightTestArgs,
+  PlaywrightTestConfig as BasePlaywrightTestConfig,
   PlaywrightTestOptions,
   PlaywrightWorkerArgs,
   PlaywrightWorkerOptions,
   Locator,
 } from '@playwright/test';
+import type { InlineConfig } from 'vite';
+
+export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
+  use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+};
 
 interface ComponentFixtures {
   mount(component: any, options?: {
@@ -35,4 +41,4 @@ export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
   PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
 
-export { expect } from '@playwright/test';
+export { expect, devices } from '@playwright/test';

packages/playwright-ct-svelte/index.js

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
-const { test: baseTest, expect, _addRunnerPlugin } = require('@playwright/test');
+const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test');
 const { mount } = require('@playwright/test/lib/mount');
-const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
-_addRunnerPlugin(createPlugin(
+_addRunnerPlugin(() => {
-  '@playwright/experimental-ct-svelte/register',
+  // Only fetch upon request to avoid resolution in workers.
-  () => require('@sveltejs/vite-plugin-svelte').svelte()));
+  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  return createPlugin(
+    '@playwright/experimental-ct-svelte/register',
+    () => require('@sveltejs/vite-plugin-svelte').svelte());
+});
 
 const test = baseTest.extend({
   _workerPage: [async ({ browser }, use) => {
@@ -45,4 +48,4 @@ const test = baseTest.extend({
   },
 });
 
-module.exports = { test, expect };
+module.exports = { test, expect, devices };

packages/playwright-ct-svelte/package.json

@@ -14,7 +14,7 @@
   "license": "Apache-2.0",
   "exports": {
     "./register": "./register.mjs",
-    "./test": "./test.js"
+    ".": "./index.js"
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",

packages/playwright-ct-vue/.npmignore

@@ -4,7 +4,5 @@
 !LICENSE
 !register.d.ts
 !register.mjs
-!test.d.ts
+!index.d.ts
-!test.js
+!index.js
-!vitePlugin.d.ts
-!vitePlugin.js

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

@@ -17,11 +17,17 @@
 import type {
   TestType,
   PlaywrightTestArgs,
+  PlaywrightTestConfig as BasePlaywrightTestConfig,
   PlaywrightTestOptions,
   PlaywrightWorkerArgs,
   PlaywrightWorkerOptions,
   Locator,
 } from '@playwright/test';
+import type { InlineConfig } from 'vite';
+
+export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
+  use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+};
 
 interface ComponentFixtures {
   mount(component: JSX.Element): Promise<Locator>;
@@ -36,4 +42,4 @@ export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
   PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
 
-export { expect } from '@playwright/test';
+export { expect, devices } from '@playwright/test';

packages/playwright-ct-vue/index.js

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
-const { test: baseTest, expect, _addRunnerPlugin } = require('@playwright/test');
+const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test');
 const { mount } = require('@playwright/test/lib/mount');
-const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
 
-_addRunnerPlugin(createPlugin(
+_addRunnerPlugin(() => {
-  '@playwright/experimental-ct-vue/register',
+  // Only fetch upon request to avoid resolution in workers.
-  () => require('@vitejs/plugin-vue')()));
+  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  return createPlugin(
+    '@playwright/experimental-ct-vue/register',
+    () => require('@vitejs/plugin-vue')());
+});
 
 const test = baseTest.extend({
   _workerPage: [async ({ browser }, use) => {
@@ -45,4 +48,4 @@ const test = baseTest.extend({
   },
 });
 
-module.exports = { test, expect };
+module.exports = { test, expect, devices };

packages/playwright-ct-vue/package.json

@@ -14,7 +14,7 @@
   "license": "Apache-2.0",
   "exports": {
     "./register": "./register.mjs",
-    "./test": "./test.js"
+    ".": "./index.js"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^2.3.1",

packages/playwright-test/src/DEPS.list

@@ -4,4 +4,3 @@ matchers/
 reporters/
 third_party/
 plugins/
-plugins/webServerPlugin.ts

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

@@ -33,8 +33,10 @@ export const setRunnerToAddPluginsTo = (runner: Runner) => {
   runnerInstanceToAddPluginsTo = runner;
 };
 
-export const addRunnerPlugin = (plugin: TestRunnerPlugin) => {
+export const addRunnerPlugin = (plugin: TestRunnerPlugin | (() => TestRunnerPlugin)) => {
   // Only present in runner, absent in worker.
-  if (runnerInstanceToAddPluginsTo)
+  if (runnerInstanceToAddPluginsTo) {
+    plugin = typeof plugin === 'function' ? plugin() : plugin;
     runnerInstanceToAddPluginsTo.addPlugin(plugin);
+  }
 };

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

@@ -34,9 +34,9 @@ export function createPlugin(
     name: 'playwright-vite-plugin',
 
     setup: async (config: FullConfig, configDirectory: string, suite: Suite) => {
-      // TODO: declare and pick these from the config.
+      const use = config.projects[0].use as any;
-      const viteConfig: InlineConfig = {};
+      const viteConfig: InlineConfig = use.viteConfig || {};
-      const port = 3100;
+      const port = use.vitePort || 3100;
 
       configDir = configDirectory;
 

packages/web/playwright.config.ts

@@ -14,19 +14,16 @@
  * limitations under the License.
  */
 
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
-import { devices } from '@playwright/test';
+import { devices } from '@playwright/experimental-ct-react';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  reporter: process.env.CI ? [
+  reporter: 'html',
-    ['html', { open: 'never' }],
-  ] : [
-    ['html', { open: 'on-failure' }]
-  ],
   use: {
+    vitePort: 3102,
     trace: 'on-first-retry',
   },
   projects: [

packages/web/src/components/expandable.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { expect, test } from '@playwright/experimental-ct-react/test';
+import { expect, test } from '@playwright/experimental-ct-react';
 import { Expandable } from './expandable';
 
 test.use({ viewport: { width: 500, height: 500 } });

packages/web/src/components/source.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { expect, test } from '@playwright/experimental-ct-react/test';
+import { expect, test } from '@playwright/experimental-ct-react';
 import { Source } from './source';
 
 test.use({ viewport: { width: 500, height: 500 } });

packages/web/src/components/splitView.spec.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { expect, test } from '@playwright/experimental-ct-react/test';
+import { expect, test } from '@playwright/experimental-ct-react';
 import { SplitView } from './splitView';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',

tests/components/ct-react-vite/src/App.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-react/test';
+import { test, expect } from '@playwright/experimental-ct-react';
 import App from './App';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',

tests/components/ct-react/src/App.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-react/test';
+import { test, expect } from '@playwright/experimental-ct-react';
 import App from './App';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte';
 import { devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {

tests/components/ct-svelte-kit/src/lib/Counter.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from '@playwright/experimental-ct-svelte/test';
+import { test, expect } from '@playwright/experimental-ct-svelte';
 import Counter from './Counter.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte';
 import { devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {

tests/components/ct-svelte-vite/src/lib/Counter.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from '@playwright/experimental-ct-svelte/test';
+import { test, expect } from '@playwright/experimental-ct-svelte';
 import Counter from './Counter.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte';
 import { devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {

tests/components/ct-svelte/src/App.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from '@playwright/experimental-ct-svelte/test';
+import { test, expect } from '@playwright/experimental-ct-svelte';
 import App from './App.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',

tests/components/ct-vue-cli/src/notation-jsx.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 import Button from './components/Button.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'

tests/components/ct-vue-cli/src/notation-vue.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import Button from './components/Button.vue'
 import DefaultSlot from './components/DefaultSlot.vue'

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src',

tests/components/ct-vue-vite/src/notation-jsx.spec.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 import Button from './components/Button.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'

tests/components/ct-vue-vite/src/notation-vue.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-vue/test'
+import { test, expect } from '@playwright/experimental-ct-vue'
 
 import Button from './components/Button.vue'
 import DefaultSlot from './components/DefaultSlot.vue'