<select>
ボックスが表示されているページに移動します<select>
クリックすると、オプションが開きますあなたの環境について教えてください:
どの手順で問題が再現されますか?
_問題を再現するコードを含めてください。_
(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>
のみをキャプチャし、オプションは含まれていません。
この例を見てみましょう:
私にとって、このネイティブセレクトはページレイヤーに属していません。ご覧のとおり、「ページ外」です。
この種のUIをキャプチャすることさえ可能ですか?
@Everettss @ ryanvincent29確かに、展開された選択はOSによってレンダリングされ、撮影しているスクリーンショットではレンダリングされません。
これはアーキテクチャ上の制約であり、すぐには修正されません。
誰かがこれを簡単に解決したい場合は、このライブラリを使用して、ネイティブselectをHTML selectにサイレントに置き換えることができます。つまり、既存のコードを変更する必要はありません。
https://github.com/amitamb/proxy-select
上記の問題を見た後、私は自分のプロジェクトからこれを抽出しました。