Puppeteer: スクリーンショットには展開されたものは含まれていません<select/>

作成日 2017年11月07日  ·  3コメント  ·  ソース: puppeteer/puppeteer

再現する手順

  1. <select>ボックスが表示されているページに移動します
  2. プログラムで<select>クリックすると、オプションが開きます
  3. スクリーンショットを撮る

あなたの環境について教えてください:

  • パペッティアバージョン:0.12.0
  • プラットフォーム/ OSバージョン:MacOS Sierra 10.12.6

どの手順で問題が再現されますか?

_問題を再現するコードを含めてください。_

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

    await page.goto('https://developer.mozilla.org/en-US/', { waitUntil: 'load' });
    await page.click('#language', { delay: 100 });
    await page.screenshot({ path: './screenshot1.jpg', type: 'jpeg', quality:50 });
    await browser.close();
})();

期待される結果は何ですか?
開いた<select>がスクリーンショットにキャプチャされることを期待します。

代わりに何が起こりますか?
スクリーンショットは閉じた<select>のみをキャプチャし、オプションは含まれていません。

全てのコメント3件

この例を見てみましょう:
screen shot 2017-11-07 at 19 48 12
私にとって、このネイティブセレクトはページレイヤーに属していません。ご覧のとおり、「ページ外」です。
この種のUIをキャプチャすることさえ可能ですか?

@Everettss @ ryanvincent29確かに、展開された選択はOSによってレンダリングされ、撮影しているスクリーンショットではレンダリングされません。

これはアーキテクチャ上の制約であり、すぐには修正されません。

誰かがこれを簡単に解決したい場合は、このライブラリを使用して、ネイティブselectをHTML selectにサイレントに置き換えることができます。つまり、既存のコードを変更する必要はありません。

https://github.com/amitamb/proxy-select

上記の問題を見た後、私は自分のプロジェクトからこれを抽出しました。

このページは役に立ちましたか?
0 / 5 - 0 評価