test(e2e): Bypass Cloudflare's WAF via API key

.github/workflows/browserstack.yml

@@ -34,6 +34,8 @@ jobs:
 
       - name: "Running test on BrowserStack" # Invokes the actual test script that would run on BrowserStack browsers
         run: npm run e2e:bstack # See sample test script above
+        env:
+          BYPASS_WAF: ${{ secrets.BYPASS_WAF }}
 
       - name: "BrowserStackLocal Stop" # Terminating the BrowserStackLocal tunnel connection
         uses: browserstack/github-actions/setup-local@master

e2e/datachannel/serialization.js

@@ -32,7 +32,11 @@ const serialization = params.get("serialization");
 	const result = document.getElementById("result");
 	const errorMessage = document.getElementById("error-message");
 
-	const peer = new Peer({ debug: 3, serializers });
+	const peer = new Peer({
+		debug: 3,
+		serializers,
+		key: params.get("key"),
+	});
 	const received = [];
 	/**
 	 * @type {import("../../lib/exports.js").DataConnection}

e2e/datachannel/serialization.page.ts

@@ -1,4 +1,7 @@
 import { browser, $ } from "@wdio/globals";
+
+const { BYPASS_WAF } = process.env;
+
 class SerializationPage {
 	get sendBtn() {
 		return $("button[id='send-btn']");
@@ -40,13 +43,13 @@ class SerializationPage {
 	async open(testFile: string, serialization: string) {
 		await browser.switchWindow("Alice");
 		await browser.url(
-			`/e2e/datachannel/serialization.html?testfile=${testFile}&serialization=${serialization}#Alice`,
+			`/e2e/datachannel/serialization.html?testfile=${testFile}&serialization=${serialization}&key=${BYPASS_WAF}#Alice`,
 		);
 		await this.connectBtn.waitForEnabled();
 
 		await browser.switchWindow("Bob");
 		await browser.url(
-			`/e2e/datachannel/serialization.html?testfile=${testFile}#Bob`,
+			`/e2e/datachannel/serialization.html?testfile=${testFile}&key=${BYPASS_WAF}#Bob`,
 		);
 		await this.connectBtn.waitForEnabled();
 	}

e2e/mediachannel/close.js

@@ -3,6 +3,8 @@
  */
 const Peer = window.peerjs.Peer;
 
+const params = new URLSearchParams(document.location.search);
+
 document.getElementsByTagName("title")[0].innerText =
 	window.location.hash.substring(1);
 
@@ -14,7 +16,7 @@ const messages = document.getElementById("messages");
 const errorMessage = document.getElementById("error-message");
 
 const stream = window["sender-stream"].captureStream(30);
-const peer = new Peer({ debug: 3 });
+const peer = new Peer({ debug: 3, key: params.get("key") });
 /**
  * @type {import("peerjs").MediaConnection}
  */

e2e/mediachannel/close.page.ts

@@ -1,4 +1,7 @@
 import { browser, $ } from "@wdio/globals";
+
+const { BYPASS_WAF } = process.env;
+
 class SerializationPage {
 	get receiverId() {
 		return $("input[id='receiver-id']");
@@ -35,11 +38,11 @@ class SerializationPage {
 
 	async open() {
 		await browser.switchWindow("Alice");
-		await browser.url(`/e2e/mediachannel/close.html#Alice`);
+		await browser.url(`/e2e/mediachannel/close.html?key=${BYPASS_WAF}#Alice`);
 		await this.callBtn.waitForEnabled();
 
 		await browser.switchWindow("Bob");
-		await browser.url(`/e2e/mediachannel/close.html#Bob`);
+		await browser.url(`/e2e/mediachannel/close.html?key=${BYPASS_WAF}#Bob`);
 		await this.callBtn.waitForEnabled();
 	}
 	async init() {

e2e/peer/disconnected.html

@@ -17,9 +17,11 @@ <h1>ID-TAKEN</h1>
 			 */
 			const Peer = window.peerjs.Peer;
 
+			const params = new URLSearchParams(document.location.search);
+
 			const messages = document.getElementById("messages");
 
-			const peer = new Peer();
+			const peer = new Peer({ key: params.get("key") });
 			peer
 				.once(
 					"error",

e2e/peer/id-taken.html

@@ -17,11 +17,13 @@ <h1>ID-TAKEN</h1>
 			 */
 			const Peer = window.peerjs.Peer;
 
+			const params = new URLSearchParams(document.location.search);
+
 			const messages = document.getElementById("messages");
 			const errorMessage = document.getElementById("error-message");
 
 			// Peer A should be created without an error
-			const peerA = new Peer()
+			const peerA = new Peer({ key: params.get("key") })
 				.once(
 					"error",
 					(err) => (errorMessage.textContent += JSON.stringify(err)),
@@ -32,7 +34,7 @@ <h1>ID-TAKEN</h1>
 						{ length: 10 },
 						(_, i) =>
 							new Promise((resolve, reject) =>
-								new Peer(id)
+								new Peer(id, { key: params.get("BYPASS_WAF") })
 									.once("open", () =>
 										reject(`Peer ${i} failed! Connection got established.`),
 									)

e2e/peer/peer.page.ts

@@ -1,4 +1,7 @@
 import { browser, $ } from "@wdio/globals";
+
+const { BYPASS_WAF } = process.env;
+
 class PeerPage {
 	get messages() {
 		return $("div[id='messages']");
@@ -19,7 +22,7 @@ class PeerPage {
 	}
 
 	async open(test: string) {
-		await browser.url(`/e2e/peer/${test}.html`);
+		await browser.url(`/e2e/peer/${test}.html?key=${BYPASS_WAF}`);
 	}
 }