Puppeteer > 选择并执行单击同一类的第二个 div

Question

设法进一步使用导入脚本并设法登录到后端并四处移动并填写一些输入，但在单击“外部链接”div元素时卡住了。 单击此 div 后会出现一个提示，其中包含我需要的信息。我计划使用 page.on('dialog', dialog => { ... }) 事件获取此信息。

我在点击外部链接 div 时卡住了。 2个按钮共享相同的 底层。

标记看起来像这样

<div class="row filterBlock">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 noRemoveMultiple ">
      <div class=" form-group1 antdSelectDevise" style="width: 100%;">
         <div style="font-size: 13px; padding: 1px 3px; color: rgb(136, 136, 136); font-weight: bold;">Format</div>
         <div class="ant-select    form-control form-controlC  ant-select-single ant-select-show-arrow ant-select-show-search" name="Format">
            <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="Format" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="Format_list" aria-autocomplete="list" aria-controls="Format_list" aria-activedescendant="Format_list_0" value="" style="opacity: 0;" readonly=""></span><span class="ant-select-selection-item">JSON</span></div>
            <span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
               <span role="img" aria-label="down" class="anticon anticon-down">
                  <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                     <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                  </svg>
               </span>
            </span>
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 ">
      <div class=" form-group1 antdSelectDevise" style="width: 100%;">
         <div style="font-size: 13px; padding: 1px 3px; color: rgb(136, 136, 136); font-weight: bold;">language</div>
         <div class="ant-select    form-control form-controlC  ant-select-multiple ant-select-show-search" name="lang" style="height: auto;">
            <div class="ant-select-selector">
               <span class="ant-select-selection-item">
                  <span class="ant-select-selection-item-content">România</span>
                  <span class="ant-select-selection-item-remove" unselectable="on" aria-hidden="true" style="user-select: none;">
                     <span role="img" aria-label="close" class="anticon anticon-close">
                        <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                           <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                        </svg>
                     </span>
                  </span>
               </span>
               <span class="ant-select-selection-search" style="width: 4px;"><input id="FormatLang" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="FormatLang_list" aria-autocomplete="list" aria-controls="FormatLang_list" aria-activedescendant="FormatLang_list_0" value="" style="opacity: 0;" readonly=""><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></span>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4  CC  ">
      <div class="Bottom " style="margin-top: 23px;">Download</div>
      <div class="Bottom " style="margin-top: 23px;">External link</div>
   </div>
</div>

我尝试了不同的选择器来到达第二个 div 并单击它，但脚本要么挂起，要么没有选择正确的元素。

另外，我尝试使用 await page.mouse.move(1500, 230) 将鼠标移动到该区域，然后执行 page.mouse.down，然后执行 page.mouse.up，但也没有结果。

在这一点上真的很感激任何想法。谢谢

更新：现在找到了一个更好的方法来获取信息:) authtoken 是在登录后设置在 localstorage 中的，因此无需再经历所有这些漏洞。

Answer 1

您可以使用page.$$（它是 document.querySelectorAll 的简写）来选择具有相同选择器的所有元素。然后您可以单击数组中索引[1] 的第二个<div>。这是一个elementHandle.click 动作，我们在精确的 div 上执行点击。

await page.waitForSelector('.class-name')

const selectors = await page.$$('.class-name')
await selectors[1].click()

或者，您可以通过其 XPath 选择器单击该元素并使用 page.$x 选择它。

注意： $x 也返回一个数组，所以我们需要通过[0] 获取它的第一个元素。

const selector = await page.$x('//div[contains(text(), "External link")]')
await selector[0].click()