17 Jul 2023

Puppeteer: Button click doesn't work when zoomed in

I’m still playing around with Puppeteer, a Nodejs library that provides an API to control Chrome/Chromium. I want to load the Pinot UI zoomed to 250% and then write and run some queries.

We can install Puppeteer by running the following command:

npm i puppeteer-core

I then created the file drive_pinot.mjs and added the following code, which opens the Pinot query console and then clicks on the 'Run Query' button:

drive_pinot.mjs

import puppeteer from 'puppeteer-core';

async function run() {
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        ignoreDefaultArgs: ['--enable-automation'],
        defaultViewport: null,
        args: ['--start-maximized', '--disable-infobars',],
    });

    const page = await browser.newPage();
    await page.goto('http://localhost:9000/#/query');

    const [initPage] = await browser.pages();
    initPage.close()

    const runQueryButton = await page.$x("//button[contains(., 'Run Query')]");
    await runQueryButton[0].click() (1)

    await new Promise(r => setTimeout(r, 1000));
    await browser.close();
}

run();

1	Click on the run query button

This works completely fine although there isn’t a useful result as we haven’t written a query yet. Next, I tried zooming the page to 250% after navigating to the Pinot query console:

import puppeteer from 'puppeteer-core';

async function run() {
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        ignoreDefaultArgs: ['--enable-automation'],
        defaultViewport: null,
        args: ['--start-maximized', '--disable-infobars',],
    });

    const page = await browser.newPage();
    await page.goto('http://localhost:9000/#/query');
    await page.evaluate(() => document.body.style.zoom = "250%" ); (1)

    const [initPage] = await browser.pages();
    initPage.close()

    const runQueryButton = await page.$x("//button[contains(., 'Run Query')]");
    await runQueryButton[0].click()

    await new Promise(r => setTimeout(r, 1000));
    await browser.close();
}

run();

1	Zoom the page several times

But this time when it clicked the 'Run Query' button nothing happened. I came across a StackOverflow thread that suggested the issue might be that the location of the button had moved because of the zoom. I’m not entirely sure that would be the case when I selected the button after zooming the page, but I thought I’d give the solution a try:

import puppeteer from 'puppeteer-core';

async function run() {
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        ignoreDefaultArgs: ['--enable-automation'],
        defaultViewport: null,
        args: ['--start-maximized', '--disable-infobars',],
    });

    const page = await browser.newPage();
    await page.goto('http://localhost:9000/#/query');
    await page.evaluate(() => document.body.style.zoom = "250%" );

    const [initPage] = await browser.pages();
    initPage.close()

    const runQueryButton = await page.$x("//button[contains(., 'Run Query')]");
    await page.evaluate((el) => { (1)
        el.click();
    }, runQueryButton[0]);

    await new Promise(r => setTimeout(r, 1000));
    await browser.close();
}

run();

1	Click the button inside `page.evaluate`

And now the button happily clicks at 250% zoom!

About the author

I'm currently working on short form content at ClickHouse. I publish short 5 minute videos showing how to solve data problems on YouTube @LearnDataWithMark. I previously worked on graph analytics at Neo4j, where I also co-authored the O'Reilly Graph Algorithms Book with Amy Hodler.