chore: adding selenium tests with browserstack (#2570)

Co-authored-by: Valentin Marchaud <[email protected]>

Author: obecny

.github/workflows/peer-api.yaml

@@ -22,8 +22,9 @@ jobs:
         run: npm install semver
 
       - name: Check API dependency semantics (stable)
-        run: lerna exec --ignore propagation-validation-server "node ../../scripts/peer-api-check.js"
+        working-directory: packages
+        run: lerna exec --ignore propagation-validation-server --ignore propagation-validation-server --ignore @opentelemetry/selenium-tests "node ../../scripts/peer-api-check.js"
 
       - name: Check API dependency semantics (experimental)
         working-directory: experimental
-        run: lerna exec --ignore propagation-validation-server "node ../../../scripts/peer-api-check.js"
+        run: lerna exec --ignore propagation-validation-server --ignore @opentelemetry/selenium-tests "node ../../../scripts/peer-api-check.js"

.github/workflows/unit-test.yml

@@ -35,7 +35,7 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: |
           npm install --ignore-scripts
-          npx lerna bootstrap --no-ci --hoist --nohoist='zone.js'
+          npx lerna bootstrap --no-ci --hoist --nohoist='zone.js' --ignore @opentelemetry/selenium-tests
 
       - name: Build 🔧
         run: |
@@ -111,7 +111,7 @@ jobs:
         working-directory: experimental
         run: |
           npm install --ignore-scripts
-          npx lerna bootstrap --no-ci --hoist --nohoist='zone.js'
+          npx lerna bootstrap --no-ci --hoist --nohoist='zone.js' --ignore @opentelemetry/selenium-tests
 
       - name: Build 🔧
         working-directory: experimental

lerna.json

@@ -5,6 +5,7 @@
   "packages": [
     "benchmark/*",
     "packages/*",
-    "integration-tests/*"
+    "integration-tests/*",
+    "selenium-tests"
   ]
 }

selenium-tests/.gitignore

@@ -0,0 +1,2 @@
+tests_output
+tmp

selenium-tests/README.md

@@ -0,0 +1,54 @@
+## Selenium Tests
+
+Selenium tests are to help verify the working of opentelemetry in different browsers. For that the nightwatch is used.
+This can be run either locally or in github actions with usage of browserstack.
+Browser stack also gives possibility of running tests in browserstack on different browsers using our local environment.
+This helps to test and debug things locally using any browser we want.  
+
+## Running tests locally using local browser - this is also useful when adding new test
+
+1. run server
+
+```shell
+npm run server
+```
+
+1. run local test for example for xhr
+
+```shell
+npm run local:xhr
+```
+
+Please wait a bit it should run selenium tests using our local version of chrome
+
+## Running tests locally using browser stack account - for that you need to have a browser stack account
+
+If you have it please create a file ".env" based on "example.env"
+
+1. run server
+
+```shell
+npm run server
+```
+
+1. Run local test for example for xhr
+
+```shell
+npm run local:bs:xhr
+```
+
+## Architecture
+
+1. Folder pages contains all the pages that can be entered after running `npn run server` at <http://localhost:8090/> .
+These are fully functioning pages and can be run without running tests.
+
+2. To be able to test it automatically instead of manually we have to create a test. Tests are kept in folder "tests".
+For each page there is a corresponding folder with exactly the same name. There are additional 2 files
+
+- helper.js - this file keeps some helpers functions that are included in page automatically and they are available in tests only in section "execute".
+This is because this section is being sent to the browser and executed automatically. This is the only way of "sending" and "reading" data back to test
+When data is being sent between browser and selenium it needs to be stringified that's why we have one more helper for that called "JSONSafeStringify"
+The last helper is the one that helps to verify test has finished successfully "OTELSeleniumDone".
+
+- tracing.js - this file contains the skeleton for tracing and export function "loadOtel" this is a helper function that accepts instrumentations as param.
+This way it is easy to add different tests that has different lists of instrumentations.

selenium-tests/babel.config.js

@@ -0,0 +1,33 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        corejs: {
+          version: '3',
+          proposals: true,
+        },
+        useBuiltIns: 'entry',
+        targets: {
+            // 'edge': 16,
+            // 'safari': 9,
+            // 'firefox': 57,
+            'ie': 11,
+            // 'ios': 9,
+            // 'chrome': 49,
+        },
+      },
+    ],
+  ];
+  const plugins = [
+    ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+  ];
+  return {
+    presets,
+    plugins,
+  };
+};

selenium-tests/example.env

@@ -0,0 +1,2 @@
+BROWSERSTACK_USER="YOUR USER"
+BROWSERSTACK_KEY="YOUR BROWSER STACK KEY"