Question: Can I redefine the `Page.loadEventFired` event after it's been fired?

I want to submit a login form, then redefine Page.loadEventFired again and do something else when the new page loads. Something like this:

  Page.loadEventFired(() => {
    Promise.resolve()
    .then(function() {
      return Runtime.evaluate(/* expression here will submit login form */)
    })
    .then(function (response) {
      // probably not necessary once things are working
      console.log('response:', response);
    })
    .then(/* redefine Page.loadEventFired here */)
    .then(function() {
      return Page.navigate({
        url: 'second link after login',
      });
    })

// I'm not sure where we should finish logic so we can handle a load event again but
// something happens in between here and I take a screenshot after:

... Page.loadEventFired...
    .then(Page.captureScreenshot)
    .then(screenshot)
    .then(function() {
      client.close();
    });
  });

Looked around for an example and couldn’t find one.

[cyrus-and]

Here we go, since v0.20.0 you can also write:

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

CDP(async (client) => {
    const {Network, Page} = client;

    try {
        await Page.enable();

        console.log('stage 0');
        await Page.navigate({url: 'https://example.com'});
        await Page.loadEventFired();

        console.log('stage 1');
        await Page.navigate({url: 'https://example.com/1'});
        await Page.loadEventFired();

        console.log('stage 2');
        await Page.navigate({url: 'https://example.com/2'});
        await Page.loadEventFired();

        console.log('stage 3');
        await Page.navigate({url: 'https://example.com/3'});
        await Page.loadEventFired();

        console.log('done');
    } catch (err) {
        console.error(err);
    }

    client.close();
}).on('error', (err) => {
    console.error(err);
});

Any feedback is welcome.

[jmrnilsson]

I know this is closed and all but I found it plenty useful. After trying some of the approaches mentioned here, I went with using a function hoisted as a state variable. In doing so I can await multiple page loads in a single function by resolving a Promise by the page load.

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

function clickSomeActionThenSubmitForm(Runtime) {
    const clickSomeAction = 'document.querySelector(\'a[href="#someAction"]\').click()';
    const setSomeInfo = 'document.querySelector("input#someinfo").value = "info"';
    const submit = 'document.querySelector(\'form[action*="/smilesAndJoy"] button\').click()';

    return Runtime
        .evaluate({ expression: clickSomeAction })
        .then(() => { return new Promise(resolve => { pageLoad = resolve; }) })
        .then(() => { return Runtime.evaluate({expression: setSomeInfo })})
        .then(() => { return Runtime.evaluate({expression: submit })})
        .then(() => { return new Promise(resolve => { pageLoad = resolve; }) });
}
 ...
Page.loadEventFired(() => { pageLoad(Runtime) });