system-testing 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-testing",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "System testing with Selenium and browsers.",
   "keywords": [
     "system",
@@ -29,6 +29,7 @@
     "htmlfy": "^1.0.0",
     "mime": "^4.0.7",
     "moment": "^2.30.1",
+    "scoundrel-remote-eval": "^1.0.6",
     "ws": "^8.18.3"
   },
   "peerDependencies": {

package/src/system-test-browser-helper.js

@@ -1,3 +1,5 @@
+import Client from "scoundrel-remote-eval/src/client/index.js"
+import ClientWebSocket from "scoundrel-remote-eval/src/client/connections/web-socket/index.js"
 import {digg} from "diggerize"
 import EventEmitter from "events"
 
@@ -20,6 +22,38 @@ export default class SystemTestBrowserHelper {
     this.events = new EventEmitter()
 
     shared.systemTestBrowserHelper = this
+
+    this.startScoundrel()
+  }
+
+  async startScoundrel() {
+    this.scoundrelWs = new WebSocket("http://localhost:8090")
+    this.scoundrelClientWebSocket = new ClientWebSocket(this.scoundrelWs)
+
+    await this.scoundrelClientWebSocket.waitForOpened()
+
+    this.scoundrelClient = new Client(this.scoundrelClientWebSocket)
+    this.events.emit("scoundrelStarted")
+  }
+
+  waitForScoundrelStarted() {
+    return new Promise((resolve) => {
+      if (this.scoundrelClient) {
+        resolve()
+      } else {
+        this.events.once("scoundrelStarted", () => {
+          resolve()
+        })
+      }
+    })
+  }
+
+  getScoundrel() {
+    if (!this.scoundrelClient) {
+      throw new Error("Scoundrel client is not started yet")
+    }
+
+    return this.scoundrelClient
   }
 
   connectOnError() {
@@ -83,8 +117,8 @@ export default class SystemTestBrowserHelper {
     this.overrideConsoleLog()
   }
 
-  getEnabled = () => this._enabled
-  getEvents = () => this.events
+  getEnabled() { return this._enabled }
+  getEvents() { return this.events }
 
   fakeConsoleError = (...args) => {
     this.communicator.sendCommand({type: "console.error", value: this.consoleLogMessage(args)})

package/src/system-test-communicator.js

@@ -63,6 +63,12 @@ export default class SystemTestCommunicator {
     }
   }
 
+  /**
+   * Sends a command and returns a promise that resolves with the response.
+   *
+   * @param {Object} data - The command data to send.
+   * @returns {Promise} A promise that resolves with the response data.
+   */
   sendCommand(data) {
     return new Promise((resolve, error) => {
       const id = this._sendQueueCount

package/src/system-test.js

@@ -5,6 +5,8 @@ import fs from "node:fs/promises"
 import logging from "selenium-webdriver/lib/logging.js"
 import moment from "moment"
 import {prettify} from "htmlfy"
+import Server from "scoundrel-remote-eval/src/server/index.js"
+import ServerWebSocket from "scoundrel-remote-eval/src/server/connections/web-socket/index.js"
 import SystemTestCommunicator from "./system-test-communicator.js"
 import SystemTestHttpServer from "./system-test-http-server.js"
 import {wait, waitFor} from "awaitery"
@@ -39,7 +41,7 @@ export default class SystemTest {
     await systemTest.visit("/blank")
 
     try {
-      await systemTest.findByTestID("blankText")
+      await systemTest.findByTestID("blankText", {useBaseSelector: false})
       await callback(systemTest)
     } catch (error) {
       await systemTest.takeScreenshot()
@@ -62,11 +64,48 @@ export default class SystemTest {
       throw new Error(`Unknown arguments: ${restArgsKeys.join(", ")}`)
     }
 
-    this.communicator = new SystemTestCommunicator({onCommand: this.onCommandReceived})
     this._host = host
     this._port = port
     this._responses = {}
     this._sendCount = 0
+    this.startScoundrel()
+    this.communicator = new SystemTestCommunicator({onCommand: this.onCommandReceived})
+  }
+
+  /**
+   * Gets the base selector for scoping element searches
+   *
+   * @returns {string}
+   */
+  getBaseSelector() { return this._baseSelector }
+
+  /**
+   * Sets the base selector for scoping element searches
+   *
+   * @param {string} baseSelector
+   */
+  setBaseSelector(baseSelector) { this._baseSelector = baseSelector }
+
+  /**
+   * Gets a selector scoped to the base selector
+   *
+   * @param {string} selector
+   * @returns {string}
+   */
+  getSelector(selector) {
+    return this.getBaseSelector() ? `${this.getBaseSelector()} ${selector}` : selector
+  }
+
+  /** Starts Scoundrel server which the browser connects to for remote evaluation in the browser */
+  startScoundrel() {
+    this.wss = new WebSocketServer({port: 8090})
+    this.serverWebSocket = new ServerWebSocket(this.wss)
+    this.server = new Server(this.serverWebSocket)
+  }
+
+  stopScoundrel() {
+    this.server?.close()
+    this.wss?.close()
   }
 
   /**
@@ -78,8 +117,15 @@ export default class SystemTest {
    * @returns {import("selenium-webdriver").WebElement[]}
    */
   async all(selector, args = {}) {
-    const {visible = true} = args
-    const elements = await this.driver.findElements(By.css(selector))
+    const {visible = true, useBaseSelector = true, ...restArgs} = args
+    const restArgsKeys = Object.keys(restArgs)
+
+    if (restArgsKeys.length > 0) {
+      throw new Error(`Unknown arguments: ${restArgsKeys.join(", ")}`)
+    }
+
+    const actualSelector = useBaseSelector ? this.getSelector(selector) : selector
+    const elements = await this.driver.findElements(By.css(actualSelector))
     const activeElements = []
 
     for (const element of elements) {
@@ -127,15 +173,15 @@ export default class SystemTest {
       elements = await this.all(selector, args)
     } catch (error) {
       // Re-throw to recover stack trace
-      throw new Error(`${error.message} (selector: ${selector})`)
+      throw new Error(`${error.message} (selector: ${this.getSelector(selector)})`)
     }
 
     if (elements.length > 1) {
-      throw new Error(`More than 1 elements (${elements.length}) was found by CSS: ${selector}`)
+      throw new Error(`More than 1 elements (${elements.length}) was found by CSS: ${this.getSelector(selector)}`)
     }
 
     if (!elements[0]) {
-      throw new ElementNotFoundError(`Element couldn't be found by CSS: ${selector}`)
+      throw new ElementNotFoundError(`Element couldn't be found after ${(this.getTimeouts() / 1000).toFixed(2)}s by CSS: ${this.getSelector(selector)}`)
     }
 
     return elements[0]
@@ -156,11 +202,11 @@ export default class SystemTest {
    * @param {string} selector
    * @returns {import("selenium-webdriver").WebElement}
    */
-  async findNoWait(selector) {
+  async findNoWait(selector, args) {
     await this.driverSetTimeouts(0)
 
     try {
-      return await this.find(selector)
+      return await this.find(selector, args)
     } finally {
       await this.restoreTimeouts()
     }
@@ -195,6 +241,8 @@ export default class SystemTest {
     return await this.driver.getCurrentUrl()
   }
 
+  getTimeouts() { return this._timeouts }
+
   /**
    * Interacts with an element by calling a method on it with the given arguments.
    * Retrying on ElementNotInteractableError.
@@ -268,7 +316,7 @@ export default class SystemTest {
    * @returns {Promise<string[]>}
    */
   async notificationMessages() {
-    const notificationMessageElements = await this.all("[data-class='notification-message']")
+    const notificationMessageElements = await this.all("[data-class='notification-message']", {useBaseSelector: false})
     const notificationMessageTexts = []
 
     for (const notificationMessageElement of notificationMessageElements) {
@@ -357,8 +405,8 @@ export default class SystemTest {
     await this.driverVisit("/?systemTest=true")
 
     try {
-      await this.find("body > #root")
-      await this.find("[data-testid='systemTestingComponent']", {visible: null})
+      await this.find("body > #root", {useBaseSelector: false})
+      await this.find("[data-testid='systemTestingComponent']", {visible: null, useBaseSelector: false})
     } catch (error) {
       await systemTest.takeScreenshot()
 
@@ -369,17 +417,18 @@ export default class SystemTest {
     await this.waitForClientWebSocket()
 
     this._started = true
+    systemTest.setBaseSelector("[data-testid='systemTestingComponent'][data-focussed='true']")
   }
 
   /**
    * Restores previously set timeouts
    */
   async restoreTimeouts() {
-    if (!this._timeouts) {
+    if (!this.getTimeouts()) {
       throw new Error("Timeouts haven't previously been set")
     }
 
-    await this.driverSetTimeouts(this._timeouts)
+    await this.driverSetTimeouts(this.getTimeouts())
   }
 
   /**
@@ -425,10 +474,19 @@ export default class SystemTest {
     this.wss.on("close", this.onWebSocketClose)
   }
 
+  /**
+   * Sets the on command callback
+   */
   onCommand(callback) {
     this._onCommandCallback = callback
   }
 
+  /**
+   * Handles a command received from the browser
+   *
+   * @param {Object} data
+   * @returns {Promise<any>}
+   */
   onCommandReceived = async ({data}) => {
     const type = data.type
     let result
@@ -457,6 +515,11 @@ export default class SystemTest {
     return result
   }
 
+  /**
+   * Handles a new web socket connection
+   *
+   * @param {WebSocket} ws
+   */
   onWebSocketConnection = async (ws) => {
     this.ws = ws
     this.communicator.ws = ws
@@ -475,6 +538,11 @@ export default class SystemTest {
     this.communicator.ws = null
   }
 
+  /**
+   * Handles an error reported from the browser
+   *
+   * @param {Object} data
+   */
   handleError(data) {
     if (data.message.includes("Minified React error #419")) {
       // Ignore this error message
@@ -494,6 +562,7 @@ export default class SystemTest {
    * Stops the system test
    */
   async stop() {
+    this.stopScoundrel()
     this.systemTestHttpServer?.close()
     this.wss?.close()
     await this.driver.quit()