Puppeteer error Error: waiting on selector times out

Question

Currently I have a site that has this in it's HTML. I confirmed it from checking the elements in chrome developer tools.

<div class="hdp-photo-carousel" style="transform: translateX(0px);">
  <div class="photo-tile photo-tile-large">

I visually watch the page open up and I can see the item is there. Then I get this error AFTER 30 seconds:

UnhandledPromiseRejectionWarning: TimeoutError: waiting for selector ".photo-tile" failed: timeout 30000ms exceeded

My code in puppeteer js for this is:

await page.waitForSelector('.photo-tile');

Can anyone tell me what I'm doing wrong?

EDIT I'm adding entire code:

const pptrFirefox = require('puppeteer-firefox');

(async () => {
  const browser = await pptrFirefox.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://zillow.com');
  await page.type('.react-autosuggest__input', '8002 Blandwood Rd. Downey, CA 90240');
  await page.click('.zsg-search-button_primary');
  await page.waitForSelector('.photo-tile');

        console.log('did I get this far?');

})();

Answer 1

You need to add page.waitForNavigation() every time page content updates.

(async () => {
  const browser = await pptrFirefox.launch({headless: false});
  const page = await browser.newPage();
  const navigationPromise = page.waitForNavigation({waitUntil: "domcontentloaded"});
  await page.goto('https://zillow.com');
  await navigationPromise;
  await page.type('.react-autosuggest__input', '8002 Blandwood Rd. Downey, CA 0240');
  await page.click('.zsg-search-button_primary');
  await navigationPromise;
  await page.waitForSelector('.photo-tile');

  console.log('did I get this far?');

})();