Click on element containing text in puppeteer

Question

I am having trouble clicking an element from a dropdown list dynamically loaded after another click.

In the console of chrome, I am doing this by

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

then

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

However, I need this to be done by puppeteer.

I have tried

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

then

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

but linkHandlers remains lenght 0.

This is the HTML of the dropdown

<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>

score 4 · Answer 1 · answered Jan 31 '20 at 16:30

4

Maybe the element's not loaded yet. You could wait for that xpath.

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

waitForXPath will not only wait but return that element.

answered Jan 31 '20 at 16:30

hardkoded

18,915
3
52
64

No. element is there. – nightowl Jan 31 '20 at 16:47
1

Did you test that Xpath in DevTools? – hardkoded Jan 31 '20 at 16:53

score 4 · Answer 2 · answered Feb 01 '20 at 16:35

here is another way to do it , in this example .item is class of divs you can use other selectors

//wait for elements to appear on the page 
await page.waitForSelector('.item' , {  visible: true , timeout: 0 });

// capture all the items
let elements = await page.$$('.item');
// loop trough items
for (let i = 0; i < elements.length; i++) {

    let  text  = await page.evaluate(el => el.innerText, elements[i]);
    if(text.indexOf("My saved leads") > -1 )
    {
         await elements[i].click();
    }
}

score 0 · Answer 3 · answered Jan 31 '20 at 16:05

0

You have to trigger a double while on the click function

answered Jan 31 '20 at 16:05

pepitolamueve

13
1

score 0 · Accepted Answer · edited Mar 05 '23 at 06:14

0

With help, I have solved it like this:

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

if (linkHandler) {
  await linkHandler.click();
}

edited Mar 05 '23 at 06:14

ggorlen

44,755
7
76
106

answered Feb 03 '20 at 09:50

nightowl

309
1
3
13

Click on element containing text in puppeteer

4 Answers4