Puppeteer - Как заполнить форму, которая находится внутри iframe?

Я должен заполнить форму внутри iframe, здесь образец страницы. Я не могу получить доступ, просто используя page.focus() и page.type(). Я попытался получить форму iframe с помощью const formFrame = page.mainFrame().childFrames()[0], которая работает, но я не могу реально взаимодействовать с формой iframe.

Ответ 1

Я понял это сам. Здесь код.

console.log('waiting for iframe with form to be ready.');
await page.waitForSelector('iframe');
console.log('iframe is ready. Loading iframe content');

const elementHandle = await page.$(
    'iframe[src="https://example.com"]',
);
const frame = await elementHandle.contentFrame();

console.log('filling form in iframe');
await frame.type('#Name', 'Bob', { delay: 100 });

Ответ 2

Вместо того, чтобы выяснить, как попасть внутрь iFrame и набрать текст, я бы упростил задачу, перейдя непосредственно к URL-адресу IFrame.

https://warranty.goodmanmfg.com/registration/NewRegistration/NewRegistration.aspx?Sender=Goodman

Сделайте ваш скрипт напрямую перейдите по указанному выше URL и попробуйте автоматизировать, он должен работать

Edit-1: Использование фреймов

Поскольку простой подход не работает для вас, мы делаем это с самими фреймами

Ниже приведен простой скрипт, который должен помочь вам начать

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://www.goodmanmfg.com/product-registration', {timeout: 80000});
    var frames = await page.frames();
    var myframe = frames.find(
        f =>
            f.url().indexOf("NewRegistration") > 0);
    const serialNumber = await myframe.$("#MainContent_SerNumText");
    await serialNumber.type("12345");

    await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Выход

Type serial

Ответ 3

Хотя вы разобрались, но я думаю, что у меня есть лучшее решение. Надеюсь, поможет.

async doFillForm() {
    return await this.page.evaluate(() => {
       let iframe = document.getElementById('frame_id_where_form_is _present');
       let doc = iframe.contentDocument;
       doc.querySelector('#username').value='Bob';
       doc.querySelector('#password').value='pass123';
    });
}