Add script to run Cypress tests interactively
This patch adds a script that lets folks debug their tests more
easily. When run, Chrome will open up on the user's screen, letting
them see live what the test is doing. Additionally, users can inject
`cy.pause()` commands to pause test execution.
Unfortunately, I couldn't get the `debugger` statement to work.
Cypress seems to ignore it completely. Same with the `.debug()`
command.
Since the script passes `--headed` to Cypress, I had to remove the
explicit `headless: true` in the config. Those two options conflict,
but "headless" is the default. So there's no need to set it
explicitly.
Signed-off-by: Philipp Schrader <philipp.schrader@gmail.com>
Change-Id: I9cd7d521c4636a17a75f352960a810242bdeaebf
diff --git a/scouting/README.md b/scouting/README.md
index 6e31b5b..7e1a58a 100644
--- a/scouting/README.md
+++ b/scouting/README.md
@@ -124,3 +124,8 @@
where `<year>` is the year of the event and `<event_code>` is the short code
for the event. A list of event codes is available
[here](http://frclinks.com/#eventcodes).
+
+
+Debugging Cypress tests
+--------------------------------------------------------------------------------
+See the [dedicated section](../tools/js#debugging-cypress-tests) for this.
diff --git a/scouting/scouting_test_runner.js b/scouting/scouting_test_runner.js
index c8f60f8..3106ee7 100644
--- a/scouting/scouting_test_runner.js
+++ b/scouting/scouting_test_runner.js
@@ -63,7 +63,6 @@
await serverStartup;
const result = await cypress.run(
Object.assign(runOptions, {
- headless: true,
config: {
baseUrl: 'http://localhost:8000',
screenshotsFolder:
diff --git a/tools/build_rules/js/cypress.config.js b/tools/build_rules/js/cypress.config.js
index 4eb1a82..c8d6988 100644
--- a/tools/build_rules/js/cypress.config.js
+++ b/tools/build_rules/js/cypress.config.js
@@ -7,6 +7,9 @@
setupNodeEvents(on, config) {
on('before:browser:launch', (browser = {}, launchOptions) => {
launchOptions.args.push('--disable-gpu-shader-disk-cache');
+ launchOptions.args.push('--enable-logging');
+ launchOptions.args.push('--v=stderr');
+ return launchOptions;
});
// Lets users print to the console:
diff --git a/tools/js/README.md b/tools/js/README.md
new file mode 100644
index 0000000..68f2264
--- /dev/null
+++ b/tools/js/README.md
@@ -0,0 +1,28 @@
+Javascript-related Information
+================================================================================
+
+Debugging Cypress tests
+--------------------------------------------------------------------------------
+You can run Cypress tests interactively. I.e. the browser will open up and you
+can interact with it. Use the `tools/js/run_cypress_test_interactively.sh`
+script for this.
+
+```console
+$ ./tools/js/run_cypress_test_interactively.sh //path/to:test
+(opens Chrome and runs tests)
+```
+
+All arguments to the script are passed to `bazel test`. So you can specify `-c
+opt` and other bazel options.
+
+### Pausing execution
+Use [`cy.pause()`](https://docs.cypress.io/api/commands/pause) to pause
+execution. Resume by hitting the green "Play" icon near the top left.
+
+Pausing can be helpful when you're trying to understand more about the state of
+the web page in the middle of a test.
+
+### Getting `console.log()` output
+Add `--test_env=DEBUG=cypress:launcher:browsers` to your test execution.
+Cypress will then log Chrome's output. Among which will be all `console.log()`
+statements.
diff --git a/tools/js/run_cypress_test_interactively.sh b/tools/js/run_cypress_test_interactively.sh
new file mode 100755
index 0000000..8869cc0
--- /dev/null
+++ b/tools/js/run_cypress_test_interactively.sh
@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -o errexit
+set -o nounset
+set -o pipefail
+
+bazel test \
+ --test_env=DISPLAY="${DISPLAY}" \
+ --strategy=TestRunner=processwrapper-sandbox \
+ --test_output=streamed \
+ --test_arg=--headed \
+ --test_timeout=9999 \
+ "$@"