[Browser-Functional-Tests] Add browser test build YAML file (#1469)

* Add build yaml file to run browser tests

* Add step by step guide to configure pipeline

* Update yaml file name to browser-tests-build-ci

* Update browser functional test readme local steps

libraries/browser-functional-tests/README.md

@@ -0,0 +1,50 @@
+## Description
+
+The library **browser-functional-tests** is a suite of tests running with **Nightwatch** and **Selenium** to check the compatibility of a bot using libraries from BotBuilder-JS with different browsers.
+
+## Run the test locally
+
+_Note: The tests are configured to run in two-terminals, one for the webpack-dev-server which runs the bot, another for running the tests._ 
+
+1. Go to `libraries/browser-functional-tests`, open a terminal and run `npm install`
+
+
+2. Go to `libraries/browser-functional-tests/browser-echo-bot`, open a terminal and run the following commands:
+   * `npm install`
+   * `npm run start`
+This command will start the browser bot using `webpack-dev-server`.
+
+3. In the `botbuilder-js` root directory, open a new terminal and run the following commands:
+   * `npm install`
+   * `npm run browser-functional-test browser` where browser is _chrome_ or _firefox_
+
+4. Go to the `.env` file and set the **TestURI** variable with `http://localhost:8080/` value
+
+## Azure Build Pipeline Configuration
+The next steps will guide you thought the configuration of a Build pipeline based on YAML file.
+
+### Prerequisites
+
+- Azure DevOps organization. You can find documentation [here](https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/create-organization?view=azure-devops).
+- Azure subscription. Required to create and delete Azure resources.
+
+### Step by step
+
+1. Create a pipeline using the classic editor, this options allows to us select the YAML file to configure the pipeline.
+![image](https://user-images.githubusercontent.com/38112957/70251315-07982e80-175e-11ea-8edf-6f49af38922f.png)
+
+2. Configure the repository and branch.
+![image](https://user-images.githubusercontent.com/38112957/70251361-1da5ef00-175e-11ea-9c2a-777ab959829a.png)
+
+3. In the section Configuration as code select YAML
+![image](https://user-images.githubusercontent.com/38112957/70251402-331b1900-175e-11ea-9cb0-58094984e84f.png)
+
+4. In the section YAML, write the build name, select the build YAML file.
+![image](https://user-images.githubusercontent.com/38112957/70251437-4201cb80-175e-11ea-89b9-b1da5f7ab552.png)
+
+5. In the Section Variables, Add a variable to save the azure subscription value.
+![image](https://user-images.githubusercontent.com/38112957/70251455-4d54f700-175e-11ea-8ddb-e6f6766f25d7.png)
+
+`Variable: AzureSubscription = "YOUR_AZ_SUBSCRIPTION"`
+
+6. Save and queue.

libraries/browser-functional-tests/browser-tests-build-ci.yml

@@ -0,0 +1,96 @@
+# Copyright (c) Microsoft Corporation. All rights reserved.
+# Licensed under the MIT License.
+
+trigger:
+    - master
+
+pr:
+    - master
+
+pool:
+  vmImage: 'vs2017-win2016'
+
+variables:
+  TestResourceGroup: 'BrowserBotTest'
+  TestAppServicePlan: 'BrowserBotServicePlan'
+  TestWebApp: 'BrowserBotWebApp'
+  TESTURI: 'https://$(TestWebApp).azurewebsites.net/'
+
+steps:
+
+- task: NodeTool@0
+  displayName: 'Use Node 10.'
+  inputs:
+    versionSpec: 10.x
+
+- task: Npm@1
+  displayName: 'npm install bot dependencies'
+  inputs:
+    workingDir: 'libraries/browser-functional-tests/browser-echo-bot'
+    verbose: false
+
+- task: Npm@1
+  displayName: 'npm build bot '
+  inputs:
+    command: custom
+    workingDir: 'libraries/browser-functional-tests/browser-echo-bot'
+    verbose: false
+    customCommand: 'run build'
+
+- powershell: |
+   # Compress Bot Source Code
+   
+   cd $(System.DefaultWorkingDirectory)/libraries/browser-functional-tests/browser-echo-bot/dist
+   $DirToCompress = "$(System.DefaultWorkingDirectory)/libraries/browser-functional-tests/browser-echo-bot/dist"
+   $files = Get-ChildItem -Path $DirToCompress
+   $ZipFileResult="$(System.DefaultWorkingDirectory)/libraries/browser-functional-tests/browser-echo-bot/browser-echo-bot.zip"
+   Compress-Archive -Path $files -DestinationPath $ZipFileResult
+  displayName: 'Compress Bot Source Code'
+
+- task: AzureCLI@1
+  displayName: 'Deploy browser bot'
+  inputs:
+    azureSubscription: '$(AzureSubscription)'
+    scriptLocation: inlineScript
+    inlineScript: |
+     echo "# Create resource group"
+     call az group create -l westus -n "$(TestResourceGroup)"
+     
+     echo "# Create app service plan"
+     call az appservice plan create -g "$(TestResourceGroup)" -n "$(TestAppServicePlan)" --number-of-workers 4 --sku S1
+     
+     echo "# Create web app"
+     call az webapp create -g "$(TestResourceGroup)" -p "$(TestAppServicePlan)" -n "$(TestWebApp)"
+     
+     echo "# Deploy source code"
+     call az webapp deployment source config-zip --resource-group "$(TestResourceGroup)" --name "$(TestWebApp)" --src "$(System.DefaultWorkingDirectory)/libraries/browser-functional-tests/browser-echo-bot/browser-echo-bot.zip"
+
+- task: Npm@1
+  displayName: 'npm install tests dependecies'
+  inputs:
+    workingDir: 'libraries/browser-functional-tests'
+    verbose: false
+
+- task: Npm@1
+  displayName: 'run chrome tests'
+  inputs:
+    command: custom
+    workingDir: ''
+    verbose: false
+    customCommand: 'run browser-functional-test chrome'
+
+- task: Npm@1
+  displayName: 'run firefox tests'
+  inputs:
+    command: custom
+    workingDir: ''
+    verbose: false
+    customCommand: 'run browser-functional-test firefox'
+
+- task: AzureCLI@1
+  displayName: 'Delete Resource Group'
+  inputs:
+    azureSubscription: '$(AzureSubscription)'
+    scriptLocation: inlineScript
+    inlineScript: 'call az group delete -n BrowserBotTest --yes'
+  condition: succeededOrFailed()

libraries/browser-functional-tests/nightwatch.conf.js

@@ -1,49 +1,45 @@
 const chromedriver = require('chromedriver');
+const seleniumServer = require('selenium-server');
+const geckodriver = require('geckodriver');
 
 module.exports = {
     src_folders: ['tests'],
     page_objects_path: 'tests/tests_pages',
-    webdriver: {
-        start_process: true,
-        server_path: 'node_modules/.bin/chromedriver',
-        port: 9515
-    },
-
-    test_workers: {
-        enabled: false,
-        workers: 'auto'
-    },
     test_settings: {
-        default: {
-            webdriver: {
+        selenium: {
+            selenium: {
                 start_process: true,
-                server_path: chromedriver.path,
                 port: 9515,
-                cli_args: ['--port=9515']
+                server_path: seleniumServer.path,
+                cli_args: {
+                    'webdriver.gecko.driver': geckodriver.path,
+                    'webdriver.chrome.driver': chromedriver.path
+                }
             },
+            webdriver: {
+                start_process: false
+            }
+        },
+
+        chrome: {
+            extends: 'selenium',
             desiredCapabilities: {
                 browserName: 'chrome',
                 javascriptEnabled: true,
                 acceptSslCerts: true,
-                chromeOptions: {
-                    args: ['headless', 'disable-gpu']
+                chromeOptions : {
+                    w3c: false
                 }
             }
         },
-        chrome: {
-            webdriver: {
-                start_process: true,
-                server_path: chromedriver.path,
-                port: 9515,
-                cli_args: ['--port=9515']
-            },
+
+        firefox: {
+            extends: 'selenium',
+            silent: true,
             desiredCapabilities: {
-                browserName: 'chrome',
+                browserName: 'firefox',
                 javascriptEnabled: true,
-                acceptSslCerts: true,
-                chromeOptions: {
-                    args: ['headless', 'disable-gpu']
-                }
+                acceptSslCerts: true
             }
         }
     }

libraries/browser-functional-tests/package.json

@@ -4,9 +4,11 @@
   "description": "Test to check browser compatibility",
   "main": "",
   "devDependencies": {
-    "nightwatch": "^1.2.4",
     "chromedriver": "^77.0.0",
-    "dotenv": "^8.0.0"
+    "dotenv": "^8.0.0",
+    "nightwatch": "^1.2.4",
+    "geckodriver": "^1.19.1",
+    "selenium-server": "^3.141.59"
   },
   "directories": {
     "test": "tests"

libraries/browser-functional-tests/tests/message-handling-tests.js

@@ -45,19 +45,23 @@ async function assertMessageIsPresentInPage(pageInstance, textSearch, assertMess
     await pageInstance.api.elements('@webchatMessagesList', function(messagesWebElements) {
         for (let index = 0; (index < messagesWebElements.value.length); index++) {
             const webElement = messagesWebElements.value[index];
-            messagesListPromises.push(new Promise(function(resolve){
-                pageInstance.api.elementIdText(webElement.ELEMENT, function(elementText) {
+            messagesListPromises.push((function(resolve) {
+                // Workaround for different implementations of the WebDriver API
+                // This will be fixed when all browsers makes use of Selenium Server v4 which is compliant with the W3C WebDriver standards
+                var elementId = webElement.ELEMENT != undefined ? webElement.ELEMENT : webElement.values()[0];
+                pageInstance.api.elementIdText(elementId, function(elementText) {
                     resolve(elementText.value == textSearch);
                 });
             }));
         }
     }).then(function(){
         Promise.all(messagesListPromises)
-        .then(function (results) {
-            let messageExists = results.some(function (value) {
-                return value;
+            .then(function (results) {
+                let messageExists = results.some(function (value) {
+                    return value;
+                });
+                // Check if any of the existing messages was equal to the needle.
+                pageInstance.assert.strictEqual(messageExists, true, assertMessage);
             });
-            pageInstance.assert.strictEqual(messageExists, true, assertMessage);
-        });
     });
 }

package.json

@@ -6,7 +6,7 @@
     "build": "lerna run build",
     "clean": "lerna run clean",
     "functional-test": "lerna run build && nyc mocha \"libraries/functional-tests/tests/*.test.js\"",
-    "browser-functional-test": "cd libraries/browser-functional-tests && node nightwatch.js -e chrome",
+    "browser-functional-test": "cd libraries/browser-functional-tests && node nightwatch.js -e",
     "test": "lerna run build && nyc mocha \"libraries/bot*/tests/**/*.test.js\"",
     "test:coveralls": "lerna run build && nyc mocha \"libraries/bot*/tests/**/*.test.js\" && nyc report --reporter=text-lcov | coveralls",
     "test-coverage": "nyc mocha \"libraries/bot*/tests/**/*.test.js\"",