Cypress: Proposal: Add command-line flag for opening dev tools during run

[chrisbreiding]

With these changes, it will no longer be possible to have opened the dev tools for electron in interactive mode and then have them automatically opened during a run. Also, it's never been possible to explicitly tells other browsers to open their dev tools.

Add a flag (--dev-tools or --open-dev-tools) that will open the browser dev tools on launch so a debugger in test or app code can hit and pause the run for debugging purposes.

[brian-mann]

Chrome already has a flag to do this. So does electron. I suppose we could normalize this into a CLI argument perhaps - but users could already do this via the plugins API and modifying the launch args for chrome + for electron.

[brian-mann]

• https://peter.sh/experiments/chromium-command-line-switches/#auto-open-devtools-for-tabs
• https://electronjs.org/docs/api/browser-window#new-browserwindowoptions

[jennifer-shehane]

Electron says that the option is devTools: true by default. But, Cypress actually overrides this in our options when opening Electron here:

https://github.com/cypress-io/cypress/blob/issue-4310/packages/server/lib/gui/windows.coffee#L142

WebPreferences logged at launch include no devTools

{ 
  partition: null,
  chromeWebSecurity: true,
  nodeIntegration: false,
  backgroundThrottling: false 
}

Even so, when the option is true is only allows you to later call BrowserWindow.webContents.openDevTools(), which we are not doing (unless the user's previous state had the devTools open.)

So, I don't think this will work with Electron without some changes to Cypress.

Workaround for Chrome

Auto opening devTools within Chrome does work today with the following code in your cypress/plugins.js file.

You can run this with cypress open, cypress run --browser=chrome --headed and will see the DevTools auto open during the run.

Since there is no video recording done with the chrome browser, using this flag for cypress run --browser=chrome would be useless. Furthermore, when screenshots are taken via cy.screenshot() or a failure screenshot, these do not include the DevTools within the screenshot.

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome' || browser.name === 'chromium' || browser.name === 'canary') {
      args.push('--auto-open-devtools-for-tabs')

      return args
    }
  })
}

[geralfonso]

There is no workaround for electron?

[dwelle]

@geralfonso There is, by setting args.devTools = true (which is an option custom to Cypress) --- Electron-browser only.

on('before:browser:launch', (browser = {}, args) => {
  if (browser.name === 'chrome') {
    args = args.concat('--auto-open-devtools-for-tabs');
  } else if (browser.name === 'electron') {
    // Cypress-specific option (state)
    args.devTools = true;
  }
  return args;
});

[mjlawrence83]

I could really do with this when run'ing headless with electron. At the moment a test is failing during a Jenkins build and it would have been helpful to force the devTools to open so I could see the console errors in the screenshot.

I've tried @dwelle suggestion, but it doesn't work on 3.8.1. devTools = true is definitely being sent though as I can see it in the DEBUG output.

UPDATE: I've worked around it by using the suggested workarounds to print all console output to stdout. Now I can see the browser errors

[mikhaildzarasovvineti]

@mjlawrence83 can you post a link with that workaround? Thanks

[FFdhorkin]

@geralfonso There is, by setting args.devTools = true (which is an option custom to Cypress) --- Electron-browser only.

on('before:browser:launch', (browser = {}, args) => {
  if (browser.name === 'chrome') {
    args = args.concat('--auto-open-devtools-for-tabs');
  } else if (browser.name === 'electron') {
    // Cypress-specific option (state)
    args.devTools = true;
  }
  return args;
});

This is not quite right (or it's out of date), based on my testing. Here's what I have:

    on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
            launchOptions.args.push('--auto-open-devtools-for-tabs');
        } else if (browser.family === 'firefox') {
            launchOptions.args.push('-devtools');
        } else if (browser.name === 'electron') {
            launchOptions.preferences.devTools = true;
        }

        return launchOptions;
    });

[nukboda]

Please can you tell me in which file I should update ,this commands. Can you provide with entire example with file name and file contents fully.

[Nesay-hub]

Please can you tell me in which file I should update ,this commands. Can you provide with entire example with file name and file contents fully.

[rbabayoff]

For electron, launchOptions.preferences.devTools = true only allows the opening of dev tools, doesn't actually open it.

To open it, the documentation states that you need to call BrowserWindow.webContents.openDevTools(). BrowserWindow is an electron object. How do I get access to it from my tests, if at all possible?

@mjlawrence83 , I have the same problem as you - a test that fails only in ci. 2 days on it already trying figure out how to open devtools or redirect output. How did you end up printing all console output to stdout?

Cypress team - on behalf of myself and I'm sure many many others (saw quite a few related issues), it is very frustrating that easy access to console output to debug ci only problems is not part of the cypress core.