Chrome-remote-interface: how to make click events on elements using css selectors or alike?

[DavidXanatos]

I would like to issue click events on elements in the webpage I'm interacting with,
but i dont want to have to search for x,y coordinates, instead
i would like to just select a element in the dom tree of the page and than click on it ideally using css selectors or something similar.

what is the best way to do that?

[cyrus-and]

While obtaining the coordinates should be fairly easy, I guess you can always inject some JavaScript code to do that:

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

CDP(async (client) => {
    try {
        const {Runtime} = client;
        await Runtime.evaluate({
            expression: `document.querySelector('#myButton').click()`
        });
    } catch (err) {
        console.error(err);
    } finally {
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});

[DavidXanatos]

Yea, there is an issue with that, which is that some click capture mechanisms are not triggered by that.
Like annoying ad popups 😄 and I want to trigger those.
So I will need to find the coordinates I think.
I will try the linked method thanks

EDIT: problem the getBoxModel gives me heigth and width but not the coordinates,
how do i get them for a known node id?

Edit2: this seams to give me the right coordinates:
let x = params.model.content[0];
let y = params.model.content[1];
let w = params.model.width;
let h = params.model.height;

so i think it works

strange is that this click still does not trigger the add popup?
using the mouse works so there is something still missing for this special case

[DavidXanatos]

nope now it works i guess i triggered enough adds, clearing cookies solved it