feat: support multiple roots in React and Vue selectors (#8313)

Fixes #8230

src/server/injected/reactSelectorEngine.ts

@@ -132,30 +132,36 @@ function filterComponentsTree(treeNode: ComponentNode, searchFn: (node: Componen
   return result;
 }
 
-function findReactRoot(): ReactVNode | undefined {
+function findReactRoots(): ReactVNode[] {
-  const walker = document.createTreeWalker(document);
+  const roots: ReactVNode[] = [];
-  while (walker.nextNode()) {
+  const walker = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT,   {
-    // @see https://github.com/baruchvlz/resq/blob/5c15a5e04d3f7174087248f5a158c3d6dcc1ec72/src/utils.js#L329
+    acceptNode: function(node) {
-    if (walker.currentNode.hasOwnProperty('_reactRootContainer'))
+      // @see https://github.com/baruchvlz/resq/blob/5c15a5e04d3f7174087248f5a158c3d6dcc1ec72/src/utils.js#L329
-      return (walker.currentNode as any)._reactRootContainer._internalRoot.current;
+      if (node.hasOwnProperty('_reactRootContainer')) {
-    for (const key of Object.keys(walker.currentNode)) {
+        roots.push((node as any)._reactRootContainer._internalRoot.current);
-      // @see https://github.com/baruchvlz/resq/blob/5c15a5e04d3f7174087248f5a158c3d6dcc1ec72/src/utils.js#L334
+        return NodeFilter.FILTER_REJECT;
-      if (key.startsWith('__reactInternalInstance') || key.startsWith('__reactFiber'))
+      }
-        return (walker.currentNode as any)[key];
+      for (const key of Object.keys(node)) {
+        // @see https://github.com/baruchvlz/resq/blob/5c15a5e04d3f7174087248f5a158c3d6dcc1ec72/src/utils.js#L334
+        if (key.startsWith('__reactInternalInstance') || key.startsWith('__reactFiber')) {
+          roots.push((node as any)[key]);
+          return NodeFilter.FILTER_REJECT;
+        }
+      }
+      return NodeFilter.FILTER_ACCEPT;
     }
-  }
+  });
-  return undefined;
+  while (walker.nextNode());
+  return roots;
 }
 
 export const ReactEngine: SelectorEngine = {
   queryAll(scope: SelectorRoot, selector: string): Element[] {
     const {name, attributes} = parseComponentSelector(selector);
 
-    const reactRoot = findReactRoot();
+    const reactRoots = findReactRoots();
-    if (!reactRoot)
+    const trees = reactRoots.map(reactRoot => buildComponentsTree(reactRoot));
-      return [];
+    const treeNodes = trees.map(tree => filterComponentsTree(tree, treeNode => {
-    const tree = buildComponentsTree(reactRoot);
-    const treeNodes = filterComponentsTree(tree, treeNode => {
       if (name && treeNode.name !== name)
         return false;
       if (treeNode.rootElements.some(domNode => !scope.contains(domNode)))
@@ -165,7 +171,7 @@ export const ReactEngine: SelectorEngine = {
           return false;
       }
       return true;
-    });
+    })).flat();
     const allRootElements: Set<Element> = new Set();
     for (const treeNode of treeNodes) {
       for (const domNode of treeNode.rootElements)

src/server/injected/vueSelectorEngine.ts

@@ -204,27 +204,34 @@ function filterComponentsTree(treeNode: ComponentNode, searchFn: (node: Componen
   return result;
 }
 
-function findVueRoot(): undefined|{version: number, root: VueVNode} {
+type VueRoot = {version: number, root: VueVNode};
-  const walker = document.createTreeWalker(document);
+function findVueRoots(): VueRoot[] {
-  while (walker.nextNode()) {
+  const roots: VueRoot[] = [];
-    // Vue3 root
+  const walker = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, {
-    if ((walker.currentNode as any)._vnode && (walker.currentNode as any)._vnode.component)
+    acceptNode: function(node) {
-      return {root: (walker.currentNode as any)._vnode.component, version: 3};
+      // Vue3 root
-    // Vue2 root
+      if ((node as any)._vnode && (node as any)._vnode.component) {
-    if ((walker.currentNode as any).__vue__)
+        roots.push({root: (node as any)._vnode.component, version: 3});
-      return {root: (walker.currentNode as any).__vue__, version: 2};
+        return NodeFilter.FILTER_REJECT;
-  }
+      }
-  return undefined;
+      // Vue2 root
+      if ((node as any).__vue__) {
+        roots.push({root: (node as any).__vue__, version: 2});
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  while (walker.nextNode());
+  return roots;
 }
 
 export const VueEngine: SelectorEngine = {
   queryAll(scope: SelectorRoot, selector: string): Element[] {
     const {name, attributes} = parseComponentSelector(selector);
-    const vueRoot = findVueRoot();
+    const vueRoots = findVueRoots();
-    if (!vueRoot)
+    const trees = vueRoots.map(vueRoot => vueRoot.version === 3 ? buildComponentsTreeVue3(vueRoot.root) : buildComponentsTreeVue2(vueRoot.root));
-      return [];
+    const treeNodes = trees.map(tree => filterComponentsTree(tree, treeNode => {
-    const tree = vueRoot.version === 3 ? buildComponentsTreeVue3(vueRoot.root) : buildComponentsTreeVue2(vueRoot.root);
-    const treeNodes = filterComponentsTree(tree, treeNode => {
       if (name && treeNode.name !== name)
         return false;
       if (treeNode.rootElements.some(rootElement => !scope.contains(rootElement)))
@@ -233,9 +240,8 @@ export const VueEngine: SelectorEngine = {
         if (!checkComponentAttribute(treeNode.props, attr))
           return false;
       }
-
       return true;
-    });
+    })).flat();
     const allRootElements: Set<Element> = new Set();
     for (const treeNode of treeNodes) {
       for (const rootElement of treeNode.rootElements)

tests/assets/reading-list/react15.html

@@ -101,9 +101,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
+window.mountApp = element => ReactDOM.render(e(App, null, null), element);
-  e(App, null, null),
+window.mountApp(document.getElementById('root'));
-  document.getElementById('root'),
-);
 
 </script>

tests/assets/reading-list/react16.html

@@ -99,9 +99,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
+window.mountApp = element => ReactDOM.render(e(App, null, null), element);
-  e(App, null, null),
+window.mountApp(document.getElementById('root'));
-  document.getElementById('root'),
-);
 
 </script>

tests/assets/reading-list/react17.html

@@ -93,9 +93,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
+window.mountApp = element => ReactDOM.render(e(App, null, null), element);
-  e(App, null, null),
+window.mountApp(document.getElementById('root'));
-  document.getElementById('root'),
-);
 
 </script>

tests/assets/reading-list/vue2.html

@@ -1,7 +1,7 @@
 <link rel=stylesheet href='./style.css'>
 <script src="./vue_2.6.14.js"></script>
 
-<div id=root></div>
+<div id=root><div></div></div>
 
 <script>
 
@@ -82,9 +82,8 @@ Vue.component('button-grid', {
   }
 });
 
-
+window.mountApp = element => new Vue({
-new Vue({
+  el: element,
-  el: '#root',
 
   template: `
     <div>
@@ -112,5 +111,6 @@ new Vue({
     }
   },
 });
+window.mountApp(document.querySelector('#root div'));
 
 </script>

tests/assets/reading-list/vue3.html

@@ -1,112 +1,115 @@
 <link rel=stylesheet href='./style.css'>
 <script src="./vue_3.1.5.js"></script>
 
-<div id=root></div>
+<div id=root><div></div></div>
 
 <script>
 
-const app = Vue.createApp({
+window.mountApp = element => {
-  template: `
+  const app = Vue.createApp({
-    <app-header :bookCount='books.length'></app-header>
+    template: `
-    <new-book @newbook='addNewBook'></new-book>
+      <app-header :bookCount='books.length'></app-header>
-    <book-list :books='books'></book-list>
+      <new-book @newbook='addNewBook'></new-book>
-    <button-grid></button-grid>
+      <book-list :books='books'></book-list>
-  `,
+      <button-grid></button-grid>
+    `,
 
-  data() {
+    data() {
-    return {
+      return {
-      books: [
+        books: [
-        {name: 'Pride and Prejudice' },
+          {name: 'Pride and Prejudice' },
-        {name: 'To Kill a Mockingbird' },
+          {name: 'To Kill a Mockingbird' },
-        {name: 'The Great Gatsby' },
+          {name: 'The Great Gatsby' },
-      ],
+        ],
-    };
+      };
-  },
-
-  methods: {
-    addNewBook(name) {
-      console.log('here');
-      this.books.push({name});
-    }
-  },
-});
-
-app.component('app-header', {
-  template: `
-    <h1>vuejs@${Vue.version}</h1>
-    <h3>Reading List: {{ bookCount }}</h3>
-  `,
-  props: [ 'bookCount' ],
-});
-
-app.component('new-book', {
-  data() {
-    return {
-      name: '',
-    }
-  },
-  template: `
-    <input v-model='name' @keypress.enter='onNewBook'><button @click='onNewBook'>new book</button>
-  `,
-  emits: ['newbook'],
-  methods: {
-    onNewBook() {
-      this.$emit('newbook', this.name);
-    }
-  },
-});
-app.component('book-item', {
-  template: `
-    <div>
-      {{ name }}
-    </div>
-  `,
-  props: ['name'],
-});
-
-app.component('book-list', {
-  props: ['books'],
-  template: `
-    <ol>
-      <li v-for='book in books' :key='book.name'>
-        <book-item :name='book.name'></book-item>
-      </li>
-    </ol>
-  `,
-});
-
-app.component('color-button', {
-  props: {
-    color: String,
-    enabled: Boolean,
-    nested: {
-      index: Number,
-      value: Number,
     },
-  },
-  template: `
-    <button :disabled='enabled' :class='color'>button {{nested.index}}</button>
-  `,
-});
 
-app.component('button-grid', {
+    methods: {
-  render() {
+      addNewBook(name) {
-    const buttons = [];
+        console.log('here');
-    const ColorButton = Vue.resolveComponent('color-button');
+        this.books.push({name});
-    for (let i = 0; i < 9; ++i) {
+      }
-      buttons.push(Vue.h(ColorButton, {
+    },
-        color: ['red', 'green', 'blue'][i % 3],
+  });
-        enabled: i % 2 === 0,
-        nested: {
-          index: i,
-          value: i + 0.1,
-        }
-      }, null));
-    };
-    return buttons;
-  }
-});
 
-app.mount('#root');
+  app.component('app-header', {
+    template: `
+      <h1>vuejs@${Vue.version}</h1>
+      <h3>Reading List: {{ bookCount }}</h3>
+    `,
+    props: [ 'bookCount' ],
+  });
+
+  app.component('new-book', {
+    data() {
+      return {
+        name: '',
+      }
+    },
+    template: `
+      <input v-model='name' @keypress.enter='onNewBook'><button @click='onNewBook'>new book</button>
+    `,
+    emits: ['newbook'],
+    methods: {
+      onNewBook() {
+        this.$emit('newbook', this.name);
+      }
+    },
+  });
+  app.component('book-item', {
+    template: `
+      <div>
+        {{ name }}
+      </div>
+    `,
+    props: ['name'],
+  });
+
+  app.component('book-list', {
+    props: ['books'],
+    template: `
+      <ol>
+        <li v-for='book in books' :key='book.name'>
+          <book-item :name='book.name'></book-item>
+        </li>
+      </ol>
+    `,
+  });
+
+  app.component('color-button', {
+    props: {
+      color: String,
+      enabled: Boolean,
+      nested: {
+        index: Number,
+        value: Number,
+      },
+    },
+    template: `
+      <button :disabled='enabled' :class='color'>button {{nested.index}}</button>
+    `,
+  });
+
+  app.component('button-grid', {
+    render() {
+      const buttons = [];
+      const ColorButton = Vue.resolveComponent('color-button');
+      for (let i = 0; i < 9; ++i) {
+        buttons.push(Vue.h(ColorButton, {
+          color: ['red', 'green', 'blue'][i % 3],
+          enabled: i % 2 === 0,
+          nested: {
+            index: i,
+            value: i + 0.1,
+          }
+        }, null));
+      };
+      return buttons;
+    }
+  });
+  app.mount(element);
+}
+
+window.mountApp(document.querySelector('#root div'));
 
 </script>

tests/page/selectors-react.spec.ts

@@ -104,6 +104,27 @@ for (const [name, url] of Object.entries(reacts)) {
     it('should support truthy querying', async ({page}) => {
       expect(await page.$$eval(`_react=ColorButton[enabled]`, els => els.length)).toBe(5);
     });
+
+    it('should work with multiroot react', async ({page}) => {
+      await it.step('mount second root', async () => {
+        await expect(page.locator(`_react=BookItem`)).toHaveCount(3);
+        await page.evaluate(() => {
+          const anotherRoot = document.createElement('div');
+          anotherRoot.id = 'root2';
+          document.body.append(anotherRoot);
+          // @ts-ignore
+          window.mountApp(anotherRoot);
+        });
+        await expect(page.locator(`_react=BookItem`)).toHaveCount(6);
+      });
+
+      await it.step('add a new book to second root', async () => {
+        await page.locator('#root2 input').fill('newbook');
+        await page.locator('#root2 >> text=new book').click();
+        await expect(page.locator('css=#root >> _react=BookItem')).toHaveCount(3);
+        await expect(page.locator('css=#root2 >> _react=BookItem')).toHaveCount(4);
+      });
+    });
   });
 }
 

tests/page/selectors-vue.spec.ts

@@ -101,6 +101,28 @@ for (const [name, url] of Object.entries(vues)) {
     it('should support truthy querying', async ({page}) => {
       expect(await page.$$eval(`_vue=color-button[enabled]`, els => els.length)).toBe(5);
     });
+
+    it('should work with multiroot react', async ({page}) => {
+      await it.step('mount second root', async () => {
+        await expect(page.locator(`_vue=book-item`)).toHaveCount(3);
+        await page.evaluate(() => {
+          const anotherRoot = document.createElement('div');
+          anotherRoot.id = 'root2';
+          anotherRoot.append(document.createElement('div'));
+          document.body.append(anotherRoot);
+          // @ts-ignore
+          window.mountApp(anotherRoot.querySelector('div'));
+        });
+        await expect(page.locator(`_vue=book-item`)).toHaveCount(6);
+      });
+
+      await it.step('add a new book to second root', async () => {
+        await page.locator('#root2 input').fill('newbook');
+        await page.locator('#root2 >> text=new book').click();
+        await expect(page.locator('css=#root >> _vue=book-item')).toHaveCount(3);
+        await expect(page.locator('css=#root2 >> _vue=book-item')).toHaveCount(4);
+      });
+    });
   });
 }