CFWEB-69 Run Playwright tests with browserstack by using Github workflow

.github/workflows/run-playwright-browserstack.yml

@@ -0,0 +1,55 @@
+name: Run Playwright on Browserstack
+
+on:
+  workflow_dispatch:
+    inputs:
+      user_name:
+        description: 'browserstack user name'
+        required: true
+      access_key:
+        description: 'browserstack access key'
+        required: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    # define node version
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Mask Credentials and store them in env
+        run: |
+          BROWSERSTACK_USER_NAME=$(jq -r '.inputs.user_name' $GITHUB_EVENT_PATH)
+          BROWSERSTACK_ACCESS_KEY=$(jq -r '.inputs.access_key' $GITHUB_EVENT_PATH)
+          echo ::add-mask::$BROWSERSTACK_USER_NAME
+          echo ::add-mask::$BROWSERSTACK_ACCESS_KEY
+          echo BROWSERSTACK_USER_NAME=$BROWSERSTACK_USER_NAME >> $GITHUB_ENV
+          echo BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY >> $GITHUB_ENV
+
+      # setting up node
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      # install
+      - name: Install Dependencies
+        if: steps.cache-nodemodules.outputs.cache-hit != 'true'
+        run: |
+          npm ci
+
+      # build
+      - name: Build
+        run: |
+          npm run build:prod
+
+      # Run E2E Tests
+      - name: PlayWright Test
+        run: |
+          npm run e2e:playwright:ci-browserstack

README.md

@@ -41,6 +41,16 @@ Run `npm run e2e:playwright` to execute the end-to-end tests via Playwright.
 
 Run `npm run e2e:playwright:ui` to start [Playwright UI Mode](https://playwright.dev/docs/test-ui-mode).
 
+### Running Playwright tests with BrowserStack
+
+Precondition: You need a BrowserStack account to get your username and access key: https://www.browserstack.com/docs/iaam/security/manage-access-keys.
+
+Run tests with Github workflow:
+
+- Follow the Github Guide (https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow)
+- The workflow that needs to be started is called `Run Playwright on Browserstack`
+- Enter the BrowserStack credentials as input parameters.
+
 ## Running layout tests
 
 Run `npm run galen` to run layout tests using the [Galen Framework](http://galenframework.com/).

angular.json

@@ -109,7 +109,8 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   },
   "schematics": {
     "@angular-eslint/schematics:application": {

browserstack.yml

@@ -0,0 +1,79 @@
+# =============================
+# Set BrowserStack Credentials
+# =============================
+# Add your BrowserStack userName and accessKey here or set BROWSERSTACK_USERNAME and
+# BROWSERSTACK_ACCESS_KEY as env variables
+userName: ${BROWSERSTACK_USER_NAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+# ======================
+# BrowserStack Reporting
+# ======================
+# The following capabilities are used to set up reporting on BrowserStack:
+# Set 'projectName' to the name of your project. Example, Marketing Website
+projectName: Angular Styleguide
+# Set `buildName` as the name of the job / testsuite being run
+buildName: Ice Cream Shop
+# `buildIdentifier` is a unique id to differentiate every execution that gets appended to
+# buildName. Choose your buildIdentifier format from the available expressions:
+# ${BUILD_NUMBER} (Default): Generates an incremental counter with every execution
+# ${DATE_TIME}: Generates a Timestamp with every execution. Eg. 05-Nov-19:30
+# Read more about buildIdentifiers here -> https://www.browserstack.com/docs/automate/selenium/organize-tests
+buildIdentifier: '#${BUILD_NUMBER}' # Supports strings along with either/both ${expression}
+
+# =======================================
+# Platforms (Browsers / Devices to test)
+# =======================================
+# Platforms object contains all the browser / device combinations you want to test on.
+# Entire list available here -> (https://www.browserstack.com/list-of-browsers-and-platforms/automate)
+platforms:
+  - os: OS X
+    osVersion: Big Sur
+    browserName: Chrome
+    browserVersion: 105
+  - os: Windows
+    osVersion: 10
+    browserName: Edge
+    browserVersion: latest
+  - deviceName: Samsung Galaxy S22 Ultra
+    browserName: chrome # Try 'samsung' for Samsung browser
+    osVersion: 12.0
+
+# =======================
+# Parallels per Platform
+# =======================
+# The number of parallel threads to be used for each platform set.
+# BrowserStack's SDK runner will select the best strategy based on the configured value
+#
+# Example 1 - If you have configured 3 platforms and set `parallelsPerPlatform` as 2, a total of 6 (2 * 3) parallel threads will be used on BrowserStack
+#
+# Example 2 - If you have configured 1 platform and set `parallelsPerPlatform` as 5, a total of 5 (1 * 5) parallel threads will be used on BrowserStack
+parallelsPerPlatform: 1
+retryTestsOnFailure: true
+testIterations: 3
+
+# ==========================================
+# BrowserStack Local
+# (For localhost, staging/private websites)
+# ==========================================
+# Set browserStackLocal to true if your website under test is not accessible publicly over the internet
+# Learn more about how BrowserStack Local works here -> https://www.browserstack.com/docs/automate/selenium/local-testing-introduction
+browserstackLocal: true # <boolean> (Default false)
+# browserStackLocalOptions:
+# Options to be passed to BrowserStack local in-case of advanced configurations
+# localIdentifier: # <string> (Default: null) Needed if you need to run multiple instances of local.
+# forceLocal: true  # <boolean> (Default: false) Set to true if you need to resolve all your traffic via BrowserStack Local tunnel.
+# Entire list of arguments available here -> https://www.browserstack.com/docs/automate/selenium/manage-incoming-connections
+
+# ===================
+# Debugging features
+# ===================
+debug: false # <boolean> # Set to true if you need screenshots for every selenium command ran
+networkLogs: false # <boolean> Set to true to enable HAR logs capturing
+consoleLogs: errors # <string> Remote browser's console debug levels to be printed (Default: errors)
+# Available options are `disable`, `errors`, `warnings`, `info`, `verbose` (Default: errors)
+# CUSTOM_TAG_<INT>: # <string> (Default: parent folder name of the test file) Custom tag for your test suite
+
+# Test Observability is an intelligent test reporting & debugging product. It collects data using the SDK. Read more about what data is collected at https://www.browserstack.com/docs/test-observability/references/terms-and-conditions
+# Visit observability.browserstack.com to see your test reports and insights. To disable test observability, specify `testObservability: false` in the key below.
+testObservability: true

e2e-playwright/playwright.config.ci.ts

@@ -46,5 +46,3 @@ const config: PlaywrightTestConfig = {
   ],
 };
 export default config;
-
-export const baseUrl: string = 'http://localhost:4200';