Как выбрать элементы внутри элемента iframe в Puppeteer

Question

Поскольку ESPN не предоставляет API, я пытаюсь использовать Puppeteer для сбора данных о моей лиге фэнтези-футбола. Тем не менее, я испытываю трудности при попытке войти в систему, используя puppeteer из-за того, что форма входа в систему вложена с элементом iframe.

Я перешел на http://www.espn.com/login и выбрал фрейм. Кажется, я не могу выбрать ни один из элементов в iframe, кроме основного раздела, выполнив

    frame.$('.main')

Это код, который, кажется, получает iframe с формой входа.

    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();

    await page.goto('http://www.espn.com/login')
    await page.waitForSelector("iframe");

    const elementHandle = await page.$('div#disneyid-wrapper iframe');
    const frame = await elementHandle.contentFrame();
    await browser.close()

Я хочу иметь возможность доступа к полю имени пользователя, полю пароля и кнопке входа в систему в элементе iframe. Всякий раз, когда я пытаюсь получить доступ к этим полям, я получаю нулевое значение.

Answer 1

Вы можете получить iframe, используя contentFrame, как сейчас, а затем позвонить $.

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await page.goto('http://www.espn.com/login')
await page.waitForSelector("iframe");

const elementHandle = await page.$('div#disneyid-wrapper iframe');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('[ng-model="vm.username"]');
const username = await frame.$('[ng-model="vm.username"]');
await username.type('foo');
await browser.close()