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/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/browserCapabilities.js

@@ -0,0 +1,20 @@
+import {
+    CHROME_BROWSER,
+    CHROME_PROPERTIES,
+    FIREFOX_PROPERTIES,
+    PARTICIPANT1_BROWSER
+} from './constants';
+
+/**
+ * Function that creates browser capabilities.
+ *
+ * @returns {Object}
+ */
+export default function createBrowserCapabilities() {
+
+    if (PARTICIPANT1_BROWSER === CHROME_BROWSER) {
+        return CHROME_PROPERTIES;
+    }
+
+    return FIREFOX_PROPERTIES;
+}

test/helpers/constants.js

@@ -0,0 +1,84 @@
+/* eslint-disable no-undef */
+
+// Define base url.
+export const BASE_URL = process.env.BASE_URL || 'https://alpha.jitsi.net';
+
+// Define available browsers.
+export const FIREFOX_BROWSER = 'firefox';
+export const CHROME_BROWSER = 'chrome';
+
+// Define browser for each participant.
+export const PARTICIPANT1_BROWSER = process.env.PARTICIPANT1_BROWSER || CHROME_BROWSER;
+export const PARTICIPANT2_BROWSER = process.env.PARTICIPANT2_BROWSER || CHROME_BROWSER;
+export const PARTICIPANT3_BROWSER = process.env.PARTICIPANT3_BROWSER || CHROME_BROWSER;
+
+// Define default config.
+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';
+
+// Define participants names.
+export const FIRST_PARTICIPANT = 'First participant';
+export const SECOND_PARTICIPANT = 'Second participant';
+export const THIRD_PARTICIPANT = 'Third participant';
+
+export const ENTER_KEY = '\uE007';
+
+// Define chrome properties.
+export const CHROME_PROPERTIES = {
+    maxInstances: 4,
+    browserName: CHROME_BROWSER,
+    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'
+        ]
+    }
+};
+
+// Define firefox properties.
+export const FIREFOX_PROPERTIES = {
+    maxInstances: 4,
+    browserName: FIREFOX_BROWSER,
+    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
+        }
+    }
+};
+
+// Define remote selenium grid url.
+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 = GRID_URL ? [] : [ 'selenium-standalone' ];
+
+// Define max instances.
+
+export const MAX_INSANCES = process.env.MAX_INSANCES || 1;

test/helpers/createBrowserSession.js

@@ -0,0 +1,27 @@
+import {
+    PARTICIPANT1_BROWSER,
+    PARTICIPANT2_BROWSER,
+    PARTICIPANT3_BROWSER,
+    FIRST_PARTICIPANT,
+    SECOND_PARTICIPANT,
+    THIRD_PARTICIPANT
+} from './constants';
+import createSession from './createSession';
+
+/**
+ * Function that creates a browser session.
+ *
+ * @returns {void}
+ */
+export default function createBrowserSession(participant) {
+    switch (participant) {
+    case FIRST_PARTICIPANT:
+        return createSession(PARTICIPANT1_BROWSER);
+    case SECOND_PARTICIPANT:
+        return createSession(PARTICIPANT2_BROWSER);
+    case THIRD_PARTICIPANT:
+        return createSession(PARTICIPANT3_BROWSER);
+    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,13 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { BASE_URL, DEFAULT_CONFIG } from './constants';
+
+/**
+ * Function that creates a meeting url.
+ *
+ * @returns {void}
+ */
+export default function createMeetingUrl() {
+    // eslint-disable-next-line prefer-template
+    return `${BASE_URL}/${'WdioMeeting-' + uuidv4()}?${DEFAULT_CONFIG}`;
+}

test/helpers/createSession.js

@@ -0,0 +1,55 @@
+import { remote } from 'webdriverio';
+
+import {
+    CHROME_BROWSER,
+    FIREFOX_BROWSER
+} from './constants';
+
+/**
+ * Function that creates a session.
+ *
+ * @returns {void}
+ */
+export default function createSession(participantBrowser) {
+
+    switch (participantBrowser) {
+    case CHROME_BROWSER:
+        return remote({
+            path: '/wd/hub',
+            capabilities: {
+                browserName: CHROME_BROWSER,
+                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'
+                    ]
+                }
+            }
+        });
+    case FIREFOX_BROWSER:
+        return remote({
+            path: '/wd/hub',
+            capabilities: {
+                browserName: FIREFOX_BROWSER,
+                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
+                    }
+                }
+            }
+        });
+    default:
+        return;
+    }
+}

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,23 @@
+const ParticipantsPane = require('../page-objects/ParticipantsPane');
+const Toolbox = require('../page-objects/Toolbox');
+
+/**
+ * Open participants pane function.
+ *
+ * @returns {void}
+ */
+export default async function openParticipantsPane(userBrowser) {
+    const getToolbox = await new Toolbox(userBrowser);
+    const getToolboxView = await getToolbox.ToolboxView;
+
+    await expect(getToolboxView).toBeDisplayed();
+    const participantsButton = await getToolbox.ParticipantsPaneButton;
+
+    await expect(participantsButton).toBeDisplayed();
+    await participantsButton.click();
+
+    const participantsPanePageObject = await new ParticipantsPane(userBrowser);
+    const participantsPane = await participantsPanePageObject.ParticipantsPaneView;
+
+    await expect(participantsPane).toBeDisplayed();
+}

test/page-objects/ParticipantsPane.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-undef */
+
+/**
+ * Define participants pane elements.
+*/
+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 this.userBrowser.$('.participants_pane');
+    }
+}
+module.exports = ParticipantsPane;