feat(webdriverio): Get page objects for each specific browser.

tudor-phd · Mar 29, 2022 · f10151e · f10151e
1 parent e1e2776
commit f10151e
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 115 deletions.
diff --git a/test/helpers/constants.js b/test/helpers/constants.js
@@ -41,7 +41,6 @@ export const ENTER_KEY = '\uE007';
 
 // Define chrome properties.
 export const CHROME_PROPERTIES = {
-    path: '/wd/hub',
     maxInstances: 4,
     browserName: CHROME_BROWSER,
     acceptInsecureCerts: true,
@@ -60,7 +59,6 @@ export const CHROME_PROPERTIES = {
 
 // Define firefox properties.
 export const FIREFOX_PROPERTIES = {
-    path: '/wd/hub',
     maxInstances: 4,
     browserName: FIREFOX_BROWSER,
     acceptInsecureCerts: true,
@@ -76,10 +74,11 @@ export const FIREFOX_PROPERTIES = {
 };
 
 // Define remote selenium grid url.
-export const GRID_URL = process.env.GRID_URL ? new URL(process.env.GRID_URL) : new URL('http://localhost:4444/wd/hub');
+export const GRID_URL = process.env.GRID_URL ? new URL(process.env.GRID_URL) : null;
 
 // Define services properties based on grid availability.
-export const SERVICES = process.env.GRID_URL ? [] : [ 'selenium-standalone' ];
+export const SERVICES = GRID_URL ? [] : [ 'selenium-standalone' ];
 
 // Define max instances.
-export const MAX_INSANCES = process.env.MAX_INSANCES || 16;
+
+export const MAX_INSANCES = process.env.MAX_INSANCES || 1;
diff --git a/test/helpers/createSession.js b/test/helpers/createSession.js
@@ -15,6 +15,7 @@ export default function createSession(participantBrowser) {
     switch (participantBrowser) {
     case CHROME_BROWSER:
         return remote({
+            path: '/wd/hub',
             capabilities: {
                 browserName: CHROME_BROWSER,
                 acceptInsecureCerts: true,
@@ -33,6 +34,7 @@ export default function createSession(participantBrowser) {
         });
     case FIREFOX_BROWSER:
         return remote({
+            path: '/wd/hub',
             capabilities: {
                 browserName: FIREFOX_BROWSER,
                 acceptInsecureCerts: true,

diff --git a/test/helpers/openParticipantsPane.js b/test/helpers/openParticipantsPane.js
@@ -6,15 +6,18 @@ const Toolbox = require('../page-objects/Toolbox');
  *
  * @returns {void}
  */
-export default async function openParticipantsPane() {
-    const getToolbox = await Toolbox.ToolboxView;
+export default async function openParticipantsPane(userBrowser) {
+    const getToolbox = await new Toolbox(userBrowser);
+    const getToolboxView = await getToolbox.ToolboxView;
 
-    await expect(getToolbox).toBeDisplayed();
-    const participantsButton = await Toolbox.ParticipantsPaneButton;
+    await expect(getToolboxView).toBeDisplayed();
+    const participantsButton = await getToolbox.ParticipantsPaneButton;
 
     await expect(participantsButton).toBeDisplayed();
     await participantsButton.click();
-    const participantsPane = await ParticipantsPane.ParticipantsPaneView;
+
+    const participantsPanePageObject = await new ParticipantsPane(userBrowser);
+    const participantsPane = await participantsPanePageObject.ParticipantsPaneView;
 
     await expect(participantsPane).toBeDisplayed();
 }
diff --git a/test/page-objects/ParticipantsPane.js b/test/page-objects/ParticipantsPane.js
@@ -5,13 +5,23 @@
 */
 class ParticipantsPane {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Participants pane element.
      *
      * @returns {HTMLElement}
      */
     get ParticipantsPaneView() {
-        return $('.participants_pane');
+        return this.userBrowser.$('.participants_pane');
     }
 }
-module.exports = new ParticipantsPane();
+module.exports = ParticipantsPane;
diff --git a/test/page-objects/PrejoinScreen.js b/test/page-objects/PrejoinScreen.js
@@ -5,13 +5,23 @@
 */
 class PrejoinScreen {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Premeeting screen element.
      *
      * @returns {HTMLElement}
      */
     get PremeetingScreen() {
-        return $('.premeeting-screen');
+        return this.userBrowser.$('.premeeting-screen');
     }
 
     /**
@@ -20,7 +30,7 @@ class PrejoinScreen {
      * @returns {HTMLElement}
      */
     get PrejoinInput() {
-        return $('.prejoin-input-area input');
+        return this.userBrowser.$('.prejoin-input-area input');
     }
 
     /**
@@ -29,8 +39,8 @@ class PrejoinScreen {
      * @returns {HTMLElement}
      */
     get PrejoinButton() {
-        return $('[data-testid="prejoin.joinMeeting"]');
+        return this.userBrowser.$('[data-testid="prejoin.joinMeeting"]');
     }
 }
 
-module.exports = new PrejoinScreen();
+module.exports = PrejoinScreen;
diff --git a/test/page-objects/SecurityDialog.js b/test/page-objects/SecurityDialog.js
@@ -5,13 +5,23 @@
 */
 class SecurityDialog {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Security dialog element.
      *
      * @returns {HTMLElement}
      */
     get SecurityDialogView() {
-        return $('.security-dialog');
+        return this.userBrowser.$('.security-dialog');
     }
 
     /**
@@ -20,7 +30,7 @@ class SecurityDialog {
      * @returns {HTMLElement}
      */
     get LobbySwitch() {
-        return $('[aria-label="cross"]');
+        return this.userBrowser.$('[aria-label="cross"]');
     }
 
     /**
@@ -29,7 +39,7 @@ class SecurityDialog {
      * @returns {HTMLElement}
      */
     get LobbyEnabled() {
-        return $('[data-checked="true"]');
+        return this.userBrowser.$('[data-checked="true"]');
     }
 
     /**
@@ -38,8 +48,8 @@ class SecurityDialog {
      * @returns {HTMLElement}
      */
     get SecurityDialogCloseButton() {
-        return $('#modal-header-close-button');
+        return this.userBrowser.$('#modal-header-close-button');
     }
 }
 
-module.exports = new SecurityDialog();
+module.exports = SecurityDialog;
diff --git a/test/page-objects/Toolbox.js b/test/page-objects/Toolbox.js
@@ -5,17 +5,27 @@
 */
 class Toolbox {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Toolbox element.
      *
      * @returns {HTMLElement}
      */
     get ToolboxView() {
-        const video = $('#largeVideo');
+        const video = this.userBrowser.$('#largeVideo');
 
         video.moveTo();
 
-        return $('.toolbox-content-items');
+        return this.userBrowser.$('.toolbox-content-items');
     }
 
     /**
@@ -24,7 +34,7 @@ class Toolbox {
      * @returns {HTMLElement}
      */
     get MoreActionOption() {
-        return $('.toolbox-button-wth-dialog div');
+        return this.userBrowser.$('.toolbox-button-wth-dialog div');
     }
 
     /**
@@ -33,7 +43,7 @@ class Toolbox {
      * @returns {HTMLElement}
      */
     get OverflowMenu() {
-        return $('#overflow-menu');
+        return this.userBrowser.$('#overflow-menu');
     }
 
     /**
@@ -42,7 +52,7 @@ class Toolbox {
      * @returns {HTMLElement}
      */
     get SecurityOptionButton() {
-        return $('[aria-label="Security options"]');
+        return this.userBrowser.$('[aria-label="Security options"]');
     }
 
     /**
@@ -51,7 +61,7 @@ class Toolbox {
      * @returns {HTMLElement}
      */
     get ParticipantsPaneButton() {
-        return $('[aria-label="Participants"]');
+        return this.userBrowser.$('[aria-label="Participants"]');
     }
 }
-module.exports = new Toolbox();
+module.exports = Toolbox;
diff --git a/test/page-objects/notifications/LobbyNotification.js b/test/page-objects/notifications/LobbyNotification.js
@@ -5,13 +5,23 @@
 */
 class LobbyNotification {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Lobby notification element.
      *
      * @returns {HTMLElement}
      */
     get Notification() {
-        return $('#notifications-container');
+        return this.userBrowser.$('#notifications-container');
     }
 
     /**
@@ -20,7 +30,7 @@ class LobbyNotification {
      * @returns {HTMLElement}
      */
     get ViewLobby() {
-        return $('[data-testid="notify.viewLobby"]');
+        return this.userBrowser.$('[data-testid="notify.viewLobby"]');
     }
 
     /**
@@ -29,7 +39,7 @@ class LobbyNotification {
      * @returns {HTMLElement}
      */
     get AdmitLobby() {
-        return $('[data-testid="lobby.admit"]');
+        return this.userBrowser.$('[data-testid="lobby.admit"]');
     }
 
     /**
@@ -38,7 +48,7 @@ class LobbyNotification {
      * @returns {HTMLElement}
      */
     get RejectLobby() {
-        return $('[data-testid="lobby.reject"]');
+        return this.userBrowser.$('[data-testid="lobby.reject"]');
     }
 }
-module.exports = new LobbyNotification();
+module.exports = LobbyNotification;
diff --git a/test/page-objects/notifications/LobbyRejectNotification.js b/test/page-objects/notifications/LobbyRejectNotification.js
@@ -5,13 +5,23 @@
 */
 class LobbyRejectNotification {
 
+    /**
+     * Initializes a new user browser instance.
+     *
+     * @param {Object} userBrowser - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(userBrowser) {
+        this.userBrowser = userBrowser;
+    }
+
     /**
      * Lobby reject notification.
      *
      * @returns {HTMLElement}
      */
     get Notification() {
-        return $('[data-testid="lobby.joinRejectedMessage"]');
+        return this.userBrowser.$('[data-testid="lobby.joinRejectedMessage"]');
     }
 }
-module.exports = new LobbyRejectNotification();
+module.exports = LobbyRejectNotification;