Set up Browserstack to run the E2E tests on Chrome for Android (#1428)

* Set up browserstack

* Set up browserstack in GHA

* Tighten timeout

Author: whitphx

.github/workflows/test-build.yml

@@ -643,6 +643,60 @@ jobs:
       env:
         BUILD_DIR: ${{ runner.temp }}/artifacts/browser/package/build
 
+  e2e-browser-browserstack:
+    if: ${{ ! failure() }}  # This job should run even if the depending jobs are skipped, but not when those jobs failed: https://qiita.com/abetomo/items/d9ede7dbeeb24f723fc5#%E8%A8%AD%E5%AE%9A%E4%BE%8B4
+    needs: [build-browser]
+
+    permissions:
+      contents: read
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: 'BrowserStack Env Setup'
+      uses: browserstack/github-actions/setup-env@master
+      with:
+        username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+        access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+    - name: 'BrowserStack Local Tunnel Setup'
+      uses: browserstack/github-actions/setup-local@master
+      with:
+        local-testing: start
+        local-identifier: random
+
+    - uses: actions/checkout@v4
+      with:
+        persist-credentials: false
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: ${{ env.node-version-file }}
+        cache: 'yarn'
+
+    - name: Set up the e2e-tests environment
+      run: yarn install --frozen-lockfile
+      working-directory: packages/browser/e2e-tests
+
+    - run: mkdir -p ${{ runner.temp }}/artifacts/browser
+    - uses: actions/download-artifact@v4
+      with:
+        name: stlite-browser
+        path: ${{ runner.temp }}/artifacts/browser
+
+    - run: tar xzvf stlite-browser-v*.tgz
+      working-directory: ${{ runner.temp }}/artifacts/browser
+
+    - name: Run the e2e-tests
+      run: yarn test:browserstack
+      working-directory: packages/browser/e2e-tests
+      env:
+        BUILD_DIR: ${{ runner.temp }}/artifacts/browser/package/build
+
+    - name: 'BrowserStackLocal Stop'
+      uses: browserstack/github-actions/setup-local@master
+      with:
+        local-testing: stop
+
   e2e-desktop:
     if: ${{ ! failure() }}  # This job should run even if the depending jobs are skipped, but not when those jobs failed: https://qiita.com/abetomo/items/d9ede7dbeeb24f723fc5#%E8%A8%AD%E5%AE%9A%E4%BE%8B4
     needs: [build-desktop]

packages/browser/e2e-tests/.gitignore

@@ -7,3 +7,4 @@ dist/
 
 # Logs
 *.log
+log/

packages/browser/e2e-tests/browserstack.yml

@@ -0,0 +1,9 @@
+projectName: Stlite
+buildName: "@stlite/browser:e2e-tests"
+
+platforms:
+  - deviceName: Pixel 9
+    browserName: chrome
+    osVersion: 15.0
+
+browserstackLocal: true

packages/browser/e2e-tests/package.json

@@ -7,10 +7,13 @@
     "test:headed": "playwright test --headed",
     "test:ui": "playwright test --ui",
     "install:browsers": "playwright install --with-deps",
+    "test:browserstack": "browserstack-node-sdk playwright test",
+    "postinstall": "yarn upgrade browserstack-node-sdk",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
+    "browserstack-node-sdk": "^1.34.46",
     "http-server": "^14.1.1",
     "typescript": "^5.8.2"
   }