Playing with automation and chrome remote

automation-chrome-remote.js

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

async function screenshot(client, location) {
  const {Page} = client
  const screenshot = await Page.captureScreenshot({format: 'png'});
  const buffer = new Buffer(screenshot.data, 'base64');

  file.writeFile(`${location}.png`, buffer, 'base64', function(err) {
    if (err)  console.error(err)
    client.close()
  })
}
async function getElement(client, selector) {
    // browser code to register and parse mutations
    const {DOM, Runtime} = client
    const {root: {nodeId: documentNodeId}} = await DOM.getDocument()

    const node = await DOM.querySelector({
      selector: selector,
      nodeId: documentNodeId,
    });

    if (node && node.nodeId > 0) { return node }

    const browserCode = (selector) => {
        return new Promise((fulfill, reject) => {
            return new MutationObserver((mutations, observer) => {
                // add all the new nodes
                const nodes = [];
                mutations.forEach((mutation) => {
                    nodes.push(...mutation.addedNodes);
                });
                // fulfills if at least one node matches the selector
                if (nodes.find((node) => node.matches(selector))) {
                    observer.disconnect();
                    fulfill(nodes[0]);
                }
            }).observe(document.body, {
                childList: true
            });
        });
    };

    await Runtime.evaluate({
        expression: `(${browserCode})(${JSON.stringify(selector)})`,
        awaitPromise: true
    })

    return await DOM.querySelector({
      selector: selector,
      nodeId: documentNodeId,
    });
}

function addLazyDiv() {
    setTimeout(() => {
        const foo = document.createElement('div');
        foo.id = 'lazy_div';
        foo.innerText = 'foo';
        document.body.appendChild(foo)
    }, 1000);
}

const _setText = (selector, text) => {
  const TextInput = '._1ej--TextInput--TextInput input'
  const foo = document.querySelector('._2YQ--TextInput--inputElement')
  foo.focus()
  foo.setAttribute('value', 'test')
}

async function setText(client, selector, text) {
  const {Runtime, Input} = client
  const a = await Runtime.evaluate({
    expression: `(${_setText})(${selector}, ${text})`,
    awaitPromise: true,
  })
  console.log('##', a)
  // await Input.dispatchKeyboarEvent({type: 'keydown'})
  await Promise.resolve(1)
}

CDP(async (client) => {
    const {Page, Input, Runtime, DOM} = client;
    try {
        await DOM.enable()
        await Page.enable()
        await Page.navigate({url: 'http://localhost:3001'})
        await Page.loadEventFired()

        // will add div
        await Runtime.evaluate({
            expression: `(${addLazyDiv})()`
        });

        // wait for the element to be present
        const TextInput = '._1ej--TextInput--TextInput'
        const node1 = await getElement(client, TextInput)
        const node2 = await getElement(client, 'div#lazy_div');
        
        //mouse over
        await Input.dispatchMouseEvent({x: 5, y: 5, type: 'mouseMoved'})
        await setText(client, TextInput, 'Feedback')
        await screenshot(client, 'output')

        console.log('OK', node1, node2)
    } catch (err) {
        console.error(err);
    } finally {
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});