screenshot.ts

import * as Chrome from 'chrome-debugging-client';
import { DOM, Emulation, Network, Page, Runtime, DOMSnapshot } from 'chrome-debugging-client/dist/protocol/tot';
import * as fs from 'fs';

const pageWidth = 640;

async function takeScreenshot(session: Chrome.ISession) {
    const process = await session.spawnBrowser('exact', {
        additionalArguments: ['--headless', '--hide-scrollbars', '--disable-gpu'],
        windowSize: { width: pageWidth, height: 1000 },
        executablePath: '/opt/google/chrome-beta/google-chrome-beta'
    });

    const client = session.createAPIClient('localhost', process.remoteDebuggingPort);

    async function createActiveTab(client: Chrome.IAPIClient) {
        const tab = await client.newTab();
        await client.activateTab(tab.id);
        return tab;
    }
    
    const tab = await createActiveTab(client);
    const debuggerClient = await session.openDebuggingProtocol(tab.webSocketDebuggerUrl);
        
    const page = new Page(debuggerClient);
    const dom = new DOM(debuggerClient);
    const domSnapshot = new DOMSnapshot(debuggerClient);
    const emulation = new Emulation(debuggerClient);
    const runtime = new Runtime(debuggerClient);
    await page.enable();
    await dom.enable();
    await runtime.enable();

    let url = 'http://ivs.smarterbalanced.org/items?ids=187-1432&isaap=TDS_SLM1';
    await page.navigate({ url: url });

    await new Promise(r => {
        setTimeout(() => r(), 2000);
    });

    // full page
    const snapshot = await domSnapshot.getSnapshot({computedStyleWhitelist: []});
    const groupNodeIndex = snapshot.domNodes.findIndex(node => {
        if (node.attributes) {
            const className = node.attributes.find(nv => nv.name === 'class');
            return className ? className.value === 'grouping' : false;
        }
        return false;
    });
    const groupLayout = snapshot.layoutTreeNodes.find(n => n.domNodeIndex === groupNodeIndex);
    let pageHeight = groupLayout.boundingBox.height;

    await emulation.setVisibleSize({ width: pageWidth, height: pageHeight });

    // passage    
    const passageNodeIndex = snapshot.domNodes.findIndex(node => {
        if (node.attributes) {
            const className = node.attributes.find(nv => nv.name === 'class');
            return className ? className.value.includes('thePassage') : false;
        }
        return false;
    });
    const passageLayout = snapshot.layoutTreeNodes.find(n => n.domNodeIndex === passageNodeIndex);

    let passageRect: Page.Viewport = {
        x: 200,
        y: 500,
        width: 200,
        height: 200,
        scale: 1
    };

    const screenshot = await page.captureScreenshot({ clip: passageRect });
    const buffer = new Buffer(screenshot.data, 'base64');
    fs.writeFile('passage.png', buffer, 'base64', (error) => {
        if (error) {
            console.log(error)
        } else {
            console.log('Screenshot saved.');
        }
    });
}

Chrome.createSession(takeScreenshot);