Puppeteer: Screenshots do not include expanded <select>

[ryanvincent29]

Steps to reproduce

1. Navigate to a page with a <select> box on it
2. Programmatically click the <select>, which opens up the options
3. Take a screenshot

Tell us about your environment:

• Puppeteer version: 0.12.0
• Platform / OS version: MacOS Sierra 10.12.6

What steps will reproduce the problem?

_Please include code that reproduces the issue._

(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();
})();

What is the expected result?
I would expect the opened <select> to be captured in the screenshot.

What happens instead?
The screenshot only captures the closed <select> and does not catch any of the options.

[Everettss]

Let's take a look on this example:

For me this native select doesn't belong to page layer - as you can see it's "outside of the page".
Is it even possible to capture this kind of UI?

[aslushnikov]

@Everettss @ryanvincent29 indeed, expanded selects are rendered by the OS and are not rendered at the screenshots we're taking.

This is an architectural constraint and won't be fixed any time soon.

[amitamb]

If anyone wants to easily solve this you can use this library which replaces native select with HTML select silently i.e. without changing your existing code.

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

After seeing above problem, I extracted this from my project.