javascript - 单击 puppeteer 中包含文本的元素

Question

这个问题已经有答案了:

How do you click on an element with text in Puppeteer? (10 个回答)

已关闭 6 个月前。

我在单击再次单击后动态加载的下拉列表中的元素时遇到问题。

在 chrome 的控制台中，我通过

执行此操作

$('.save-to-list-dropdown__trigger').click()

然后

$( "div:contains('textcontained')" ).click()

但是，我需要由 puppeteer 师来完成此操作。

我已经尝试过

await page.$eval('.save-to-list-dropdown__trigger', form => form.click());

然后

const linkHandlers = await page.$x("//div[contains(text(), 'textcontained')]");

但 linkHandlers 的长度仍为 0。

这是下拉列表的 HTML

<div class="artdeco-dropdown__content-inner">
        <div id="ember169" class="ember-view"><ul role="menu" class="save-to-list-dropdown__content">
  <li role="menuitem">
<div id="ember170" class="a11y-artdeco-dropdown save-to-list-dropdown__create-new-list-button artdeco-dropdown__item artdeco-dropdown__item--is-dropdown ember-view" tabindex="0"><!---->      <li-icon aria-hidden="true" type="plus-icon" class="save-to-list-dropdown__create-new-list-icon mr1" size="small"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><path d="M14,9H9v5H7V9H2V7H7V2H9V7h5V9Z" class="small-icon" style="fill-opacity: 1"></path></svg></li-icon>
      Create  list
</div>  </li>
  <li role="menuitem">
<div id="ember171" class="a11y-artdeco-dropdown artdeco-dropdown__item artdeco-dropdown__item--is-dropdown ember-view" tabindex="0"><!---->      My saved leads 
</div>  </li>
      <li role="menuitem">
        <h3 tabindex="-1" id="custom_lists_header_ember172" class="save-to-list-dropdown__heading display-flex">
<div id="ember173" class="save-to-list-dropdown__heading-text p0 t-sans t-black t-normal text-uppercase artdeco-dropdown__header ember-view">            Your Custom Lists:

</div>        </h3>

        <ul role="menu" class="save-to-list-dropdown__no-max-height" aria-labelledby="custom_lists_header_ember172">
              <li role="menuitem">
<div id="ember175" class="a11y-artdeco-dropdown artdeco-dropdown__item artdeco-dropdown__item--is-dropdown ember-view" tabindex="0"><!---->                  <div class="display-flex">
                    <div class="nowrap-ellipsis">Editors</div>
                      <div class="save-to-list-dropdown__override-small-text flex-shrink-zero" aria-label="26 leads">
                        (26)
                      </div>
                  </div>
</div>              </li>
        </ul>
      </li>
<!----></ul>
</div>

</div>

Answer 1

也许该元素尚未加载。您可以等待 xpath。

const linkHandlers = await page.waitForXPath("//div[contains(text(), 'My saved leads')]");

waitForXPath 不仅会等待，还会返回该元素。