title: How to click on all elements and wait for each of them to finish their AJAX request to scrape data? (AJAX is loaded in the same element each time)
body: <p><strong>SITUATION:</strong></p>
  
  <p>I am currently learning to scrape using puppeteer.</p>
  
  <p>For some reason, my current code gives me this error:</p>
  
  <p>"UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: page is not defined"</p>
  
  <p>(<strong>EDIT</strong>)</p>
  
  <p>The issue is that while the page loads and each item is clicked, the data is not scraped because the code does not seem to wait for it to load after each item is clicked.</p>
  
  <p>Here is what the code should do:</p>
  
  <ol>
  <li><p>Load web page (OK)</p></li>
  <li><p>Click on each item (OK)</p></li>
  <li><p>Every time an item is clicked, some data is loaded in a div on the left, this is the data I want to scrape. (does not currently happen)</p></li>
  <li><p>To achieve that, I make the code wait 2 seconds after a click to let the data load. (does not currently happen)</p></li>
  </ol>
  
  <hr>
  
  <p><strong>QUESTION:</strong></p>
  
  <p>How can I fix this and appropriately scrape said data ?</p>
  
  <hr>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>const puppeteer = require('puppeteer');
  
  let scrape = async () =&gt; {
      const browser = await puppeteer.launch({headless: false});
      const page = await browser.newPage();
  
      await page.goto('https://website.com');
      await page.setViewport({width: ..., height: ...});
  
      const result = await page.evaluate(() =&gt; {
          let data = []; 
          let elements = document.querySelector('.class1').querySelectorAll('.class2'); 
  
          for (var element of elements){
              page.click(element);
              page.waitFor(2000);
              let 1 = document.querySelector('.class0').querySelector('.class3').getAttribute("data-1");
              let 2 = document.querySelector('.class0').querySelector('.class4').innerText;
              let 3 = document.querySelector('.class0').querySelector('.class5').innerText;
              let 4 = document.querySelector('.class0').querySelector('.class6').innerText;
              data.push({1: 1, 2: 2, 3: 3, 4: 4}); // Push an object with the data onto our array
          }
  
          return data; // Return our data array
      });
  
      browser.close();
      return result; // Return the data
  };
  
  scrape().then((value) =&gt; {
      console.log(value); // Success!
  });
  </code></pre>