How to implement page.type() in Puppeteer?

Question

I want to use Puppeteer to type a zip code into the zip code field in the following form.

https://www.hudhomestore.com/Listing/BrokerSearch.aspx?sLanguage=ENGLISH

After the script runs, I expect to see the zip code appear in the zip code field of the form. However, instead, I get the following error message.

UnhandledPromiseRejectionWarning: TimeoutError: waiting for selector "#txtZipCode" failed: timeout 30000ms exceeded

I added a

page.waitForNavigation({ waitUntil: 'domcontentloaded', });

command each time the page updates according to this SO answer. But it does not help.

What am I doing wrong?

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    waitUntil: 'load',
  });
  const page = await browser.newPage();
  const navigationPromise = page.waitForNavigation({ waitUntil: 'domcontentloaded', });
  await page.goto('https://www.hudhomestore.com/Listing/BrokerSearch.aspx?sLanguage=ENGLISH');
  navigationPromise;
  await page.waitForSelector('#txtZipCode');
  await page.type('#txtZipCode', '79936',);
})()

Answer 1

The element is in an iframe. Try this:

const page = await browser.newPage();
await page.goto('https://www.hudhomestore.com/Listing/BrokerSearch.aspx?sLanguage=ENGLISH');
await page.waitForSelector('#inWin107');
const iframeElement = await page.$('#inWin107');
const frame = await iframeElement.contentFrame();
await frame.waitForSelector('#txtZipCode');
await frame.type('#txtZipCode', '79936');