feat(webdriverio): Add webdriverio end to end test framework.

.eslintignore

@@ -10,6 +10,10 @@ react/features/stream-effects/virtual-background/vendor/*
 load-test/*
 react/features/facial-recognition/resources/*
 
+# Test results and reports
+allure-report/*
+allure-results/*
+
 # ESLint will by default ignore its own configuration file. However, there does
 # not seem to be a reason why we will want to risk being inconsistent with our
 # remaining JavaScript source code.

.gitignore

@@ -2,6 +2,8 @@
 .*.tmp
 deploy-local.sh
 libs/
+allure-report/
+allure-results/
 all.css
 *css.map
 .remote-sync.json

package.json

@@ -61,6 +61,7 @@
     "@tensorflow/tfjs-core": "3.13.0",
     "@vladmandic/face-api": "1.6.4",
     "@xmldom/xmldom": "0.7.5",
+    "allure-commandline": "2.17.2",
     "amplitude-js": "8.2.1",
     "base64-js": "1.3.1",
     "bc-css-flags": "3.0.0",
@@ -134,7 +135,7 @@
     "util": "0.12.1",
     "uuid": "8.3.2",
     "wasm-check": "2.0.1",
-    "windows-iana": "^3.1.0",
+    "windows-iana": "3.1.0",
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
@@ -146,8 +147,16 @@
     "@babel/preset-react": "7.16.0",
     "@babel/runtime": "7.16.0",
     "@jitsi/eslint-config": "4.0.0",
+    "@wdio/allure-reporter": "7.16.14",
+    "@wdio/cli": "7.16.15",
+    "@wdio/junit-reporter": "7.16.15",
+    "@wdio/local-runner": "7.16.13",
+    "@wdio/mocha-framework": "7.16.13",
+    "@wdio/selenium-standalone-service": "7.16.14",
+    "@wdio/spec-reporter": "7.16.13",
     "babel-loader": "8.2.3",
     "babel-plugin-optional-require": "0.3.1",
+    "chromedriver": "97.0.2",
     "circular-dependency-plugin": "5.2.0",
     "clean-css-cli": "4.3.0",
     "css-loader": "3.6.0",
@@ -185,6 +194,8 @@
     "lint-fix": "eslint  --max-warnings 0 --fix .",
     "postinstall": "patch-package && jetify",
     "validate": "npm ls",
-    "start": "make dev"
+    "start": "make dev",
+    "e2e-tests": "wdio run wdio.conf.js",
+    "e2e-test-reports": "npx wdio run ./wdio.conf.js && allure generate allure-results/ --clean"
   }
 }

test/.env

@@ -0,0 +1,2 @@
+BASE_URL = "https://localhost:8080"
+BROWSERS = ['chrome', 'firefox']

test/README.md

@@ -0,0 +1,13 @@
+# WebdriverIO Test Automation Framework
+
+## Steps to run tests locally:
+* Run <strong>npm install</strong> command
+* Start de app locally with <i>make dev</i> command
+* Running all tests: <strong>npx wdio run ./wdio.conf.js</strong>
+* Running specific test: <strong>npx wdio run ./wdio.conf.js --spec testName.js</strong>
+* Running tests will generate the <i>allure-results</i> folder
+
+## Steps to generate allure reports:
+* Check if the <i>allure-results</i> was generated
+* In order to generate the <i>allure-reports</i>, run the following command: allure generate allure-results/ && allure open
+* If the allure-report has already been generated, there will be a conflict; in order to avoid this, the <strong>--clean</strong> flag needs to be used and the following command would be required: allure generate allure-results/ --clean && allure open

test/helpers/chromeSession.js

@@ -0,0 +1,27 @@
+
+import { remote } from 'webdriverio';
+
+/**
+ * Function that creates a chrome session.
+ *
+ * @returns {void}
+ */
+export default function createChromeSession() {
+    return remote({
+        capabilities: {
+            browserName: 'chrome',
+            acceptInsecureCerts: true,
+            'goog:chromeOptions': {
+                args: [
+                    'use-fake-device-for-media-stream',
+                    'use-fake-ui-for-media-stream',
+                    'disable-plugins',
+                    'mute-audio',
+                    'disable-infobars',
+                    'autoplay-policy=no-user-gesture-required',
+                    'auto-select-desktop-capture-source=Your Entire screen'
+                ]
+            }
+        }
+    });
+}

test/helpers/constants.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-undef */
+
+export const BASE_URL = process.env.BASE_URL || 'https://localhost:8080';
+
+export const BROWSERS = process.env.BROWSERS || [ 'chrome', 'firefox' ];
+
+export const DEFAULT_CONFIG
+= 'config.requireDisplayName=false'
++ '&config.debug=true'
++ '&config.testing.testMode=true'
++ '&config.disableAEC=true'
++ '&config.disableNS=true'
++ '&config.enableTalkWhileMuted=false'
++ '&config.callStatsID=false'
++ '&config.alwaysVisibleToolbar=true'
++ '&config.p2p.enabled=false'
++ '&config.p2p.useStunTurn=false'
++ '&config.pcStatsInterval=1500'
++ '&config.prejoinConfig.enabled=false'
++ '&config.gatherStats=true'
++ '&config.disable1On1Mode=true'
++ '&config.analytics.disabled=true'
++ '&interfaceConfig.SHOW_CHROME_EXTENSION_BANNER=false'
++ '&interfaceConfig.DISABLE_FOCUS_INDICATOR=true';
+
+export const FIRST_PARTICIPANT = 'First participant';
+export const SECOND_PARTICIPANT = 'Second participant';
+export const THIRD_PARTICIPANT = 'Third participant';
+
+export const ENTER_KEY = '\uE007';

test/helpers/createBrowserSession.js

@@ -0,0 +1,23 @@
+import createChromeSession from './chromeSession';
+import { BROWSERS } from './constants';
+import createFirefoxSession from './firefoxSession';
+
+/**
+ * Function that creates a browser session.
+ *
+ * @returns {void}
+ */
+export default function createBrowserSession() {
+    for (let i = 0; i < BROWSERS.length; i++) {
+        const browserName = BROWSERS[i];
+
+        switch (browserName) {
+        case 'chrome':
+            return createChromeSession();
+        case 'firefox':
+            return createFirefoxSession();
+        default:
+            return;
+        }
+    }
+}

test/helpers/createMeetingRoom.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+
+/**
+ * Create meeting room function.
+ *
+ * @returns {void}
+ */
+export default function createMeetingRoom(meetingUrl) {
+    browser.url(meetingUrl);
+}

test/helpers/createMeetingUrl.js

@@ -0,0 +1,25 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { BASE_URL, BROWSERS, DEFAULT_CONFIG } from './constants';
+
+/**
+ * Function that creates a meeting url.
+ *
+ * @returns {void}
+ */
+export default function createMeetingUrl() {
+    for (let i = 0; i < BROWSERS.length; i++) {
+        const browserName = BROWSERS[i];
+
+        switch (browserName) {
+        case 'chrome':
+            // eslint-disable-next-line prefer-template
+            return `${BASE_URL}/${'WdioChrome-' + uuidv4()}?${DEFAULT_CONFIG}`;
+        case 'firefox':
+            // eslint-disable-next-line prefer-template
+            return `${BASE_URL}/${'WdioFirefox-' + uuidv4()}?${DEFAULT_CONFIG}`;
+        default:
+            return;
+        }
+    }
+}

test/helpers/firefoxSession.js

@@ -0,0 +1,24 @@
+import { remote } from 'webdriverio';
+
+/**
+ * Function that creates a firefox session.
+ *
+ * @returns {void}
+ */
+export default function createFirefoxSession() {
+    return remote({
+        capabilities: {
+            browserName: 'firefox',
+            acceptInsecureCerts: true,
+            'moz:firefoxOptions': {
+                'prefs': {
+                    'media.navigator.streams.fake': true,
+                    'media.navigator.permission.disabled': true,
+                    'media.peerconnection.ice.tcp': true,
+                    'intl.accept_languages': 'en',
+                    'media.autoplay.default': 0
+                }
+            }
+        }
+    });
+}

test/helpers/isParticipantModerator.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-undef */
+
+/**
+ * Function that checks if the participant is moderator.
+ *
+ * @returns {void}
+ */
+export default async function isParticipantModerator() {
+    // eslint-disable-next-line arrow-body-style
+    await browser.execute(() => {
+        return window.APP.store.getState()['features/base/participants'].local.role
+          === 'moderator';
+    });
+}

test/helpers/openParticipantsPane.js

@@ -0,0 +1,20 @@
+const ParticipantsPane = require('../page-objects/ParticipantsPane');
+const Toolbox = require('../page-objects/Toolbox');
+
+/**
+ * Open participants pane function.
+ *
+ * @returns {void}
+ */
+export default async function openParticipantsPane() {
+    const getToolbox = await Toolbox.ToolboxView;
+
+    await expect(getToolbox).toBeDisplayed();
+    const participantsButton = await Toolbox.ParticipantsPaneButton;
+
+    await expect(participantsButton).toBeDisplayed();
+    await participantsButton.click();
+    const participantsPane = await ParticipantsPane.ParticipantsPaneView;
+
+    await expect(participantsPane).toBeDisplayed();
+}

test/page-objects/ParticipantsPane.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-undef */
+
+/**
+ * Define participants pane elements.
+*/
+class ParticipantsPane {
+
+    /**
+     * Participants pane element.
+     *
+     * @returns {HTMLElement}
+     */
+    get ParticipantsPaneView() {
+        return $('.participants_pane');
+    }
+}
+module.exports = new ParticipantsPane();

test/page-objects/PrejoinScreen.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-undef */
+
+/**
+ * Define prejoinscreen elements.
+*/
+class PrejoinScreen {
+
+    /**
+     * Premeeting screen element.
+     *
+     * @returns {HTMLElement}
+     */
+    get PremeetingScreen() {
+        return $('.premeeting-screen');
+    }
+
+    /**
+     * Prejoin input element.
+     *
+     * @returns {HTMLElement}
+     */
+    get PrejoinInput() {
+        return $('.prejoin-input-area input');
+    }
+}
+
+module.exports = new PrejoinScreen();

test/page-objects/SecurityDialog.js

@@ -0,0 +1,45 @@
+/* eslint-disable no-undef */
+
+/**
+ * Define security dialog elements.
+*/
+class SecurityDialog {
+
+    /**
+     * Security dialog element.
+     *
+     * @returns {HTMLElement}
+     */
+    get SecurityDialogView() {
+        return $('.security-dialog');
+    }
+
+    /**
+     * Lobby switch element.
+     *
+     * @returns {HTMLElement}
+     */
+    get LobbySwitch() {
+        return $('[aria-label="cross"]');
+    }
+
+    /**
+     * Lobby enabled element.
+     *
+     * @returns {HTMLElement}
+     */
+    get LobbyEnabled() {
+        return $('[data-checked="true"]');
+    }
+
+    /**
+     * Security dialog close button element.
+     *
+     * @returns {HTMLElement}
+     */
+    get SecurityDialogCloseButton() {
+        return $('#modal-header-close-button');
+    }
+}
+
+module.exports = new SecurityDialog();