Use ReactDOM Test Selector API in DevTools e2e tests

Builds on top of the existing Playwright tests to plug in the test selector API.

My goals in doing this are to...
1. Experiment with the new API to see what works and what doesn't.
2. Add some test selector attributes (and remove DOM-structure based selectors).
3. Focus the tests on DevTools itself (rather than the test app).

I also took this opportunity to add a few new test types like named hooks and component search, just to play around with the Playwright API.

packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js

@@ -4,49 +4,280 @@ const {test, expect} = require('@playwright/test');
 const config = require('../../playwright.config');
 test.use(config);
 
-test.describe('Testing Todo-List App', () => {
-  let page, frameElementHandle, frame;
-  test.beforeAll(async ({browser}) => {
+test.describe('ListApp', () => {
+  let page;
+
+  test.beforeEach(async ({browser}) => {
     page = await browser.newPage();
+
     await page.goto('http://localhost:8080/e2e.html', {
       waitUntil: 'domcontentloaded',
     });
-    await page.waitForSelector('iframe#iframe');
-    frameElementHandle = await page.$('#iframe');
-    frame = await frameElementHandle.contentFrame();
+
+    await page.waitForSelector('#iframe');
+  });
+
+  // TODO Maybe this function could be moved to a shared e2e test helpers file?
+  async function selectDevToolsElement(displayName, waitForOwnersText) {
+    await page.evaluate(listItemText => {
+      const {
+        createTestNameSelector,
+        createTextSelector,
+        findAllNodes,
+      } = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const listItem = findAllNodes(container, [
+        createTestNameSelector('ComponentTreeListItem'),
+        createTextSelector(listItemText),
+      ])[0];
+      listItem.click();
+    }, displayName);
+
+    if (waitForOwnersText) {
+      // Wait for selected element's props to load.
+      await page.waitForFunction(
+        ({titleText, ownersListText}) => {
+          const {
+            createTestNameSelector,
+            findAllNodes,
+          } = window.REACT_DOM_DEVTOOLS;
+          const container = document.getElementById('devtools');
+
+          const title = findAllNodes(container, [
+            createTestNameSelector('InspectedElement-Title'),
+          ])[0];
+
+          const ownersList = findAllNodes(container, [
+            createTestNameSelector('InspectedElementView-Owners'),
+          ])[0];
+
+          return (
+            title &&
+            title.innerText.includes(titleText) &&
+            ownersList &&
+            ownersList.innerText.includes(ownersListText)
+          );
+        },
+        {titleText: displayName, ownersListText: waitForOwnersText}
+      );
+    }
+  }
+
+  async function getDevToolsElementCount(displayName) {
+    return await page.evaluate(listItemText => {
+      const {
+        createTestNameSelector,
+        createTextSelector,
+        findAllNodes,
+      } = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+      const rows = findAllNodes(container, [
+        createTestNameSelector('ComponentTreeListItem'),
+        createTextSelector(listItemText),
+      ]);
+      return rows.length;
+    }, displayName);
+  }
+
+  test('The List should contain 3 items by default', async () => {
+    const appRowCount = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+      const container = document.getElementById('iframe').contentDocument;
+      const rows = findAllNodes(container, [
+        createTestNameSelector('ListItem'),
+      ]);
+      return rows.length;
+    });
+    expect(appRowCount).toBe(3);
+
+    const devToolsRowCount = await getDevToolsElementCount('ListItem');
+    expect(devToolsRowCount).toBe(3);
+  });
+
+  test('New list items should be added to DevTools', async () => {
+    await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+      const container = document.getElementById('iframe').contentDocument;
+
+      const input = findAllNodes(container, [
+        createTestNameSelector('AddItemInput'),
+      ])[0];
+      input.value = 'four';
+
+      const button = findAllNodes(container, [
+        createTestNameSelector('AddItemButton'),
+      ])[0];
+
+      button.click();
+    });
+
+    const count = await getDevToolsElementCount('ListItem');
+    expect(count).toBe(4);
+  });
+
+  test('Items should be inspectable', async () => {
+    // Select the first list item in DevTools.
+    await selectDevToolsElement('ListItem', 'List\nApp');
+
+    // Then read the inspected values.
+    const [propName, propValue, sourceText] = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const editableName = findAllNodes(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('EditableName'),
+      ])[0];
+      const editableValue = findAllNodes(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('EditableValue'),
+      ])[0];
+      const source = findAllNodes(container, [
+        createTestNameSelector('InspectedElementView-Source'),
+      ])[0];
+
+      return [editableName.value, editableValue.value, source.innerText];
+    });
+
+    expect(propName).toBe('label');
+    expect(propValue).toBe('"one"');
+    expect(sourceText).toContain('ListApp.js');
   });
 
-  test('The Todo List should contain 3 items by default', async () => {
-    const list = frame.locator('.listitem');
-    await expect(list).toHaveCount(3);
+  test('Props should be editable', async () => {
+    // Select the first list item in DevTools.
+    await selectDevToolsElement('ListItem', 'List\nApp');
+
+    // Then edit the label prop.
+    await page.evaluate(() => {
+      const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      focusWithin(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('EditableValue'),
+      ]);
+    });
+
+    page.keyboard.press('Backspace'); // "
+    page.keyboard.press('Backspace'); // e
+    page.keyboard.press('Backspace'); // n
+    page.keyboard.press('Backspace'); // o
+    page.keyboard.insertText('new"');
+    page.keyboard.press('Enter');
+
+    await page.waitForFunction(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+      const container = document.getElementById('iframe').contentDocument;
+      const rows = findAllNodes(container, [
+        createTestNameSelector('ListItem'),
+      ])[0];
+      return rows.innerText === 'new';
+    });
   });
 
-  test('Add another item Fourth to list', async () => {
-    await frame.type('.input', 'Fourth');
-    await frame.click('button.iconbutton');
-    const listItems = await frame.locator('.label');
-    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
+  test('Can load and parse hook names', async () => {
+    // Select the List component DevTools.
+    await selectDevToolsElement('List', 'App');
+
+    // Then click to load and parse hook names.
+    await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const button = findAllNodes(container, [
+        createTestNameSelector('LoadHookNamesButton'),
+      ])[0];
+      button.click();
+    });
+
+    // Make sure the expected hook names are parsed and displayed eventually.
+    await page.waitForFunction(
+      hookNames => {
+        const {
+          createTestNameSelector,
+          findAllNodes,
+        } = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const hooksTree = findAllNodes(container, [
+          createTestNameSelector('InspectedElementHooksTree'),
+        ])[0];
+
+        if (!hooksTree) {
+          return false;
+        }
+
+        const hooksTreeText = hooksTree.innerText;
+
+        for (let i = 0; i < hookNames.length; i++) {
+          if (!hooksTreeText.includes(hookNames[i])) {
+            return false;
+          }
+        }
+
+        return true;
+      },
+      ['State(items)', 'Ref(inputRef)']
+    );
   });
 
-  test('Inspecting list elements with devtools', async () => {
-    // Component props are used as string in devtools.
-    const listItemsProps = [
-      '',
-      '{id: 1, isComplete: true, text: "First"}',
-      '{id: 2, isComplete: true, text: "Second"}',
-      '{id: 3, isComplete: false, text: "Third"}',
-      '{id: 4, isComplete: false, text: "Fourth"}',
-    ];
-    const countOfItems = await frame.$$eval('.listitem', el => el.length);
-    // For every item in list click on devtools inspect icon
-    // click on the list item to quickly navigate to the list item component in devtools
-    // comparing displayed props with the array of props.
-    for (let i = 1; i <= countOfItems; ++i) {
-      await page.click('[class^=ToggleContent]', {delay: 100});
-      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
-      await page.waitForSelector('span[class^=Value]');
-      const text = await page.innerText('span[class^=Value]');
-      await expect(text).toEqual(listItemsProps[i]);
+  test('Should be able to search for component by name', async () => {
+    async function getComponentSearchResultsCount() {
+      return await page.evaluate(() => {
+        const {
+          createTestNameSelector,
+          findAllNodes,
+        } = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const span = findAllNodes(container, [
+          createTestNameSelector('ComponentSearchInput-ResultsCount'),
+        ])[0];
+        return span.innerText;
+      });
     }
+
+    await page.evaluate(() => {
+      const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      focusWithin(container, [
+        createTestNameSelector('ComponentSearchInput-Input'),
+      ]);
+    });
+
+    page.keyboard.insertText('List');
+    let count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 4');
+
+    page.keyboard.insertText('Item');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('2 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('3 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('3 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('2 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 3');
   });
 });

packages/react-devtools-inline/playwright.config.js

@@ -1,8 +1,10 @@
 const config = {
   use: {
-    headless: false,
+    headless: true,
     browserName: 'chromium',
     launchOptions: {
+      // This bit of delay gives async React time to render
+      // and DevTools operations to be sent across the bridge.
       slowMo: 100,
     },
   },

packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js

@@ -33,6 +33,7 @@ export default function ComponentSearchInput(props: Props) {
       searchIndex={searchIndex}
       searchResultsCount={searchResults.length}
       searchText={searchText}
+      testName="ComponentSearchInput"
     />
   );
 }

packages/react-devtools-shared/src/devtools/views/Components/EditableName.js

@@ -93,6 +93,7 @@ export default function EditableName({
       onChange={handleChange}
       onKeyDown={handleKeyDown}
       placeholder="new entry"
+      testName="EditableName"
       type="text"
       value={editableName}
     />

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

@@ -94,6 +94,7 @@ export default function EditableValue({
       <input
         autoComplete="new-password"
         className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+        data-testname="EditableValue"
         onBlur={applyChanges}
         onChange={handleChange}
         onKeyDown={handleKeyDown}

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -74,7 +74,7 @@ export default function Element({data, index, style}: Props) {
     }
   };
 
-  const handleMouseDown = ({metaKey}) => {
+  const handleClick = ({metaKey}) => {
     if (id !== null) {
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) {
       className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       style={style}
+      data-testname="ComponentTreeListItem"
       data-depth={depth}>
       {/* This wrapper is used by Tree for measurement purposes. */}
       <div

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -252,7 +252,7 @@ export default function InspectedElementWrapper(_: Props) {
 
   return (
     <div className={styles.InspectedElement}>
-      <div className={styles.TitleRow}>
+      <div className={styles.TitleRow} data-testname="InspectedElement-Title">
         {strictModeBadge}
 
         {element.key && (

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

@@ -85,7 +85,9 @@ export function InspectedElementHooksTree({
     return null;
   } else {
     return (
-      <div className={styles.HooksTreeView}>
+      <div
+        className={styles.HooksTreeView}
+        data-testname="InspectedElementHooksTree">
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
           {enableNamedHooksFeature &&
@@ -96,6 +98,7 @@ export function InspectedElementHooksTree({
                 isChecked={parseHookNamesOptimistic}
                 isDisabled={parseHookNamesOptimistic || hookParsingFailed}
                 onChange={handleChange}
+                testName="LoadHookNamesButton"
                 title={toggleTitle}>
                 <ButtonIcon type="parse-hook-names" />
               </Toggle>