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

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

Я перешел на http://www.espn.com/login и выбрал iframe. Кажется, я не могу выбрать какие-либо элементы в 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. Всякий раз, когда я пытаюсь получить доступ к этим полям, я получаю значение null.


node.js javascript iframe puppeteer webautomation
person SwapnikK    schedule 03.06.2019    source источник

Ответы (3)


arrow_upward
23
arrow_downward

Вы можете получить 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()

введите описание изображения здесь

person hardkoded    schedule 03.06.2019
comment
frame. $ ('[ng-model = vm.username]') кажется возвращает null. - person SwapnikK; 03.06.2019
comment
@SwapnikK, вы также можете использовать waitForSelector. Ответ отредактирован. - person hardkoded; 03.06.2019

arrow_upward
9
arrow_downward

У меня возникла проблема с поиском полосатых элементов. Причина в следующем:

Вы не можете получить доступ к другому источнику с помощью JavaScript, это было бы огромным недостатком безопасности, если бы вы могли это сделать. Для политики одного и того же происхождения браузеры блокируют сценарии, пытающиеся получить доступ к кадру с другим происхождением. См. более подробный ответ здесь

Поэтому, когда я пытался использовать методы кукловода: Page.frames() и Page.mainFrame(). ElementHandle.contentFrame(), я не возвращал мне iframe. Проблема в том, что это происходило тихо, и я не мог понять, почему он ничего не мог найти.

Добавление этих аргументов в параметры запуска решило проблему: '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'

person mykhailoklym94    schedule 31.01.2020
comment
Большое спасибо за ваш ответ, это устранило мою проблему. если вы знаете, не могли бы вы поделиться какими-либо недостатками включения этих флагов? - person opensource-developer; 21.08.2020

arrow_upward
0
arrow_downward

await elementHandle.contentFrame () имеет значение null:

const frame = await elementHandle.contentFrame();
person Jared Chacon    schedule 29.09.2019
comment
Пожалуйста, уточните ответ. Это выглядит недостаточным - person Mohit Mutha; 29.09.2019
comment
const frame = await elementHandle.contentFrame (); - person Jared Chacon; 29.09.2019