title: Click on element containing text in puppeteer
body: <p>I am having trouble clicking an element from a dropdown list dynamically loaded after another click.</p>
  
  <p>In the console of chrome, I am doing this by </p>
  
  <pre><code>$('.save-to-list-dropdown__trigger').click()
  </code></pre>
  
  <p>then</p>
  
  <pre><code>$( "div:contains('textcontained')" ).click()
  </code></pre>
  
  <p>However, I need this to be done by puppeteer.</p>
  
  <p>I have tried </p>
  
  <pre><code>await page.$eval('.save-to-list-dropdown__trigger', form =&gt; form.click());
  </code></pre>
  
  <p>then</p>
  
  <pre><code>const linkHandlers = await page.$x("//div[contains(text(), 'textcontained')]");
  </code></pre>
  
  <p>but linkHandlers remains lenght 0.</p>
  
  <p>This is the HTML of the dropdown </p>
  
  <pre><code>&lt;div class="artdeco-dropdown__content-inner"&gt;
          &lt;div id="ember169" class="ember-view"&gt;&lt;ul role="menu" class="save-to-list-dropdown__content"&gt;
    &lt;li role="menuitem"&gt;
  &lt;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"&gt;&lt;!----&gt;      &lt;li-icon aria-hidden="true" type="plus-icon" class="save-to-list-dropdown__create-new-list-icon mr1" size="small"&gt;&lt;svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"&gt;&lt;path d="M14,9H9v5H7V9H2V7H7V2H9V7h5V9Z" class="small-icon" style="fill-opacity: 1"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/li-icon&gt;
        Create  list
  &lt;/div&gt;  &lt;/li&gt;
    &lt;li role="menuitem"&gt;
  &lt;div id="ember171" class="a11y-artdeco-dropdown artdeco-dropdown__item artdeco-dropdown__item--is-dropdown ember-view" tabindex="0"&gt;&lt;!----&gt;      My saved leads 
  &lt;/div&gt;  &lt;/li&gt;
        &lt;li role="menuitem"&gt;
          &lt;h3 tabindex="-1" id="custom_lists_header_ember172" class="save-to-list-dropdown__heading display-flex"&gt;
  &lt;div id="ember173" class="save-to-list-dropdown__heading-text p0 t-sans t-black t-normal text-uppercase artdeco-dropdown__header ember-view"&gt;            Your Custom Lists:
  
  &lt;/div&gt;        &lt;/h3&gt;
  
          &lt;ul role="menu" class="save-to-list-dropdown__no-max-height" aria-labelledby="custom_lists_header_ember172"&gt;
                &lt;li role="menuitem"&gt;
  &lt;div id="ember175" class="a11y-artdeco-dropdown artdeco-dropdown__item artdeco-dropdown__item--is-dropdown ember-view" tabindex="0"&gt;&lt;!----&gt;                  &lt;div class="display-flex"&gt;
                      &lt;div class="nowrap-ellipsis"&gt;Editors&lt;/div&gt;
                        &lt;div class="save-to-list-dropdown__override-small-text flex-shrink-zero" aria-label="26 leads"&gt;
                          (26)
                        &lt;/div&gt;
                    &lt;/div&gt;
  &lt;/div&gt;              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;!----&gt;&lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>