New issue
Advanced search Search tips

Issue 853229 link

Starred by 5 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Jun 2018
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Image capture through Chrome Debug Protocol not grabbing expanded selects

Reported by abraham....@gmail.com, Jun 15 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15

Steps to reproduce the problem:
1. Create a file called abr.js with the attached code. 
2. Install dependencies: "npm install chrome-remote-interface"
3. Open Chrome with remote debug enabled: " --remote-debugging-port=9222"
4. Run the script: "node abr.js" 
5. open the saved image "scrot.png" 

What is the expected behavior?
The saved snapshot should include the whole list of car brands.

What went wrong?
The snapshot does not show the expanded "select" elements. 

Did this work before? N/A 

Chrome version: 67.0.3396.87 (Official Build) (64-bit)  Channel: n/a
OS Version: OS X 10.12.6
Flash Version: 

A short screen recording have been included to help triage.

Content of script abr.js follows:
-----

const CDP = require('chrome-remote-interface');
const fs = require('fs');

const html = `
<select id="sel">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
`;

async function test() {
    try {
        const client = await CDP();
        const {Page, Input, Runtime} = client;

        await Page.navigate({url: `https://www.smartload.io/abr.html`});

        Runtime.enable();
        Runtime.consoleAPICalled(({args}) => {
            console.log(args);
        });

	var waitTill = new Date(new Date().getTime() + 2 * 1000);
	while(waitTill > new Date()){}

        await Input.dispatchMouseEvent({
            type: 'mousePressed', button: 'left', clickCount: 1, x: 12, y: 12
        });

        await Input.dispatchMouseEvent({
            type: 'mouseReleased', button: 'left', clickCount: 1, x: 12, y: 12
        });

	console.log("Select expanded");

	waitTill = new Date(new Date().getTime() + 2 * 1000);
	while(waitTill > new Date()){}

	const {data} = await Page.captureScreenshot();
        fs.writeFileSync('scrot.png', Buffer.from(data, 'base64'));
        console.log("Screenshot done");	

    } catch (err) {
        console.error(err);
    }
}

test();
 
My Movie 1 - Medium.mov
4.7 MB View Download
Components: Platform>DevTools
Selects are rendered in another RenderWidget. Wonder if this is a problem with the design of the API and perhaps it isn't intended to capture them because they can bleed outside the window bounds of the document. DevTools team to confirm.
Labels: Needs-Triage-M67
Status: WontFix (was: Unconfirmed)
Right, these are different RenderWidgets and thus aren't captured by Screenshots by design.

Sign in to add a comment