Add browser stack support to selenium test

Author: ajayyy

.github/workflows/browserstack.yml

@@ -0,0 +1,34 @@
+name: 'BrowserStack Test'
+on: [push, pull_request]
+jobs:
+  ubuntu-job:
+    name: 'BrowserStack Test on Ubuntu'
+    runs-on: ubuntu-latest  # Can be self-hosted runner also
+    steps:
+      - name: 'BrowserStack Env Setup'  # Invokes the setup-env action
+        uses: browserstack/github-actions/setup-env@master
+        with:
+          username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+      - name: 'BrowserStack Local Tunnel Setup'  # Invokes the setup-local action
+        uses: browserstack/github-actions/setup-local@master
+        with:
+          local-testing: start
+          local-identifier: random
+      # The next 3 steps are for building the web application to be tested and starting the web server on the runner environment
+      - name: 'Checkout the repository'
+        uses: actions/checkout@v2
+
+      - name: Copy configuration
+        run: cp config.json.example config.json
+
+      - name: 'Building web application to be tested'
+        run: npm install
+      # - name: 'Running application under test'
+      #   run: npm test
+      - name: 'Running test on BrowserStack'
+        run: npm test
+      - name: 'BrowserStackLocal Stop'  # Terminating the BrowserStackLocal tunnel connection
+        uses: browserstack/github-actions/setup-local@master
+        with:
+          local-testing: stop

test/selenium.test.ts

@@ -24,9 +24,39 @@ async function setup(): Promise<WebDriver> {
     const options = new Chrome.Options();
     options.addArguments("--load-extension=" + Path.join(__dirname, "../dist/"));
     options.addArguments("--mute-audio");
-    options.addArguments("--disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies")
+    options.addArguments("--disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies");
+    options.windowSize({
+        width: 1280,
+        height: 720
+    });
+
+    let driver;
+    if (process.env.BROWSERSTACK_BUILD_NAME) {
+        const capabilities = {
+            'os': 'windows',
+            'os_version': '10',
+            'browserName': 'chrome',
+            'browser_version' : 'latest',
+            'browserstack.local': 'true',
+            'build': process.env.BROWSERSTACK_BUILD_NAME,
+            'project': process.env.BROWSERSTACK_PROJECT_NAME,
+            'browserstack.localIdentifier': process.env.BROWSERSTACK_LOCAL_IDENTIFIER,
+            'browserstack.user': process.env.BROWSERSTACK_USERNAME,
+            'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY
+        }
+
+        driver = await new Builder()
+            .usingServer('http://hub-cloud.browserstack.com/wd/hub')
+            .setChromeOptions(options)
+            .withCapabilities(capabilities)
+            .build();
+    } else {
+        driver = await new Builder()
+            .forBrowser("chrome")
+            .setChromeOptions(options)
+            .build();
+    }
 
-    const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();
     driver.manage().setTimeouts({
         implicit: 5000
     });