我在单击另一个单击后动态加载的下拉列表中单击某个元素时遇到麻烦。
在chrome控制台中,我通过
$('.save-to-list-dropdown__trigger').click()
然后
$( "div:contains('textcontained')" ).click()
但是,我需要由木偶戏来完成。
我试过了
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>
在帮助下,我已经解决了这个问题。
const [linkHandler] = await page.$x("//div[contains(., 'textcontained')]");
if(linkHandler)
{
await linkHandler.click();
}