Connect to Chrome Remote Interface when launching Chrome and re… (#4628)

* try connecting to chrome remote interface

* linting

* print CRI targets for better debugging

* linting

* load empty tab first when connecting to CRI

* first load blank page, then navigate

* Page.navigate is working

* linting

* remove title

* add mocha banner

* more banners

* update some server unit tests

* update integration test

* document how to run single driver spec file

* set the focus back on the page before navigating from blank chrome tab

* update server unit test

* do not store Chrome remote interface reference for now

* record video of the Chrome tab using screencast API

* use dynamic port to connect to Chrome remote interface

* update unit tests

* refactoring

* wrap chrome remote interface in our interface, limit access to send

* resolved merge

* fix reference

* passing run unit spec

* stub canary search for CI to pass

* add build step to packages/server

* update chrome spec

* do not build js on install for server

* updated spec snapshots

* update 6_visit_spec snapshot

* update snapshot for 6_web_security_spec

* update snapshot for 3_plugins_spec

* update snapshot for 3_user_agent_spec

* update snapshot for 5_stdout_spec

* update snapshot for 2_browser_path_spec

* do not git ignore js files, add note why

* update several snapshots with video on Chrome

* update visit performance snapshot

* add chrome-remote-interface dependency

* cleanup coffeescript conversion to JS, fix some type errors, make parallel override clearer

* fix failing tests

* Fix snapshot - now we do record in Chrome, so warning message is no longer there.

* remove chrome warnings about not recording from snapshot

* Remove performance tests from 6_visit_spec snapshot

* Remove error from snapshot

* Add newline back to cy_visit_performance_spec snapshot

* Navigate to about:blank

* look for blank page url

* add note about avoiding Prettier

* disable prettier a little more

* call chrome remote interface close after each spec

* return promise when starting screencast

* update failing unit tests, add cri client close test

* update integration test

* Add verbose debug statements to cri-client

* Use connect.createRetryingSocket for CDP connection

* record video from chrome browsers

* add method for validating browser family

* update e2e spec snapshot

* update 4_request_spec snapshot

* update snapshot for spec 1_commands_outside_of_test_spec

* update snapshot for 3_plugins_spec

* update snapshot for spec 3_user_agent_spec

* try: Always log video capturing errors

* update snapshot for 2_browser_path_spec

* update snapshot for 2_cookies_spec

* better browser family test

* update snapshot for 5_stdout_spec

* update snapshot for 5_subdomain_spec

* Add protocol_spec tests

* do not capture video during performance test

* Add test for VIDEO_POST_PROCESSING_FAILED warning

* use client.on to register screencast callback

* cleanup prettier, extract some functions, switch to browser.family

* moar cleanup and fixes

* add logging to the cri-client so we can see every message sent + received to the cdp protocol

* bump bluebird to 3.7.0 for .tapCatch addition

* Fix unit tests

* WIP: update e2e test to ensure that duration of the video matches what we expect

* Test duration of recorded video

* Run 6_video_compression in chrome + electron

* Cleanup

* finish ffmpeg duration verification

* Update 8_reporters_spec snapshot

* Update CRI close logic to monkey-patch browser.kill

* add isBrowserFamily back

* make it possible for remote-debugging-port to get overridden

* Make CDP timeout 5s; add unit, e2e tests for CDP failure; add user-friendly CDP failure error

* Update tests

* Use CYPRESS_REMOTE_DEBUGGING_PORT to set CDP port; update CDP error message


Co-authored-by: Brian Mann <brian.mann86@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>
Co-authored-by: Zach Bloomquist <github@chary.us>

.vscode/settings.json

@@ -28,4 +28,14 @@
     },
   ],
   "eslint.enable": true,
+  // this project does not use Prettier
+  // thus set all settings to disable accidentally running Prettier
+  "prettier.requireConfig": true,
+  "prettier.disableLanguages": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "json"
+  ]
 }

CONTRIBUTING.md

@@ -366,6 +366,8 @@ npm run lint-changed-fix
 When committing files, we run a Git pre-commit hook to lint the staged JS files. See the [`lint-staged` project](https://github.com/okonet/lint-staged).
 If this command fails, you may need to run `npm run lint-changed-fix` and commit those changes.
 
+We **DO NOT** use Prettier to format code. You can find [.prettierignore](.prettierignore) file that ignores all files in this repository. To ensure this file is loaded, please always open _the root repository folder_ in your text editor, otherwise your code formatter might execute, reformatting lots of source files.
+
 ### Tests
 
 For most packages there are typically unit and some integration tests.

packages/driver/README.md

@@ -55,6 +55,28 @@ cd packages/driver
 npm start
 ```
 
+For working with a single spec file, use `testFiles` configuration option. For example, to only show the `e2e/focus_blur_spec.js` spec file when Cypress is opened use (path is relative to `test/cypress/integration` folder)
+
+```bash
+npm run cypress:open -- --config testFiles=e2e/focus_blur_spec.js
+```
+
+Or to run that single spec headlessly
+
+```bash
+npm run cypress:run -- --config testFiles=e2e/focus_blur_spec.js
+```
+
+Alternative: use `--spec`, but pass the path from the current folder, for example
+
+```bash
+npm run cypress:run -- --spec test/cypress/integration/issues/1939_1940_2190_spec.js --browser chrome
+```
+
+If you want to run tests in Chrome and keep it open after the spec finishes, you can do
+
+```bash
+npm run cypress:run -- --config testFiles=e2e/focus_blur_spec.js --browser chrome --no-exit
 If you would like to run a particular integration test, see the GUI and poke around during the test, you can an exclusive test like:
 
 ```bash

packages/server/.gitignore

@@ -1,3 +1,5 @@
-lib/util/ensure-url.js
-lib/util/proxy.js
+# we do not explicitly ignore JavaScript files in "lib/browsers" folder
+# because when we add TS files we do not transpile them as a build step
+# instead always use require hooks to transpile TS files on the fly
+
 .http-mitm-proxy

packages/server/__snapshots__/1_commands_outside_of_test_spec.coffee.js

@@ -73,12 +73,6 @@ exports['e2e commands outside of test [chrome] fails on cy commands 1'] = `
                                                                                                     
   Running: commands_outside_of_test_spec.coffee...                                         (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   1) An uncaught error was detected outside of a test
 
@@ -123,7 +117,7 @@ We dynamically generated a new test to display this failure.
   │ Pending:      0                                    │
   │ Skipped:      0                                    │
   │ Screenshots:  1                                    │
-  │ Video:        false                                │
+  │ Video:        true                                 │
   │ Duration:     X seconds                            │
   │ Spec Ran:     commands_outside_of_test_spec.coffee │
   └────────────────────────────────────────────────────┘
@@ -134,6 +128,12 @@ We dynamically generated a new test to display this failure.
   - /foo/bar/.projects/e2e/cypress/screenshots/commands_outside_of_test_spec.coffee/An uncaught error was detected outside of a test (failed).png (YYYYxZZZZ)
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)
@@ -166,12 +166,6 @@ exports['e2e commands outside of test [chrome] fails on failing assertions 1'] =
                                                                                                     
   Running: assertions_failing_outside_of_test_spec.coffee...                               (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   1) An uncaught error was detected outside of a test
 
@@ -202,7 +196,7 @@ We dynamically generated a new test to display this failure.
   │ Pending:      0                                              │
   │ Skipped:      0                                              │
   │ Screenshots:  1                                              │
-  │ Video:        false                                          │
+  │ Video:        true                                           │
   │ Duration:     X seconds                                      │
   │ Spec Ran:     assertions_failing_outside_of_test_spec.coffee │
   └──────────────────────────────────────────────────────────────┘
@@ -213,6 +207,12 @@ We dynamically generated a new test to display this failure.
   - /foo/bar/.projects/e2e/cypress/screenshots/assertions_failing_outside_of_test_spec.coffee/An uncaught error was detected outside of a test (failed).png (YYYYxZZZZ)
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/2_browser_path_spec.coffee.js

@@ -16,12 +16,6 @@ exports['e2e launching browsers by path works with an installed browser path 1']
                                                                                                     
   Running: simple_spec.coffee...                                                           (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   ✓ is true
 
@@ -37,12 +31,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0                  │
   │ Skipped:      0                  │
   │ Screenshots:  0                  │
-  │ Video:        false              │
+  │ Video:        true               │
   │ Duration:     X seconds          │
   │ Spec Ran:     simple_spec.coffee │
   └──────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/2_cdp_spec.ts.js

@@ -0,0 +1,30 @@
+exports['e2e cdp fails when remote debugging port cannot be connected to 1'] = `
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:    1.2.3                                                                              │
+  │ Browser:    FooBrowser 88                                                                      │
+  │ Specs:      1 found (spec.ts)                                                                  │
+  │ Searched:   cypress/integration/spec.ts                                                        │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+                                                                                                    
+  Running: spec.ts...                                                                      (1 of 1) 
+Cypress failed to make a connection to the Chrome DevTools Protocol after retrying for 5 seconds.
+
+This usually indicates there was a problem opening the Chrome browser.
+
+The CDP port requested was 7777.
+
+Error details:
+
+Error: connect ECONNREFUSED 127.0.0.1:7777
+    at stack trace line
+
+
+`

packages/server/__snapshots__/2_cookies_spec.coffee.js

@@ -16,12 +16,6 @@ exports['e2e cookies passes in chrome 1'] = `
                                                                                                     
   Running: cookies_spec.coffee...                                                          (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   cookies
     with whitelist
@@ -49,12 +43,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0                   │
   │ Skipped:      0                   │
   │ Screenshots:  0                   │
-  │ Video:        false               │
+  │ Video:        true                │
   │ Duration:     X seconds           │
   │ Spec Ran:     cookies_spec.coffee │
   └───────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/3_plugins_spec.coffee.js

@@ -197,12 +197,6 @@ exports['e2e plugins works with user extensions 1'] = `
                                                                                                     
   Running: app_spec.coffee...                                                              (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   ✓ can inject text from an extension
 
@@ -218,12 +212,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0               │
   │ Skipped:      0               │
   │ Screenshots:  0               │
-  │ Video:        false           │
+  │ Video:        true            │
   │ Duration:     X seconds       │
   │ Spec Ran:     app_spec.coffee │
   └───────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/plugin-extension/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/3_user_agent_spec.coffee.js

@@ -16,12 +16,6 @@ exports['e2e user agent passes on chrome 1'] = `
                                                                                                     
   Running: user_agent_spec.coffee...                                                       (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   user agent
     ✓ is set on visits
@@ -40,12 +34,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0                      │
   │ Skipped:      0                      │
   │ Screenshots:  0                      │
-  │ Video:        false                  │
+  │ Video:        true                   │
   │ Duration:     X seconds              │
   │ Spec Ran:     user_agent_spec.coffee │
   └──────────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/4_request_spec.coffee.js

@@ -88,12 +88,6 @@ exports['e2e requests passes in chrome 1'] = `
                                                                                                     
   Running: request_spec.coffee...                                                          (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   redirects + requests
     ✓ gets and sets cookies from cy.request
@@ -122,12 +116,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0                   │
   │ Skipped:      0                   │
   │ Screenshots:  0                   │
-  │ Video:        false               │
+  │ Video:        true                │
   │ Duration:     X seconds           │
   │ Spec Ran:     request_spec.coffee │
   └───────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/5_stdout_spec.coffee.js

@@ -355,12 +355,6 @@ exports['e2e stdout logs that chrome cannot be recorded 1'] = `
                                                                                                     
   Running: simple_spec.coffee...                                                           (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   ✓ is true
 
@@ -376,12 +370,18 @@ A video will not be recorded when using this browser.
   │ Pending:      0                  │
   │ Skipped:      0                  │
   │ Screenshots:  0                  │
-  │ Video:        false              │
+  │ Video:        true               │
   │ Duration:     X seconds          │
   │ Spec Ran:     simple_spec.coffee │
   └──────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)

packages/server/__snapshots__/5_subdomain_spec.coffee.js

@@ -86,12 +86,6 @@ exports['e2e subdomain passes in chrome 1'] = `
                                                                                                     
   Running: subdomain_spec.coffee...                                                        (1 of 1) 
 
-Warning: Cypress can only record videos when using the built in 'electron' browser.
-
-You have set the browser to: 'chrome'
-
-A video will not be recorded when using this browser.
-
 
   subdomains
     ✓ can swap to help.foobar.com:2292
@@ -118,12 +112,18 @@ A video will not be recorded when using this browser.
   │ Pending:      2                     │
   │ Skipped:      0                     │
   │ Screenshots:  0                     │
-  │ Video:        false                 │
+  │ Video:        true                  │
   │ Duration:     X seconds             │
   │ Spec Ran:     subdomain_spec.coffee │
   └─────────────────────────────────────┘
 
 
+  (Video)
+
+  - Started processing:   Compressing to 32 CRF
+  - Finished processing:  /foo/bar/.projects/e2e/cypress/videos/abc123.mp4 (X seconds)
+
+
 ====================================================================================================
 
   (Run Finished)