Add e2e debugging logs (#16937)

A `debug` flag has been added to our e2e test runner scripts, enabling
e2e debug logs. When this flag is enabled, all driver interactions will
be logged to the console. This is extremely useful when debugging e2e
tests, because it lets you known how far the test had progressed before
failing.

This flag should work with all existing e2e test scripts, including
both `test:e2e:single` and all of the test commands that run entire
test suites.

The README has been updated to reference this flag in the section
regarding how to run a single e2e test. To ensure this wasn't totally
missed for the other scripts, I added a line suggesting that users use
`--help` to see all supported options.

README.md

@@ -68,21 +68,26 @@ Our e2e test suite can be run on either Firefox or Chrome.
  * Firefox e2e tests can be run with `yarn test:e2e:firefox`.
  * Chrome e2e tests can be run with `yarn test:e2e:chrome`. The `chromedriver` package major version must match the major version of your local Chrome installation. If they don't match, update whichever is behind before running Chrome e2e tests.
 
+These test scripts all support additional options, which might be helpful for debugging. Run the script with the flag `--help` to see all options.
+
 #### Running a single e2e test
 
 Single e2e tests can be run with `yarn test:e2e:single test/e2e/tests/TEST_NAME.spec.js` along with the options below.
 
 ```console
---browser             Set the browser used; either 'chrome' or 'firefox'.
-
---leave-running       Leaves the browser running after a test fails, along with anything else
-                      that the test used (ganache, the test dapp, etc.).
-
---retries             Set how many times the test should be retried upon failure. Default is 0.
+  --browser        Set the browser used; either 'chrome' or 'firefox'.
+                                         [string] [choices: "chrome", "firefox"]
+  --debug          Run tests in debug mode, logging each driver interaction
+                                                      [boolean] [default: false]
+  --retries        Set how many times the test should be retried upon failure.
+                                                           [number] [default: 0]
+  --leave-running  Leaves the browser running after a test fails, along with
+                   anything else that the test used (ganache, the test dapp,
+                   etc.)                              [boolean] [default: false]
 ```
 
-An example for running `account-details` testcase with chrome and leaving the browser open would be:
-`yarn test:e2e:single test/e2e/tests/account-details.spec.js --browser=chrome --leave-running`
+For example, to run the `account-details` tests using Chrome, with debug logging and with the browser set to remain open upon failure, you would use:
+`yarn test:e2e:single test/e2e/tests/account-details.spec.js --browser=chrome --debug --leave-running`
 
 ### Changing dependencies
 

test/e2e/helpers.js

@@ -120,8 +120,28 @@ async function withFixtures(options, testSuite) {
       await driver.checkBrowserForExceptions();
     }
 
+    let driverProxy;
+    if (process.env.E2E_DEBUG === 'true') {
+      driverProxy = new Proxy(driver, {
+        get(target, prop, receiver) {
+          const originalProperty = target[prop];
+          if (typeof originalProperty === 'function') {
+            return (...args) => {
+              console.log(
+                `[driver] Called '${prop}' with arguments ${JSON.stringify(
+                  args,
+                )}`,
+              );
+              return originalProperty.bind(target)(...args);
+            };
+          }
+          return Reflect.get(target, prop, receiver);
+        },
+      });
+    }
+
     await testSuite({
-      driver,
+      driver: driverProxy ?? driver,
       mockServer,
       contractRegistry,
     });

test/e2e/run-all.js

@@ -36,6 +36,12 @@ async function main() {
             type: 'string',
             choices: ['chrome', 'firefox'],
           })
+          .option('debug', {
+            default: process.env.E2E_DEBUG === 'true',
+            description:
+              'Run tests in debug mode, logging each driver interaction',
+            type: 'boolean',
+          })
           .option('snaps', {
             description: `run snaps e2e tests`,
             type: 'boolean',
@@ -53,7 +59,7 @@ async function main() {
     .strict()
     .help('help');
 
-  const { browser, retries, snaps, mv3 } = argv;
+  const { browser, debug, retries, snaps, mv3 } = argv;
 
   let testPaths;
 
@@ -84,6 +90,9 @@ async function main() {
   if (retries) {
     args.push('--retries', retries);
   }
+  if (debug) {
+    args.push('--debug');
+  }
 
   // For running E2Es in parallel in CI
   const currentChunkIndex = process.env.CIRCLE_NODE_INDEX ?? 0;

test/e2e/run-e2e-test.js

@@ -18,6 +18,12 @@ async function main() {
             type: 'string',
             choices: ['chrome', 'firefox'],
           })
+          .option('debug', {
+            default: process.env.E2E_DEBUG === 'true',
+            description:
+              'Run tests in debug mode, logging each driver interaction',
+            type: 'boolean',
+          })
           .option('retries', {
             default: 0,
             description:
@@ -39,7 +45,7 @@ async function main() {
     .strict()
     .help('help');
 
-  const { browser, e2eTestPath, retries, leaveRunning } = argv;
+  const { browser, debug, e2eTestPath, retries, leaveRunning } = argv;
 
   if (!browser) {
     exitWithError(
@@ -69,6 +75,10 @@ async function main() {
     throw error;
   }
 
+  if (debug) {
+    process.env.E2E_DEBUG = 'true';
+  }
+
   let testTimeoutInMilliseconds = 60 * 1000;
   let exit = '--exit';