如何与Reactjs制作的网站元素进行交互？

Question

我试图专注于用reactjs制作的网站上带有角色文本框的div，但没有任何效果。

我试过这个：

async function focusOnElement(selector) {
  let element = undefined;
  while (!element) {
    element = Array.from(document.querySelectorAll(selector)).at(-1);
    await delay(1000);
  }
  if (!element) {
    console.warn("Element not found for focusing.");
    return;
  }

  element.focus();
  
 
  const focusEvent = new Event("focus", { bubbles: true, cancelable: true });
  element.dispatchEvent(focusEvent);

  console.log(`Focused on element: ${selector}`);
}

但是没有成功。 我也尝试过这个：

async function focusOnElement(selector) {
  let element = undefined;
  while (!element) {
    element = Array.from(document.querySelectorAll(selector)).at(-1);
    await delay(1000); // Wait for the element to exist
  }
  if (!element) {
    console.warn("Element not found for focusing.");
    return;
  }

  // Focus on the element explicitly
  element.focus();

  // Manually trigger React's synthetic focus event
  const reactKey = Object.keys(element).find(
    (key) =>
      key.startsWith("_reactProps$") || key.startsWith("_reactFiber$")
  );

  if (reactKey) {
    const props = element[reactKey];
    if (props && props.onFocus) {
      // Dispatch a synthetic focus event that React can handle
      props.onFocus({
        target: element,
        currentTarget: element,
        bubbles: true,
        cancelable: true,
      });
    }
  }

  console.log(`Focused on element: ${selector}`);
}

但还是无法集中注意力

网站是 https://outlook.live.com/mail/0/options/mail/rules 单击添加新规则并根据条件选择发件人，我想要关注的 div 将可见

Answer 1

朋友，这是一个如何通过元素的属性获取元素的实际示例：

function updateTextBoxes ()
{
  console.clear();
  document.querySelectorAll('[role="textbox"]').forEach
  (
    element => updateTextBox(element)
  );
}

function updateTextBox ( element )
{
  console.log('Element Text Content =', element.textContent);
}

updateTextBoxes();

.TB
{
  outline: 1px solid black;
  padding: 5px;
  margin: 0 0 5px 0;
}

<div role="textbox" aria-multiline="true" aria-label="Some Label" tabindex="0" class="TB" spellcheck="false" contenteditable="true" style="max-height: 189px;">FIRST DIV CONTENT</div>
<div role="textbox" aria-multiline="true" aria-label="Some Label" tabindex="0" class="TB" spellcheck="false" contenteditable="true" style="max-height: 189px;">SECOND DIV CONTENT</div>
<div role="textbox" aria-multiline="true" aria-label="Some Label" tabindex="0" class="TB" spellcheck="false" contenteditable="true" style="max-height: 189px;">THIRD DIV CONTENT</div>
<button onclick="updateTextBoxes()">Update Text Boxes</button>