Actor picture

Webpage DOM & CSS Analyzer

jancurn/example-analyze-dom-css

Example showing how to use headless Chromium with Puppeteer to open a web page, fetch the list of DOM nodes on the pages and obtain CSS styling information for each HTML element. The actor uses the Chrome DevTools Protocol to access the required browser functionality.

No credit card required

Author's avatarJan Čurn
  • Modified
  • Users30
  • Runs105
Actor picture

Webpage DOM & CSS Analyzer

Based on the apify/actor-node-chrome:v0.21.10 Docker image (see docs).

const Apify = require('apify');

Apify.main(async () => {
    const input = await Apify.getValue('INPUT');
    
    if (!input || !input.url) throw new Error('Invalid input, must be a JSON object with the "url" field!');
    
    console.log('Launching Puppeteer...');
    const browser = await Apify.launchPuppeteer();
    
    console.log(`Opening URL: ${input.url}`);  
    const page = await browser.newPage();
    await page.goto(input.url);
    
    console.log(`Starting a CDP session`);
    const client = await page.target().createCDPSession();
    await client.send('DOM.enable');
    await client.send('CSS.enable');
    
    console.log('Fetching list of DOM nodes');
    const nodes = (await client.send('DOM.getFlattenedDocument')).nodes;
    
    console.log(`Analyzing CSS for each of the ${nodes.length} node`);
    for (let i=0; i<nodes.length; i++) {
        const node = nodes[i];
        if (node.nodeType === 1) {
            node.matchedStyle = await client.send('CSS.getMatchedStylesForNode', {
                nodeId: node.nodeId
            });
        }
    };
    
    await Apify.setValue('OUTPUT', nodes);
});