title: Using Puppeteer to collect links of a page and open those links to scrape data
body: <p>I have to scrape data of products from a list, but the data resides in the pages of those products. For example, let's say I'd like to fetch the <code>.product-image</code> of the product page.</p>
  <p>The code so far successfully fetches each URL and adds to an array, but I'm not sure where to go from here, as using <code>page</code> returns <code>Error: Evaluation failed: ReferenceError: page is not defined</code> when using it outside of <code>urls</code> for some reason.</p>
  <pre><code>  const page = await browser.newPage();
    page.waitForNavigation({ timeout: 0, waitUntil: &quot;domcontentloaded&quot; });
  
    await page.goto(siteSearchUrl + 1);
    await page.screenshot({ path: &quot;carpet.png&quot; });
  
    const urls = await page.evaluate(() =&gt; {
      const items = document.querySelectorAll(&quot;li.product-item&quot;);
      const productLinks = [];
      console.log(page);
      items.forEach((item) =&gt; {
        const productLink = item
          .querySelector(&quot;a.product-image&quot;) // NOT the product image, it's the link.
          .getAttribute(&quot;href&quot;);
        productLinks.push(`${siteUrl + productLink}`);
      });
  
      productLinks.forEach((link) =&gt; {
        page.screenshot({ path: link + &quot;.png&quot; });
      }, page);
    });
  
    await browser.close();
    return Promise.resolve(urls);
  })();
  </code></pre>
  <p>How exactly do I collect the data from each of the links?</p>