title: Loop through a list using puppeteer and click a button
body: <p>I'm trying to use puppeteer to:</p>
  
  <ul>
  <li>create an array from an <code>ul</code> list </li>
  <li>Loop through the list and click a button. </li>
  <li>Each button click opens a modal. Within the modal, another button has to be clicked.</li>
  <li>Delay the next loop before continuing. </li>
  </ul>
  
  <p>I've tried to do this a number of ways using <code>page.evaluate</code> and my array always seems to be empty. Can someone please show me what I'm doing wrong here.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;button&gt;Connect&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Wait&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Connect&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Connect&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Path: <code>puppeteer.js</code></p>
  
  <pre><code>const buttons = await page.evaluate(() =&gt;
    Array.from(document.querySelectorAll("ul &gt; li button"))
  );
  
  for (let button of buttons) {
    if (button.innerText === "Connect") {
      button.click();
      document
        .querySelector(
          "div.artdeco-modal"
        )
        .click();
    }
  }
  </code></pre>