cypress-redirect-browser-log

Will connect to chrome debugging protocol and redirect logs to node process

Will redirect browser console events like:

• console API events
• uncaught exceptions
• browser console events

Install:

npm i --save-dev cypress-redirect-browser-log

Requires Cypress >11.x as peer dependency

Setup

1. Set environment variable

Logs will be redirected to node console when environment variable REDIRECT_BROWSER_LOG is set to true.

2. Setup plugins

You need to add redirectLog(on, config); into your plugins file.

See example of the simplest configuration:

1// cypress.config.ts
2import { redirectLog } from 'cypress-redirect-browser-log/plugins';
3
4export default defineConfig({
5  e2e: {
6    // ...
7    setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
8      redirectLog(on, config);
9    
10      //... other existing configrations
11    
12      return config;
13    }
14  }
15});

For more options see advanced section below.

3. Setup support (e2e.ts)

To see logs from tests put this into your support file (e2e.ts or support/index.ts)

1// support/index.ts or where is support located (e2e.ts)
2import { redirectTestLogs } from 'cypress-redirect-browser-log';
3
4redirectTestLogs({
5  isLogCommandDetails: false,
6});

• isLogCommandDetails: set to true to see all commands with details from test

To disable logs from tests you can setup plugins as follows:

1// disable test log
2redirectLog(on, config, handler => {
3  handler.on('test:log', () => {
4    // ignore 
5  });
6});
7
8// or specify only events you want to see
9redirectLog(on, config, ['excpetion', 'error', 'log', 'warn']);

4. Run tests

Run tests with --browser chrome --headless (for electron logs will not be redirected)

5. That's it

You'll see logs in node console like:

1FROM CHROME >> 2023-06-06T07:12:01.046Z |     test | ======== TEST STARTED: test integration should be no details for commands
2FROM CHROME >> 2023-06-06T07:12:01.148Z |     test | command: route ->
3FROM CHROME >> 2023-06-06T07:12:01.166Z |     test | command: visit -> mytest.com
4FROM CHROME >> 2023-06-06T07:12:01.438Z |      log | LOG FROM APPLICATION!!
5FROM CHROME >> 2023-06-06T07:12:01.438Z |  warning | WARN FROM APPLICATION!!
6FROM CHROME >> 2023-06-06T07:12:01.438Z |  warning |     at http://localhost:58040/mytest.com:23:16 (<no functionName>)
7FROM CHROME >> 2023-06-06T07:12:01.438Z |    error | ERROR FROM APPLICATION!!
8FROM CHROME >> 2023-06-06T07:12:01.438Z |    error |     at http://localhost:58040/mytest.com:24:16 (<no functionName>)
9FROM CHROME >> 2023-06-06T07:12:01.466Z |     test | command: get -> div
10FROM CHROME >> 2023-06-06T07:12:01.486Z |     test | command: assert -> expected [ <div>, 1 more... ] to exist in the DOM
11FROM CHROME >> 2023-06-06T07:12:01.504Z |     test | ==== TEST RESULT: PASSED

:tada:

For your own log events and formatting see advanced

Advanced

With default configuration you will see logs from events : exception, error, warn, log, debug, test:log.

Showing only specific events

• If you need to show for example only errors and exceptions in plugins add one more argument:

  1// will show only errors in excpetions
  2redirectLog(on, config, ['error', 'exception']);

• If you want to create your own message (or do anything you want with result):

  1// will override output of errors and excpetions
  2redirectLog(on, config, handler => {
  3  handler.on('error', res => {
  4    console.error(res.message);
  5  });
  6     
  7  handler.on('exception', res => { 
  8    console.error(res.message);
  9  });
  10});

• If you want to show default log for specific events and own messages:

  1    // will show all from test logs and your errors and exceptions
  2    redirectLog(on, config, ['test:log'], handler => {
  3        handler.on('error', res => {
  4          console.error(res.message);
  5        });
  6        handler.on('exception', res => {
  7          console.error(res.message);
  8        });
  9      });

Handling before:browser:launch

if you need to handle 'before:browser:launch' you can use this configuration :

1  const browserHandler = redirectLogBrowser(config);
2  
3  on('before:browser:launch', (browser: Browser, browserLaunchOptions: BrowserLaunchOptions) => {
4    // your other browser handling
5    return browserHandler(browser, browserLaunchOptions);
6  });
7

redirectLogBrowser accepts similar overloads as redirectLog

Contribution

• typescript
• code coverage for cypress and jest, merge coverage
• formatting and eslint
• jest tests
• log uncaught exceptions from your Application
• todo to file
• todo config
• todo docs