Puppeteer nameのないiframe内のDOM要素を操作する(セレクタでiframeを取得する)

こんにちは。レモンティーです。

今回はpuppeteerでiframe内のDOM要素を操作する方法です。
iframeにnameがあれば

const frame = await page.frames().find(f => f.name() === 'hoge');

のようにできますが、ない場合はelementHandleクラスのcontentFrameメソッドを使うのが簡単そうです。
github.com


例えば

example.html

<div class="hoge">
  <iframe>
</div>

こんな場合にはこれでいけます

example.js

const eh = await page.$('.hoge > iframe');
const frame = await eh.contentFrame();

iframe自体にclassとかidがある場合も同じです。

frameが取得できたらあまりframeだと意識することなくclickとか$とか$$とか使えます。
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-frame

例えばこんな感じです。

example.html

<div>
  <iframe class="hoge-frame">
    #document
      <html>
        <head></head>
        <body>
          <div class="link-in-frame">
            <a>Target Link</a>
          </div>
        </body>
      <html>
  </iframe>
<div>

example.js

const eh = await page.$('.hoge-frame');
const frame = await eh.contentFrame();
const link = await frame.$('.link-in-frame > a');

今回はこれでおしまいです。
www.sawalemontea.com