Stop Chrome console logs?

[smvilar]

Is there a way to prevent the logs from the browser console to show up in the test output? I looked at the Chromium command line flags but I didn't find the one.

[garris]

There are no switches for this— but you can probably unbind the handler for log events in an onBefore script. Implementation would depend on the engine option.

[verbruggenalex]

This is the only reference I can find for puppet: https://github.com/garris/BackstopJS/blob/269c9f649fa48f4bdbb95a3fab02092a718156b6/core/util/runPuppet.js#L82-L90

I'm not very proficient at javascript. Could someone help me with a small implementation to unbind these log messages? Eventually I think that there should be some sort of log level setting made available. The messages "Browser Console Log 0: JSHandle:BackstopTools have been installed." and "x Close Browser" feel like pollution to me.

[garris]

Ok. I just looked at this for you.

Here is the puppeteer documentation which shows how to do it... https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page

so the ideal way to address this would be for you to add this in the onBefore script...

module.exports = async (page, scenario, vp) => {
  page.removeListener('console', refactoredConsoleMethodHere)
  await require('./loadCookies')(page, scenario);
};

Unfortunately --this wont work. The inline anonymous function would need to be slightly refactored per the puppeteer docs for it to correctly work. It would be awesome if you could do this an submit a PR.

^ If that is not something you're comfortable with you could probably solve your problem with something totally crude like this...

It would be way way better to do the first suggestion. Don't tell anybody I told you to kill the console like this. It's utter trash -- but it will kill your output. 😉

[verbruggenalex]

Thank you for the swift answer. I created something similar but still nasty:

onBefore.js

(function (original) {
    console.enableLogging = function () {
        console.log = original;
    };
    console.disableLogging = function () {
        console.log = function () {};
    };
})(console.log);

module.exports = async (page, scenario, vp) => {
  await require('./loadCookies')(page, scenario);
  console.disableLogging();
};

onReady.js

module.exports = async (page, scenario, vp) => {
  console.enableLogging();
  console.log('SCENARIO > ' + scenario.label + ' (' + vp.label + ')');
  await require('./clickAndHoverHelper')(page, scenario);
  console.disableLogging();
  // Hardcoded to my example.
  if ((scenario.sIndex == 27) && (vp.vIndex == 2)) {
    console.enableLogging();
  }
};

output

 docker-compose run --rm backstopjs test
BackstopJS v3.5.0
Loading config:  /src/backstop.json 

COMMAND | Executing core for `test`
createBitmaps | Selected 28 of 28 scenarios.
SCENARIO > Configuration (desktop)
SCENARIO > Configuration (tablet)
SCENARIO > Configuration (phone)
SCENARIO > /content/global-editorial-team_en (phone)
SCENARIO > /content/global-editorial-team_en (tablet)
SCENARIO > /content/global-editorial-team_en (desktop)
SCENARIO > /classification/01000_en (phone)
SCENARIO > /classification/01000_en (tablet)
SCENARIO > /classification/01000_en (desktop)
SCENARIO > /tags/economic_en (phone)
SCENARIO > /tags/economic_en (tablet)
SCENARIO > People (phone)
SCENARIO > /tags/economic_en (desktop)
SCENARIO > People (tablet)
SCENARIO > People (desktop)
SCENARIO > Administration (phone)
SCENARIO > Administration (tablet)
SCENARIO > Administration (desktop)
SCENARIO > Reports (phone)
SCENARIO > Reports (tablet)
SCENARIO > Translation (phone)
SCENARIO > Reports (desktop)
SCENARIO > Translation (tablet)
SCENARIO > Translation (desktop)
SCENARIO > /taxonomy-browser-header_en (phone)
SCENARIO > /taxonomy-browser-header_en (tablet)
SCENARIO > /taxonomy-browser-header_en (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > Manage translation tasks (phone)
SCENARIO > Manage translation tasks (tablet)
SCENARIO > Manage translation tasks (desktop)
SCENARIO > /translate/default_en (phone)
SCENARIO > /translate/default_en (tablet)
SCENARIO > /translate/default_en (desktop)
SCENARIO > /translate/elegible_en (phone)
SCENARIO > /translate/elegible_en (tablet)
SCENARIO > /translate/elegible_en (desktop)
SCENARIO > /translate/mine_en (phone)
SCENARIO > /translate/mine_en (tablet)
SCENARIO > /translate/mine_en (desktop)
SCENARIO > /translate/pending_en (phone)
SCENARIO > /translate/pending_en (tablet)
SCENARIO > /translate/pending_en (desktop)
SCENARIO > /translate/completed_en (phone)
SCENARIO > /translate/completed_en (tablet)
SCENARIO > /translate/rejected_en (phone)
SCENARIO > /translate/completed_en (desktop)
SCENARIO > /translate/rejected_en (tablet)
SCENARIO > /translate/rejected_en (desktop)
SCENARIO > /translate/closed_en (phone)
SCENARIO > /translate/closed_en (tablet)
SCENARIO > /translate/closed_en (desktop)
SCENARIO > Translation (phone)
SCENARIO > Translation (tablet)
SCENARIO > Translation (desktop)
SCENARIO > My content (phone)
SCENARIO > My content (tablet)
SCENARIO > My content (desktop)
SCENARIO > My Workbench (phone)
SCENARIO > My Workbench (tablet)
SCENARIO > My Workbench (desktop)
SCENARIO > My Workbench (phone)
SCENARIO > My Workbench (tablet)
SCENARIO > My Workbench (desktop)
SCENARIO > My Workbench (phone)
SCENARIO > My Workbench (tablet)
SCENARIO > My Workbench (desktop)
SCENARIO > My content (phone)
SCENARIO > My content (tablet)
SCENARIO > My content (desktop)
x Close Browser
x Close Browser
      COMMAND | Executing core for `report`
      compare | OK: Configuration backstop_smoketest_Configuration_0_document_0_phone.png
      compare | OK: Configuration backstop_smoketest_Configuration_0_document_1_tablet.png
      compare | OK: Configuration backstop_smoketest_Configuration_0_document_2_desktop.png
      compare | OK: /content/global-editorial-team_en backstop_smoketest__content_global-editorial-team_en_0_document_0_phone.png
      compare | OK: /content/global-editorial-team_en backstop_smoketest__content_global-editorial-team_en_0_document_1_tablet.png
      compare | OK: /content/global-editorial-team_en backstop_smoketest__content_global-editorial-team_en_0_document_2_desktop.png
      compare | OK: /classification/01000_en backstop_smoketest__classification_01000_en_0_document_0_phone.png
      compare | OK: /classification/01000_en backstop_smoketest__classification_01000_en_0_document_1_tablet.png
      compare | OK: /classification/01000_en backstop_smoketest__classification_01000_en_0_document_2_desktop.png
      compare | OK: /tags/economic_en backstop_smoketest__tags_economic_en_0_document_0_phone.png
      compare | OK: /tags/economic_en backstop_smoketest__tags_economic_en_0_document_1_tablet.png
      compare | OK: /tags/economic_en backstop_smoketest__tags_economic_en_0_document_2_desktop.png
      compare | OK: People backstop_smoketest_People_0_document_1_tablet.png
      compare | OK: Administration backstop_smoketest_Administration_0_document_0_phone.png
      compare | OK: People backstop_smoketest_People_0_document_0_phone.png
      compare | OK: People backstop_smoketest_People_0_document_2_desktop.png
      compare | OK: Reports backstop_smoketest_Reports_0_document_2_desktop.png
      compare | OK: Administration backstop_smoketest_Administration_0_document_1_tablet.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_0_phone.png
      compare | OK: Administration backstop_smoketest_Administration_0_document_2_desktop.png
      compare | OK: Reports backstop_smoketest_Reports_0_document_0_phone.png
      compare | OK: Reports backstop_smoketest_Reports_0_document_1_tablet.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_2_desktop.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_1_tablet.png
      compare | OK: /taxonomy-browser-header_en backstop_smoketest__taxonomy-browser-header_en_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: /taxonomy-browser-header_en backstop_smoketest__taxonomy-browser-header_en_0_document_1_tablet.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: /taxonomy-browser-header_en backstop_smoketest__taxonomy-browser-header_en_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_0_phone.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_1_tablet.png
      compare | OK: /translate/default_en backstop_smoketest__translate_default_en_0_document_0_phone.png
      compare | OK: /translate/default_en backstop_smoketest__translate_default_en_0_document_2_desktop.png
      compare | OK: Manage translation tasks backstop_smoketest_Manage_translation_tasks_0_document_2_desktop.png
      compare | OK: /translate/elegible_en backstop_smoketest__translate_elegible_en_0_document_1_tablet.png
      compare | OK: /translate/default_en backstop_smoketest__translate_default_en_0_document_1_tablet.png
      compare | OK: /translate/elegible_en backstop_smoketest__translate_elegible_en_0_document_2_desktop.png
      compare | OK: /translate/elegible_en backstop_smoketest__translate_elegible_en_0_document_0_phone.png
      compare | OK: /translate/pending_en backstop_smoketest__translate_pending_en_0_document_0_phone.png
      compare | OK: /translate/mine_en backstop_smoketest__translate_mine_en_0_document_0_phone.png
      compare | OK: /translate/mine_en backstop_smoketest__translate_mine_en_0_document_1_tablet.png
      compare | OK: /translate/mine_en backstop_smoketest__translate_mine_en_0_document_2_desktop.png
      compare | OK: /translate/pending_en backstop_smoketest__translate_pending_en_0_document_1_tablet.png
      compare | OK: /translate/pending_en backstop_smoketest__translate_pending_en_0_document_2_desktop.png
      compare | OK: /translate/completed_en backstop_smoketest__translate_completed_en_0_document_0_phone.png
      compare | OK: /translate/completed_en backstop_smoketest__translate_completed_en_0_document_1_tablet.png
      compare | OK: /translate/completed_en backstop_smoketest__translate_completed_en_0_document_2_desktop.png
      compare | OK: /translate/rejected_en backstop_smoketest__translate_rejected_en_0_document_1_tablet.png
      compare | OK: /translate/rejected_en backstop_smoketest__translate_rejected_en_0_document_0_phone.png
      compare | OK: /translate/closed_en backstop_smoketest__translate_closed_en_0_document_0_phone.png
      compare | OK: /translate/rejected_en backstop_smoketest__translate_rejected_en_0_document_2_desktop.png
      compare | OK: /translate/closed_en backstop_smoketest__translate_closed_en_0_document_1_tablet.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_2_desktop.png
      compare | OK: /translate/closed_en backstop_smoketest__translate_closed_en_0_document_2_desktop.png
      compare | OK: My content backstop_smoketest_My_content_0_document_0_phone.png
      compare | OK: My content backstop_smoketest_My_content_0_document_1_tablet.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_0_phone.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_1_tablet.png
      compare | OK: Translation backstop_smoketest_Translation_0_document_1_tablet.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_1_tablet.png
      compare | OK: My content backstop_smoketest_My_content_0_document_2_desktop.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_1_tablet.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_0_phone.png
      compare | OK: My content backstop_smoketest_My_content_0_document_0_phone.png
      compare | OK: My content backstop_smoketest_My_content_0_document_1_tablet.png
      compare | OK: My content backstop_smoketest_My_content_0_document_2_desktop.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_2_desktop.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_0_phone.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_0_phone.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_2_desktop.png
      compare | OK: My Workbench backstop_smoketest_My_Workbench_0_document_2_desktop.png
       report | Test completed...
       report | 84 Passed
       report | 0 Failed
       report | Writing browser report
       report | Resources copied
       report | Copied configuration to: /src/backstop_data/html_report/config.js
      COMMAND | Command `report` successfully executed in [4.551s]
      COMMAND | Command `test` successfully executed in [40.311s]

Since it looks like it's indeed hard to control the output. I'll try to create a pull request that lets people use a flag and/or level setting. But might take a while to get there.

Anyway much thanks for taking the time to propose a possible solution. I'll do my best to get something done for this later on.

I think it may be a good idea to provide some output formatters like behat does (progress vs pretty).

[garris]

Looks good. Thanks for following up.

If you did do any work on a PR then it would be sufficient to just refactor that listener to use refactoredConsoleMethodHere above -- instead of the inline fn.

Otherwise, taking a flag approach would need to be somehow unified with the existing debug property. e.g. change from bool to str and create groups like "silent", "error", "log", "debug" "verbose" etc.

Ok. cheers

[jonathanloske]

I also wanted to disable logging and used the code @verbruggenalex posted, with one slight variation in my onReady.js, where I used process.stdout.write instead of console.log (with a \n at the end so we get proper newlining). This way, console logging can stay disabled and I still get the output I need. @garris: Would that be a good way forward?

onReady.js

module.exports = async (page, scenario, vp) => {
  process.stdout.write('SCENARIO > ' + scenario.label + ' (' + vp.label + ')\n');
  await require('./clickAndHoverHelper')(page, scenario);
};

Some more context: I'm using BackstopJS to test my Storybook. Storybook is very talkative and continuously spammed my console with output like Browser Console Log 1: JSHandle:storyRender, until my terminal was complaining:

Warning: stdout maxBuffer exceeded

With the code above, everything is now dandy :)

[garris]

Looks great.

[garris]

Maybe we can add these scripts as part of the default scaffolding.

[jonathanloske]

That would be a nice idea! Are you talking about the files underneath the chromy folder? I could prepare a pull request for this :)

[jonathanloske]

Hm, I just realized that I don't see anything after and including COMMAND | Executing core for \report``. Could we change the output of that to process.stdout.write? For my personal use case, I'm currently okay with not seeing them since I always look at the html report anyway in case anything goes wrong.

[jonathanloske]

...upon further investigation, couldn't we just silence console.log by changing the page.on('console') listener in runPuppet.js?

[smvilar]

Hi! When I tried the code @verbruggenalex suggested, the issue I had was that, since tests run in parallel, the code that enables logging is not guaranteed to run last. Disabling parallelization wasn't an option for me for timing reasons. I'm not working with Backstop anymore but it was a great experience. Let us know how does it go with that page.on('console') listener!

[randombitsUK]

Thanks to some of the suggestions here, I've implemented it in this way (in onBefore.js)

module.exports = async (page, scenario, vp) => {
    const ignoredMessages = [
        'Download the React DevTools for a better development experience',
        'BackstopTools have been installed',
    ];

    console.log = (message) => {
        ignoredMessages.some(ignore => message.includes(ignore)) ? undefined : process.stdout.write(`${message}\n`);
    };

    ...
};

[WalkingDexter]

Works with Playwright engine (in onBefore.js) page.removeAllListeners('console');