How Browser Automation Works

# 1. create a session
curl -s -X POST localhost:9515/session -H 'content-type: application/json' \
  -d '{"capabilities":{"alwaysMatch":{"browserName":"chrome","goog:chromeOptions":{"args":["--headless=new"]}}}}'
# {"value":{"capabilities":{ ... "browserVersion":"155.0.8059.85" ... },"sessionId":"<id>"}}

# 2. navigate
curl -s -X POST localhost:9515/session/$SID/url -H 'content-type: application/json' \
  -d '{"url":"http://localhost:3000/books"}'
# {"value":null}

# 3. find an element: the response holds the W3C element reference
curl -s -X POST localhost:9515/session/$SID/element -H 'content-type: application/json' \
  -d '{"using":"css selector","value":"[data-testid=page-next]"}'
# {"value":{"element-6066-11e4-a52e-4f735466cecf":"<element id>"}}

# 4. click it, then read the URL
curl -s -X POST localhost:9515/session/$SID/element/$EID/click -H 'content-type: application/json' -d '{}'
curl -s localhost:9515/session/$SID/url
# {"value":"http://localhost:3000/books?page=2"}

# 5. end the session
curl -s -X DELETE localhost:9515/session/$SID

const CD = 'http://localhost:9515'; // a running chromedriver
const post = (u, b) => fetch(u, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(b) }).then(r => r.json());

function rpc(url) {
  return new Promise((resolve) => {
    const ws = new WebSocket(url); let id = 0; const pending = new Map();
    ws.onmessage = (m) => { const d = JSON.parse(m.data); if (d.id && pending.has(d.id)) { pending.get(d.id)(d); pending.delete(d.id); } };
    ws.onopen = () => resolve({
      send: (method, params = {}) => new Promise((r) => { const i = ++id; pending.set(i, r); ws.send(JSON.stringify({ id: i, method, params })); }),
      close: () => ws.close(),
    });
  });
}

const session = await post(`${CD}/session`, { capabilities: { alwaysMatch: { browserName: 'chrome', webSocketUrl: true, 'goog:chromeOptions': { args: ['--headless=new'] } } } });
const bidi = await rpc(session.value.capabilities.webSocketUrl);

const ctx = (await bidi.send('browsingContext.getTree')).result.contexts[0].context;
await bidi.send('browsingContext.navigate', { context: ctx, url: 'http://localhost:3000/books', wait: 'complete' });

const found = await bidi.send('browsingContext.locateNodes', { context: ctx, locator: { type: 'css', value: '[data-testid=page-next]' } });
const node = found.result.nodes[0];

// BiDi input does not scroll for you, so bring the link into view first.
await bidi.send('script.callFunction', { functionDeclaration: 'el => el.scrollIntoView({ block: "center" })', arguments: [{ type: 'node', sharedId: node.sharedId }], target: { context: ctx }, awaitPromise: false });
await bidi.send('input.performActions', { context: ctx, actions: [{ type: 'pointer', id: 'm', actions: [
  { type: 'pointerMove', x: 0, y: 0, origin: { type: 'element', element: { sharedId: node.sharedId } } },
  { type: 'pointerDown', button: 0 }, { type: 'pointerUp', button: 0 },
] }] });

await new Promise((r) => setTimeout(r, 500));
const href = await bidi.send('script.evaluate', { expression: 'location.href', target: { context: ctx }, awaitPromise: false });
console.log(href.result.result.value); // http://localhost:3000/books?page=2
bidi.close();
await fetch(`${CD}/session/${session.value.sessionId}`, { method: 'DELETE' });

// Chrome started with:  chrome --headless=new --remote-debugging-port=9222 --user-data-dir=/tmp/cdp-profile about:blank
const base = 'http://localhost:9222';
const target = await (await fetch(`${base}/json/new?http://localhost:3000/books`, { method: 'PUT' })).json();
const ws = new WebSocket(target.webSocketDebuggerUrl); let id = 0; const waiting = new Map();
ws.onmessage = (m) => { const d = JSON.parse(m.data); if (d.id) waiting.get(d.id)?.(d); };
const send = (method, params = {}) => new Promise((r) => { const i = ++id; waiting.set(i, r); ws.send(JSON.stringify({ id: i, method, params })); });
await new Promise((r) => (ws.onopen = r));

await send('Page.enable');
await new Promise((r) => setTimeout(r, 1000));                       // crude wait for load
const doc = await send('DOM.getDocument');
const link = await send('DOM.querySelector', { nodeId: doc.result.root.nodeId, selector: '[data-testid=page-next]' });
await send('DOM.scrollIntoViewIfNeeded', { nodeId: link.result.nodeId });
const box = (await send('DOM.getBoxModel', { nodeId: link.result.nodeId })).result.model.content;
const x = (box[0] + box[2]) / 2, y = (box[1] + box[5]) / 2;
for (const type of ['mousePressed', 'mouseReleased']) {
  await send('Input.dispatchMouseEvent', { type, x, y, button: 'left', clickCount: 1 });
}
await new Promise((r) => setTimeout(r, 500));
console.log((await send('Runtime.evaluate', { expression: 'location.href' })).result.result.value);
ws.close();