title: Getting a list of list elements using Playwright
body: <p>I am trying to write an application where it will go to amazon and get a list of books on the page. I am using Playwright as the tool. I can get to the right section but I can't get the list of books. Looking online the examples seem to use <code>page.$$(selector)</code> but when I try that, I get an empty array back. Found this information <a href="https://stackoverflow.com/questions/61453673/how-to-get-a-collection-of-elements-with-playwright">here</a> and <a href="https://applitools.medium.com/playing-with-playwright-86257fd0a030" rel="nofollow noreferrer">here</a>. Reading the <a href="https://playwright.dev/docs/api/class-page#pageselector-1" rel="nofollow noreferrer">docs</a> on <code>$$</code>, this seems like the right call as all the list elements have the same class name. I have no idea what I am doing wrong, any advice on this?</p>
  <p>Here is my code so far;</p>
  <pre><code>const AMAZON_KINDLE_EBOOK_STORE_URL = 'https://www.amazon.com/Best-Sellers-Kindle-Store-eBooks/zgbs/digital-text/154606011/ref=zg_bs_nav_kstore_1_kstore/';
  (async () =&gt; {
      const browser = await chromium.launch();
      try {
          const amazonPage = await browser.newPage();
          await amazonPage.goto(AMAZON_KINDLE_EBOOK_STORE_URL);
  
          await amazonPage.waitForSelector('&quot;Best Sellers in&quot;');
          await amazonPage.click('&quot;Self-Help&quot;');
          await amazonPage.click('&quot;Creativity&quot;')
  
          const books = await amazonPage.$$('li[class=&quot;zg-item-immersion&quot;]');
          console.log(books);
      } finally {
          await browser.close();
      }
  })();
  </code></pre>
  <p>For the selector I have tried it numerous ways as well;</p>
  <ul>
  <li><code>li[class=&quot;zg-item-immersion&quot;]</code> - This actually worked checking on the dev console</li>
  <li><code>'zg-item-immersion'</code></li>
  <li><code>#zg-item-immersion</code></li>
  </ul>