E2E Tests: Add CPU/Network slowdown configuration options (#18770)

* E2E Tests: Add CPU/Network slowdown configuration options

* E2E Tests: Add CHANGELOG notes for CPU, network throttling options

* E2E Tests: Ensure simulateAdverseConditions is awaited

Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl>

docs/contributors/testing-overview.md

@@ -401,6 +401,25 @@ If you're using a different setup, you can provide the base URL, username and pa
 WP_BASE_URL=http://localhost:8888 WP_USERNAME=admin WP_PASSWORD=password npm run test-e2e
 ```
 
+If you find that end-to-end tests pass when run locally, but fail in Travis, you may be able to isolate a CPU- or netowrk-bound race condition by simulating a slow CPU or network:
+
+```
+THROTTLE_CPU=4 npm run test-e2e
+```
+
+`THROTTLE_CPU` is a slowdown factor (in this example, a 4x slowdown multiplier)
+
+Related: https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate
+
+```
+DOWNLOAD_THROUGHPUT=125000 npm run test-e2e
+```
+
+`DOWNLOAD_THROUGHPUT` is a numeric value representing bytes-per-second network download (in this example, a 1Mbps download speed).
+
+Related: https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions
+
+
 ### Core Block Testing
 
 Every core block is required to have at least one set of fixture files for its main save function and one for each deprecation. These fixtures test the parsing and serialization of the block. See [the e2e tests fixtures readme](/packages/e2e-tests/fixtures/blocks/README.md) for more information and instructions.

packages/e2e-tests/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Master
+
+### New Features
+
+- Added `THROTTLE_CPU` and `DOWNLOAD_THROUGHPUT` environment variable configuration options.
+
 ## 1.7.0 (2019-09-16)
 
 ## 1.6.0 (2019-09-03)

packages/e2e-tests/config/setup-test-framework.js

@@ -18,9 +18,25 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 /**
- * Environment variables
+ * Timeout, in seconds, that the test should be allowed to run.
+ *
+ * @type {string|undefined}
+ */
+const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
+
+/**
+ * CPU slowdown factor, as a numeric multiplier.
+ *
+ * @type {string|undefined}
  */
-const { PUPPETEER_TIMEOUT } = process.env;
+const THROTTLE_CPU = process.env.THROTTLE_CPU;
+
+/**
+ * Network download speed, in bytes per second.
+ *
+ * @type {string|undefined}
+ */
+const DOWNLOAD_THROUGHPUT = process.env.DOWNLOAD_THROUGHPUT;
 
 /**
  * Set of console logging types observed to protect against unexpected yet
@@ -200,13 +216,40 @@ async function runAxeTestsForBlockEditor() {
 	} );
 }
 
+/**
+ * Simulate slow network or throttled CPU if provided via environment variables.
+ */
+async function simulateAdverseConditions() {
+	if ( ! DOWNLOAD_THROUGHPUT && ! THROTTLE_CPU ) {
+		return;
+	}
+
+	const client = await page.target().createCDPSession();
+
+	if ( DOWNLOAD_THROUGHPUT ) {
+		// See: https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions
+		await client.send( 'Network.emulateNetworkConditions', {
+			// Simulated download speed (bytes/s)
+			downloadThroughput: Number( DOWNLOAD_THROUGHPUT ),
+		} );
+	}
+
+	if ( THROTTLE_CPU ) {
+		// See: https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate
+		await client.send( 'Emulation.setCPUThrottlingRate', {
+			rate: Number( THROTTLE_CPU ),
+		} );
+	}
+}
+
 // Before every test suite run, delete all content created by the test. This ensures
 // other posts/comments/etc. aren't dirtying tests and tests don't depend on
 // each other's side-effects.
 beforeAll( async () => {
 	capturePageEventsForTearDown();
 	enablePageDialogAccept();
 	observeConsoleLogging();
+	await simulateAdverseConditions();
 
 	await trashExistingPosts();
 	await setupBrowser();