feat: pass list of browsers to plugins file

[bahmutov]

Passes list of detected browsers to the plugins file and lets the user modify the list.

• closes #5067
• closes #5712

User facing changelog

• Cypress now includes the full list of browsers found and their properties within the Cypress configuration. This means that the browsers array is also editable within plugins by accessing config.browsers. The currently available browsers is also displayed within the configuration panel under Settings in the Test Runner.

Additional details

Reworking browser detection and config to do the following:

1. find all browsers
2. set the browsers on the config object
3. pass the config to the plugins if any, allowing the user to adjust the list and return the updated list
4. if running in the interactive mode (cypress open)

• show the updated list in the browser picker

5. else pick the browser from the updated list.

• by default, it is electron, which if the user removes from the list will cause an error
• if the user passed --browser <name> CLI then pick that browser from the current updated list of browsers
• if the user passed --browser <path> disregard the updated list and discover the browser just like we do now

How has the user experience changed?

Example use: https://github.com/cypress-io/cypress-example-electron/blob/master/cypress/plugins/index.js

Config Before

Config After

PR Tasks

• Have tests been added/updated for the changes in this PR?
• Has a PR to cypress-documentation been submitted to document any user-facing changes? cypress-io/cypress-documentation#2245
• Has the original issue been tagged with a release in ZenHub?
• update resolved configuration display, right now shows [object], ... for the list of browsers
• add a test to make sure user cannot list browsers in cypress.json but in the plugins only

[bahmutov]

Testing it locally with command

DEBUG=cypress:launcher,cypress:server:plugins:child npm run dev -- --project ~/git/cypress-example-electron/

Which shows the browser detection happens first, and then the plugins file loading, so we do have this information

  cypress:launcher checking one browser canary +0ms
  cypress:launcher looking up canary on darwin platform +0ms
  cypress:launcher looking for app Contents/MacOS/Google Chrome Canary id com.google.Chrome.canary +0ms
  cypress:launcher looking for bundle id com.google.Chrome.canary using command: mdfind 'kMDItemCFBundleIdentifier=="com.google.Chrome.canary"' | head -1 +0ms
  cypress:launcher found com.google.Chrome.canary at /Applications/Google Chrome Canary.app +49ms
  cypress:launcher reading property file "/Applications/Google Chrome Canary.app/Contents/Info.plist" +1ms
  cypress:launcher setting major version for {"name":"canary","family":"chrome","displayName":"Canary","version":"78.0.3896.6","path":"/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"} +17ms
  cypress:launcher browser canary version 78.0.3896.6 major version 78 +0ms
  cypress:server:plugins:child pluginsFile: /Users/gleb/git/cypress-example-electron/cypress/plugins/index.js +0ms
  cypress:server:plugins:child require pluginsFile +2ms
/Users/gleb/git/cypress-example-electron/cypress/plugins/index.js
[ '/Users/gleb/git/cypress/packages/electron/dist/Cypress/Cypress.app/Contents/Frameworks/Cypress Helper.app/Contents/MacOS/Cypress Helper',
  '/Users/gleb/git/cypress/packages/server/lib/plugins/child/index.js',
  '--file',
  '/Users/gleb/git/cypress-example-electron/cypress/plugins/index.js' ]
  cypress:server:plugins:child plugins load file "/Users/gleb/git/cypress-example-electron/cypress/plugins/index.js" +14ms
  cypress:server:plugins:child run plugins function +1ms
  cypress:server:plugins:child register event _get:task:body with id 0 +0ms
  cypress:server:plugins:child register event _get:task:keys with id 1 +0ms
argument config
{ animationDistanceThreshold: 5,

[cypress]

---

Test summary

3511 • 0 • 45 • 0

---

Run details

Project	cypress
Status	Passed
Commit	ecb3a03
Started	Nov 19, 2019 1:54 PM
Ended	Nov 19, 2019 1:58 PM
Duration	03:51 💡
OS	Linux Debian - 9.8
Browser	Multiple

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[jennifer-shehane]

In terms of the API changes, @brian-mann mentioned that we should have a method call like setBrowser or setBrowsers so that we could actually do some validation on what is passed in - instead of the static overriding of the object. A user could mutate it and just completely mess up the launching of Cypress browser and we want to try and avoid that situation if possible.

[bahmutov]

I think simplicity right now wins - if you mutate the other configuration values, you can screw things up, but how often users would screw the list of browsers and leave the invalid configuration? If they send an invalid browser, we could validate - just like we should validate the entire modified config object after getting it back.

[bahmutov]

This PR also enables to run tests in Microsft Edge Beta (Chromium-based) or Brave browser by simply returning them from the plugins file

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  const pathToBrave =
    '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser'
  config.browsers.push({
    name: 'brave',
    family: 'chrome',
    displayName: 'Brave',
    version: 'unknown',
    path: pathToBrave,
    majorVersion: 'unknown'
  })

  return config
}

[brian-mann]

@bahmutov

• add an e2e test that mutates config.browsers with an object - so that the error is handled and is snapshotted
• ensure that we are validating invalid config after its returned from the pluginsFile
  • added e2e tests

@andrew-codes

• fix nested objects such as browsers jumping when you click on the arrow and expands them
• add in the missing : colon when nested objects are expanded
• show Array(len) when arrays are expanded in the preview area of the array
• think about maybe adding a "Copy" button that copies the derived final configuration object (non blocking, low priority)
• reduce the line height to match dev tools