chore: mount should return locator pointing to the component element / fragment (#12718)

package-lock.json

@@ -7388,7 +7388,7 @@
     },
     "packages/playwright-ct-react": {
       "name": "@playwright/experimental-ct-react",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "Apache-2.0",
       "devDependencies": {
         "@playwright/test": "1.21.0-next"
@@ -7399,7 +7399,7 @@
     },
     "packages/playwright-ct-svelte": {
       "name": "@playwright/experimental-ct-svelte",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "Apache-2.0",
       "devDependencies": {
         "@playwright/test": "1.21.0-next"
@@ -7410,7 +7410,7 @@
     },
     "packages/playwright-ct-vue": {
       "name": "@playwright/experimental-ct-vue",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "Apache-2.0",
       "devDependencies": {
         "@playwright/test": "1.21.0-next"

packages/playwright-ct-react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@playwright/experimental-ct-react",
     "private": true,
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Playwright Component Testing for React",
     "repository": "github:Microsoft/playwright",
     "homepage": "https://playwright.dev",

packages/playwright-ct-react/register.mjs

@@ -35,5 +35,5 @@ function render(component) {
 
 window.playwrightMount = component => {
   ReactDOM.render(render(component), document.getElementById('root'));
-  return '#root';
+  return '#root > *';
 };

packages/playwright-ct-svelte/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@playwright/experimental-ct-svelte",
     "private": true,
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Playwright Component Testing for Svelte",
     "repository": "github:Microsoft/playwright",
     "homepage": "https://playwright.dev",

packages/playwright-ct-svelte/register.mjs

@@ -35,5 +35,5 @@ const playwrightMount = component => {
 
   for (const [key, listener] of Object.entries(component.options?.on || {}))
     wrapper.$on(key, event => listener(event.detail));
-  return '#app';
+  return '#app > *';
 };

packages/playwright-ct-vue/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@playwright/experimental-ct-vue",
     "private": true,
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Playwright Component Testing for Svelte",
     "repository": "github:Microsoft/playwright",
     "homepage": "https://playwright.dev",

packages/playwright-ct-vue/register.mjs

@@ -108,5 +108,5 @@ window.playwrightMount = async component => {
   });
   instance.setDevtoolsHook(createDevTools(), {});
   app.mount('#app');
-  return '#app';
+  return '#app > *';
 };

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

@@ -30,6 +30,6 @@ test('should work', async ({ mount }) => {
     }
   });
   await expect(component).toContainText('my suffix');
-  await component.locator('button').click();
+  await component.click();
   expect(values).toEqual([{ count: 1 }]);
 });

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

@@ -15,7 +15,7 @@ test('event should work', async ({ mount }) => {
   const component = await mount(<Button title='Submit' v-on:submit={data => {
     messages.push(data)
   }}></Button>)
-  await component.locator('button').click()
+  await component.click()
   expect(messages).toEqual(['hello'])
 })
 

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

@@ -25,7 +25,7 @@ test('event should work', async ({ mount }) => {
       submit: data => messages.push(data)
     }
   })
-  await component.locator('button').click()
+  await component.click()
   expect(messages).toEqual(['hello'])
 })
 

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

@@ -15,7 +15,7 @@ test('event should work', async ({ mount }) => {
   const component = await mount(<Button title='Submit' v-on:submit={data => {
     messages.push(data)
   }}></Button>)
-  await component.locator('button').click()
+  await component.click()
   expect(messages).toEqual(['hello'])
 })
 

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

@@ -25,7 +25,7 @@ test('event should work', async ({ mount }) => {
       submit: data => messages.push(data)
     }
   })
-  await component.locator('button').click()
+  await component.click()
   expect(messages).toEqual(['hello'])
 })
 

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

@@ -1,11 +0,0 @@
-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
-})

tests-components/ct-vue-vite/tests.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/tests.js"></script>
+    <script type="module" src="/tests.js"></script>
   </body>
 </html>

tests-components/ct-vue-vite/tests.js

@@ -0,0 +1,11 @@
+import register from '@playwright/experimental-ct-vue/register'
+
+import Button from './src/components/Button.vue'
+import DefaultSlot from './src/components/DefaultSlot.vue'
+import NamedSlots from './src/components/NamedSlots.vue'
+
+register({
+  Button,
+  DefaultSlot,
+  NamedSlots
+})

tests-components/test-all.spec.js

@@ -1,4 +1,4 @@
-const { test } = require('@playwright/test');
+const { test, expect } = require('@playwright/test');
 
 const { spawn } = require('child_process');
 const fs = require('fs');
@@ -9,14 +9,14 @@ for (const dir of fs.readdirSync(__dirname)) {
   if (!fs.statSync(folder).isDirectory())
     continue;
   test.describe.serial(path.basename(folder), () => {
-    test.slow();
+    test.setTimeout(120000);
     test('install', async () => {
       await run('npm', ['i'], folder);
     });
 
     for (const project of ['chromium', 'firefox', 'webkit']) {
       test(project, async () => {
-        test.slow();
+        test.setTimeout(120000);
         await run('npx', ['playwright', 'test', '--project=' + project, '--reporter=list'], folder);
       });
     }
@@ -35,5 +35,6 @@ async function run(command, args, folder) {
   process.on('exit', () => {
     child.kill();
   });
-  await new Promise(f => child.on('close', f));
+  const code = await new Promise(f => child.on('close', f));
+  expect(code).toEqual(0);
 }