Testing browserstack githubactions

.github/workflows/playwright.yml

@@ -0,0 +1,48 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - 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'  # Invokes the setup-local action
+      uses: browserstack/github-actions/setup-local@master
+      with:
+        local-testing: start
+        local-identifier: random
+
+    - name: Run Playwright tests
+      run: npx browserstack-node-sdk playwright test
+      env:
+        BROWSERSTACK_USERNAME: ${{secrets.BROWSERSTACK_USERNAME}}
+        BROWSERSTACK_ACCESS_KEY: ${{secrets.BROWSERSTACK_ACCESS_KEY}}
+
+    - name: 'BrowserStackLocal Stop'  # Terminating the BrowserStackLocal tunnel connection
+      uses: browserstack/github-actions/setup-local@master
+      with:
+        local-testing: stop
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -8,4 +8,7 @@
 
 /public/stylesheets/style.css
 /path.txt
-
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

browserstack.yml

@@ -0,0 +1,12 @@
+platforms:
+  - deviceName: Samsung Galaxy S22
+    osVersion: 12.0
+    browserName: chrome
+    deviceOrientation: portrait
+browserstackLocal: true
+buildName: bstack-demo
+buildIdentifier: ${BUILD_NUMBER}
+projectName: BrowserStack Sample
+debug: true
+networkLogs: true
+consoleLogs: info

fixture.js

@@ -0,0 +1,155 @@
+const base = require("@playwright/test");
+const cp = require("child_process");
+const { _android } = require("playwright");
+const clientPlaywrightVersion = cp
+  .execSync("npx playwright --version")
+  .toString()
+  .trim()
+  .split(" ")[1];
+const BrowserStackLocal = require("browserstack-local");
+const util = require("util");
+
+// BrowserStack Specific Capabilities.
+// Set 'browserstack.local:true For Local testing
+const caps = {
+  osVersion: "12.0",
+  deviceName: "Samsung Galaxy S22", // "Samsung Galaxy S22 Ultra", "Google Pixel 7 Pro", "OnePlus 9", etc.
+  browserName: "chrome",
+  realMobile: "true",
+  name: "My android playwright test",
+  build: "playwright-build-1",
+  "browserstack.username": process.env.BROWSERSTACK_USERNAME || "<USERNAME>",
+  "browserstack.accessKey":
+    process.env.BROWSERSTACK_ACCESS_KEY || "<ACCESS_KEY>",
+  "browserstack.local": process.env.BROWSERSTACK_LOCAL || false,
+};
+
+exports.bsLocal = new BrowserStackLocal.Local();
+
+// replace YOUR_ACCESS_KEY with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
+exports.BS_LOCAL_ARGS = {
+  key: process.env.BROWSERSTACK_ACCESS_KEY || "ACCESSKEY",
+};
+
+// Patching the capabilities dynamically according to the project name.
+const patchMobileCaps = (name, title) => {
+  let combination = name.split(/@browserstack/)[0];
+  let [browerCaps, osCaps] = combination.split(/:/);
+  let [browser, deviceName] = browerCaps.split(/@/);
+  let osCapsSplit = osCaps.split(/ /);
+  let os = osCapsSplit.shift();
+  let osVersion = osCapsSplit.join(" ");
+  caps.browser = browser ? browser : "chrome";
+  caps.deviceName = deviceName ? deviceName : "Samsung Galaxy S22 Ultra";
+  caps.osVersion = osVersion ? osVersion : "12.0";
+  caps.name = title;
+  caps.realMobile = "true";
+};
+
+const patchCaps = (name, title) => {
+  let combination = name.split(/@browserstack/)[0];
+  let [browerCaps, osCaps] = combination.split(/:/);
+  let [browser, browser_version] = browerCaps.split(/@/);
+  let osCapsSplit = osCaps.split(/ /);
+  let os = osCapsSplit.shift();
+  let os_version = osCapsSplit.join(" ");
+  caps.browser = browser ? browser : "chrome";
+  caps.browser_version = browser_version ? browser_version : "latest";
+  caps.os = os ? os : "osx";
+  caps.os_version = os_version ? os_version : "catalina";
+  caps.name = title;
+};
+
+const isHash = (entity) =>
+  Boolean(entity && typeof entity === "object" && !Array.isArray(entity));
+const nestedKeyValue = (hash, keys) =>
+  keys.reduce((hash, key) => (isHash(hash) ? hash[key] : undefined), hash);
+const isUndefined = (val) => val === undefined || val === null || val === "";
+const evaluateSessionStatus = (status) => {
+  if (!isUndefined(status)) {
+    status = status.toLowerCase();
+  }
+  if (status === "passed") {
+    return "passed";
+  } else if (status === "failed" || status === "timedout") {
+    return "failed";
+  } else {
+    return "";
+  }
+};
+
+exports.test = base.test.extend({
+  page: async ({ page, playwright }, use, testInfo) => {
+    if (true) {
+      let vBrowser, vContext, vDevice;
+      const isMobile = testInfo.project.name.match(/browserstack-mobile/);
+      if (isMobile) {
+        patchMobileCaps(
+          testInfo.project.name,
+          `${testInfo.file} - ${testInfo.title}`
+        );
+        vDevice = await playwright._android.connect(
+          `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(
+            JSON.stringify(caps)
+          )}`
+        );
+        await vDevice.shell("am force-stop com.android.chrome");
+        vContext = await vDevice.launchBrowser();
+      } else {
+        patchCaps(testInfo.project.name, `${testInfo.title}`);
+        delete caps.osVersion;
+        delete caps.deviceName;
+        delete caps.realMobile;
+        vBrowser = await playwright.chromium.connect({
+          wsEndpoint:
+            `wss://cdp.browserstack.com/playwright?caps=` +
+            `${encodeURIComponent(JSON.stringify(caps))}`,
+        });
+        vContext = await vBrowser.newContext(testInfo.project.use);
+      }
+      const vPage = await vContext.newPage();
+      await use(vPage);
+
+      await vPage.close();
+
+      if (isMobile) {
+        await vDevice.close();
+      } else {
+        await vBrowser.close();
+      }
+    } else {
+      use(page);
+    }
+  },
+
+  beforeEach: [
+    async ({ page }, use) => {
+      await page
+        .context()
+        .tracing.start({ screenshots: true, snapshots: true, sources: true });
+      await use();
+    },
+    { auto: true },
+  ],
+
+  afterEach: [
+    async ({ page }, use, testInfo) => {
+      await use();
+      if (testInfo.status == "failed") {
+        await page
+          .context()
+          .tracing.stop({ path: `${testInfo.outputDir}/trace.zip` });
+        await page.screenshot({ path: `${testInfo.outputDir}/screenshot.png` });
+        await testInfo.attach("screenshot", {
+          path: `${testInfo.outputDir}/screenshot.png`,
+          contentType: "image/png",
+        });
+        await testInfo.attach("trace", {
+          path: `${testInfo.outputDir}/trace.zip`,
+          contentType: "application/zip",
+        });
+      }
+    },
+    { auto: true },
+  ],
+});