Merge pull request #27913 from woocommerce/fix/27820

add test:e2e-debug command

package.json

@@ -25,6 +25,7 @@
     "docker:up": "npm explore @woocommerce/e2e-environment -- npm run docker:up",
     "docker:down": "npm explore @woocommerce/e2e-environment -- npm run docker:down",
     "test:e2e": "npm explore @woocommerce/e2e-environment -- npm run test:e2e",
+    "test:e2e-debug": "npm explore @woocommerce/e2e-environment -- npm run test:e2e-debug",
     "test:e2e-dev": "npm explore @woocommerce/e2e-environment -- npm run test:e2e-dev",
     "makepot": "composer run-script makepot",
     "packages:fix:textdomain": "node ./bin/package-update-textdomain.js",

tests/e2e/README.md

@@ -17,6 +17,7 @@ Automated end-to-end tests for WooCommerce.
   - [Prep work for running tests](#prep-work-for-running-tests)
   - [How to run tests in headless mode](#how-to-run-tests-in-headless-mode) 
   - [How to run tests in non-headless mode](#how-to-run-tests-in-non-headless-mode)
+  - [How to run tests in debug mode](#how-to-run-tests-in-debug-mode)
   - [How to run an individual test](#how-to-run-an-individual-test)
   - [How to skip tests](#how-to-skip-tests)
   - [How to run tests using custom WordPress, PHP and MariaDB versions](#how-to-run-tests-using-custom-wordpress,-php-and-mariadb-versions)
@@ -148,8 +149,8 @@ npm run test:e2e
 
 ### How to run tests in non-headless mode
 
-Tests are being run headless by default. However, sometimes it's useful to observe the browser while running tests. To do so, you can run tests in a non-headless (dev) mode:
-                                    
+Tests are run headless by default. However, sometimes it's useful to observe the browser while running tests. To do so, you can run tests in a non-headless (dev) mode:
+
 ```bash
 npm run test:e2e-dev
 ```
@@ -169,6 +170,16 @@ For example:
 - `PUPPETEER_SLOWMO=10` - will run tests faster
 - `PUPPETEER_SLOWMO=70` - will run tests slower
 
+### How to run tests in debug mode
+
+Tests are run headless by default. While writing tests it may be useful to have the debugger loaded while running a test in non-headless mode. To run tests in debug mode:
+            
+```bash
+npm run test:e2e-debug
+```
+
+When all tests have been completed the debugger is left active. Control doesn't return to the command line until the debugger is closed. Otherwise, debug mode functions the same as non-headless mode.
+
 ### How to run an individual test
 
 To run an individual test, use the direct path to the spec. For example:

tests/e2e/env/bin/e2e-test-integration.js

@@ -10,6 +10,7 @@ const { JEST_PUPPETEER_CONFIG } = process.env;
 program
 	.usage( '<file ...> [options]' )
 	.option( '--dev', 'Development mode' )
+	.option( '--debug', 'Debug mode' )
 	.parse( process.argv );
 
 const appPath = getAppRoot();
@@ -60,7 +61,7 @@ const jestArgs = [
 	...program.args,
 ];
 
-if ( program.dev ) {
+if ( program.debug ) {
 	jestCommand = 'npx';
 	jestArgs.unshift( 'ndb', 'jest' );
 }

tests/e2e/env/package-lock.json

@@ -62,11 +62,6 @@
 							}
 						}
 					}
-				},
-				"prettier": {
-					"version": "npm:wp-prettier@1.19.1",
-					"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz",
-					"integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg=="
 				}
 			}
 		},
@@ -9824,6 +9819,11 @@
 			"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
 			"dev": true
 		},
+		"prettier": {
+			"version": "npm:wp-prettier@1.19.1",
+			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz",
+			"integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg=="
+		},
 		"prettier-linter-helpers": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",

tests/e2e/env/package.json

@@ -53,6 +53,7 @@
     "docker:ssh": "docker exec -it $(node utils/get-app-name.js)_wordpress-www /bin/bash",
     "install-wp-tests": "./bin/install-wp-tests.sh",
     "test:e2e": "bash ./bin/wait-for-build.sh && ./bin/e2e-test-integration.js",
+    "test:e2e-debug": "bash ./bin/wait-for-build.sh && ./bin/e2e-test-integration.js --dev --debug",
     "test:e2e-dev": "bash ./bin/wait-for-build.sh && ./bin/e2e-test-integration.js --dev"
   }
 }