selectElement() — react Function Reference

Architecture documentation for the selectElement() function in devtools-utils.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ selectElement() — react Function Reference

Dependency Diagram

graph TD
  d8946471_4001_c586_26c4_bf6221461c02["selectElement()"]
  ef5d45e1_af99_40e8_999b_a798b0c293de["devtools-utils.js"]
  d8946471_4001_c586_26c4_bf6221461c02 -->|defined in| ef5d45e1_af99_40e8_999b_a798b0c293de
  style d8946471_4001_c586_26c4_bf6221461c02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js lines 30–102

async function selectElement(
  page,
  displayName,
  waitForOwnersText,
  waitForSourceLoaded = false
) {
  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.dispatchEvent(
      new MouseEvent('mousedown', {bubbles: true, cancelable: true})
    );
  }, 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];

        if (!ownersList) {
          return false;
        }

        const owners = findAllNodes(ownersList, [
          createTestNameSelector('OwnerView'),
        ]);

        return (
          title &&
          title.innerText.includes(titleText) &&
          owners &&
          owners
            .map(node => node.innerText)
            .join('\n')
            .includes(ownersListText)
        );
      },
      {titleText: displayName, ownersListText: waitForOwnersText}
    );
  }

  if (waitForSourceLoaded) {
    await page.waitForFunction(() => {
      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
      const container = document.getElementById('devtools');

      const sourceStringBlock = findAllNodes(container, [
        createTestNameSelector('InspectedElementView-FormattedSourceString'),
      ])[0];

      // Wait for a new source line to be fetched
      return sourceStringBlock != null && sourceStringBlock.innerText != null;
    });
  }
}