在 Nav 中选择一个 Div答案

【问题标题】：Selecting a Div inside a Nav在 Nav 中选择一个 Div
【发布时间】：2019-05-22 19:46:08
【问题描述】：

我正在尝试使用 Puppeteer 和 Chromium 在 Chrome 中自动化一些功能。我可以登录，选择主导航元素，然后出现子导航菜单。我目前正在控制台中寻找正确的选择器以传递给 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> 项目，这将返回元素的 innerText，但使用 .click() 方法返回未定义。

任何想法都会有所帮助。

【问题讨论】：

嗨，你能告诉我们你的点击功能吗？你到底在哪里使用.click()函数
您可能想使用more complex selector，然后在puppeteer 中使用document.querySelector 或page.$。
更复杂的选择器是一个很棒的工具，我可以在 JS 控制台中将 .click() 发送到该元素，但是，我不确定如何在 puppeteer 中使用它。 await page.$('#popupTaskMenu > nav > div.nth-child(2)') 我相信是正确的，但我如何发送 .click() 到那个？我会阅读和玩耍更多。
所以我尝试了几个不同的选项，但无论如何，我都会收到一条错误消息，指出“ERR 评估失败：DOMException：无法在 'Document' 上执行 'querySelector'：'#popupTaskMenu > nav > div.nth-child(2)' 不是有效的选择器。我尝试的最后一行是await page.evaluate((selector) => document.querySelector('#popupTaskMenu > nav > div.nth-child(2)').click();

标签： javascript selector puppeteer

【解决方案1】：

看起来你只是想瞄准这个人并让他做点什么。

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

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

单击该特定元素后，您可以使用承诺功能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);
  }
})();

【讨论】：

【解决方案2】：

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

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

【讨论】：