chore: make React selectors work on React 18 (#13864)

Fixes #13845

packages/playwright-core/src/server/injected/reactSelectorEngine.ts

@@ -144,9 +144,18 @@ function findReactRoots(root: Document | ShadowRoot, roots: ReactVNode[] = []):
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
   do {
     const node = walker.currentNode;
+    // ReactDOM Legacy client API:
     // @see https://github.com/baruchvlz/resq/blob/5c15a5e04d3f7174087248f5a158c3d6dcc1ec72/src/utils.js#L329
-    if (node.hasOwnProperty('_reactRootContainer'))
+    if (node.hasOwnProperty('_reactRootContainer')) {
       roots.push((node as any)._reactRootContainer._internalRoot.current);
+    } else {
+      // React 17+
+      // React sets rootKey when mounting
+      // @see https://github.com/facebook/react/blob/a724a3b578dce77d427bef313102a4d0e978d9b4/packages/react-dom/src/client/ReactDOMComponentTree.js#L62-L64
+      const rootKey = Object.keys(node).find(key => key.startsWith('__reactContainer'));
+      if (rootKey)
+        roots.push((node as any)[rootKey].stateNode.current);
+    }
 
     // Pre-react 16: rely on `data-reactroot`
     // @see https://github.com/facebook/react/issues/10971

tests/assets/reading-list/react18.html

@@ -0,0 +1,111 @@
+<link rel=stylesheet href='./style.css'>
+<script src="./react_18.1.0.js"></script>
+<script src="./react-dom_18.1.0.js"></script>
+
+<div id=root></div>
+
+<script>
+const e = React.createElement;
+
+function AppHeader(props) {
+  return e(React.Fragment, null,
+    e('h1', null, `reactjs@${React.version}`),
+    e('h3', null, `Reading List: ${props.bookCount}`),
+  );
+}
+
+class NewBook extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = '';
+  }
+
+  onInput(event) {
+    this.state = event.target.value;
+  }
+
+  render() {
+    return e(React.Fragment, null,
+      e('input', {onInput: this.onInput.bind(this)}, null),
+      e('button', {
+        onClick: () => this.props.onNewBook(this.state),
+      }, `new book`),
+    );
+  }
+}
+
+function ColorButton (props) {
+  return e('button', {className: props.color, disabled: !props.enabled}, 'button ' + props.nested.index);
+}
+
+function ButtonGrid() {
+  const buttons = [];
+  for (let i = 0; i < 9; ++i) {
+    buttons.push(e(ColorButton, {
+      color: ['red', 'green', 'blue'][i % 3],
+      enabled: i % 2 === 0,
+      nested: {
+        index: i,
+        value: i + 0.1,
+      }
+    }, null));
+  };
+  return e(React.Fragment, null, ...buttons);
+}
+
+class BookItem extends React.Component {
+  render() {
+    return e('div', null, this.props.name);
+  }
+}
+
+class BookList extends React.Component {
+  render() {
+    return e('ol', null, this.props.books.map(book => e('li', {key: book.name}, e(BookItem, { name: book.name }))));
+  }
+}
+
+const apps = [];
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    apps.push(this);
+    this.mountPoint = React.createRef();
+    this.state = {
+      books: [
+        {name: 'Pride and Prejudice' },
+        {name: 'To Kill a Mockingbird' },
+        {name: 'The Great Gatsby' },
+      ],
+    };
+  }
+
+  render() {
+    return e(React.Fragment, null,
+      e(AppHeader, {bookCount: this.state.books.length}, null),
+      e(NewBook, {onNewBook: bookName => this.onNewBook(bookName)}, null),
+      e(BookList, {books: this.state.books}, null),
+      e(ButtonGrid, null, null),
+      e('div', {ref: this.mountPoint}, null),
+    );
+  }
+
+  onNewBook(bookName) {
+    this.setState({
+      books: [...this.state.books, {name: bookName}],
+    });
+  }
+}
+
+{
+  window.mountApp = element => {
+    const root = ReactDOM.createRoot(element);
+    root.render(e(App, null, null));
+    return root;
+  };
+  window.mountApp(document.getElementById('root'));
+  window.mountNestedApp = () => window.mountApp(apps[apps.length - 1].mountPoint.current);
+}
+
+</script>

tests/page/selectors-react.spec.ts

@@ -21,6 +21,7 @@ const reacts = {
   'react15': '/reading-list/react15.html',
   'react16': '/reading-list/react16.html',
   'react17': '/reading-list/react17.html',
+  'react18': '/reading-list/react18.html',
 };
 
 for (const [name, url] of Object.entries(reacts)) {