在导航中选择 Div

Question

我正在尝试使用 Puppeteer 和 Chromium 自动执行 Chrome 中的某些功能。我可以登录，select 主导航元素和子导航菜单出现。我目前正在控制台中玩游戏以找到正确的 select 或传递给 Puppeteer，但是，我遇到了困难。

HTML 下面:

<div id="popupTaskMenu" class="launcher...">
  <div -not important to task></div>
  <nav class="task_launcher_item_heading">
    <div task-item="0" class="task_launcher_item_click">Text</div>
    <div task-item="1" class="task_launcher_item">Text</div>
  </nav>
<div>

在 Chrome 控制台中，我可以通过使用 document.getElementsByClassName("task_launcher_item_heading")[0].childNodes[0].innerText 使 <nav> 项目变得可访问，这将 return 元素的 innerText，但是使用 .click() 方法返回未定义。

任何想法肯定会有所帮助。

Answer 1

看起来你只是想针对这个人并让他做某事。

 <div task-item="0" class="task_launcher_item_click">Text</div>

如果是这种情况，您能否改用 const Nav = document.getElementById(); await Nav.click(); 函数并为其提供自己的 ID，同时仍保留 task_launcher_item_click class？

点击该特定元素后，您可以使用 promise 函数 https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#frameclickselector-options

const [response] = await Promise.all([
  page.waitForNavigation(waitOptions),
  frame.click(selector, clickOptions),
]);

或属性选择器 https://drafts.csswg.org/selectors-4/#attribute-selectors

const element = await page.$('[href="http://www.iana.org/domains/example"]');
    await element.click();
  } catch (err) {
    console.error(err);
  }
})();

Answer 2

好吧，总有一天我会成为一个聪明人...我的问题是我在应该 #popupTaskMenu > nav > div:nth-child(2)

的时候使用了 #popupTaskMenu > nav > div.nth-child(2)

我应该使用冒号而不是句点！！！！我生命中的 2 个小时！

在导航中选择 Div

Selecting a Div inside a Nav

javascript

selector

puppeteer