web-dev-qa-db-ja.com

操り人形師-iframe内のフォームに記入する方法は？

Iframe内のフォーム、ここでは サンプルページ に記入する必要があります。 page.focus()とpage.type()を使用するだけではアクセスできません。 const formFrame = page.mainFrame().childFrames()[0]を使用してiframeフォームを取得しようとしましたが、これは機能しますが、iframeフォームと実際に対話することはできません。

puppeteer
12
Raza

自分で考え出した。コードは次のとおりです。

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 });
8
Raza

IFrameの内部に入り込み、入力する方法を理解する代わりに、IFrame URLに直接移動することで問題を単純化します

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

15
Tarun Lalwani