Set up CI with Azure Pipelines

azure-pipelines.yml

@@ -0,0 +1,26 @@
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+- main
+
+pool:
+  vmImage: ubuntu-latest
+
+steps:
+- script: echo Hello, world!
+  displayName: 'Run a one-line script'
+
+- script: |
+    npm install
+    printenv
+    npm run sample-test
+  env:
+    BROWSERSTACK_USERNAME: $(BROWSERSTACK_USERNAME)
+    BROWSERSTACK_ACCESS_KEY: ${BROWSERSTACK_ACCESS_KEY}
+    BROWSERSTACK_PROJECT_NAME: $(BROWSERSTACK_PROJECT_NAME)
+    BROWSERSTACK_BUILD_NAME: ${BROWSERSTACK_BUILD_NAME}
+    BUILD_NUMBER: ${BUILD_NUMBER}
+  displayName: 'Run a multi-line script'

browserstack.yml

@@ -11,7 +11,7 @@ accessKey: YOUR_ACCESS_KEY
 # ======================
 # The following capabilities are used to set up reporting on BrowserStack:
 # Set 'projectName' to the name of your project. Example, Marketing Website
-projectName: BrowserStack Samples 
+projectName: TL Acc Az BrowserStack Samples 
 # Set `buildName` as the name of the job / testsuite being run
 buildName: browserstack build 
 # `buildIdentifier` is a unique id to differentiate every execution that gets appended to
@@ -30,15 +30,7 @@ platforms:
   - os: Windows
     osVersion: 11
     browserName: chrome
-    browserVersion: latest
-  - os: OS X
-    osVersion: Ventura
-    browserName: playwright-webkit
-    browserVersion: latest
-  - os: Windows
-    osVersion: 11
-    browserName: playwright-firefox
-    browserVersion: latest
+    browserVersion: 138
 
 # =======================
 # Parallels per Platform
@@ -57,7 +49,12 @@ parallelsPerPlatform: 1
 # ==========================================
 # 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)
+browserstackLocal: false # <boolean> (Default false)
+browserstackLocalOptions:
+  localIdentifier: null
+  forceLocal: true # Route all traffic through BrowserStack Local
+  forceKill: true
+
 # 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.
@@ -70,12 +67,16 @@ source: node-js-playwright-sample-sdk:v1
 # ===================
 # 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
+debug: true # <boolean> # Set to true if you need screenshots for every selenium command ran
+networkLogs: true
+consoleLogs: verbose
+video: true
+logLevel: debug
+accessibility: true
+accessibilityOptions:
+    wcagVersion: wcag2aa # Default: wcag21aa
+    includeIssueType: 
+        bestPractice: true # Default: false
+        needsReview: true # Default: true
+        experimental: false # Default: true
+    advanced_scan_timeout: 120

package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "latest",
+    "@playwright/test": "1.53.0",
     "browserstack-node-sdk": "latest"
   }
 }

playwright.config.js

@@ -1,28 +1,101 @@
+import { devices } from '@playwright/test';
+
 // This is a sample config for what users might be running locally
 const config = {
+  fullyParallel: true,
   testDir: './tests',
   testMatch: '**/bstack_test*.js',
 
   /* Maximum time one test can run for. */
   timeout: 90 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000,
+    expect: {
+    timeout: 60000,
+    toMatchSnapshot: { 
+      threshold: 0.3,
+      maxDiffPixelRatio: 0.3
+    }
   },
   /* tests in parallel */
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'line',
+  reporter: [
+    ['junit', { open: 'never', outputFile: 'results.xml' }],
+    ['html', { open: 'never', outputFolder: 'test-html-results/report' }]
+  ],
   /* Configure projects for major browsers */
+  use: {
+    headless: true,
+    ignoreHTTPSErrors: true,
+    actionTimeout: 60000,
+    viewport: {
+      width: 1920,
+      height: 1080
+    },
+    geolocation: { longitude: 22.5726, latitude: 88.3639 },
+    permissions: ['geolocation'],
+    extraHTTPHeaders: {
+      // We set this header per GitHub guidelines.
+      'Accept': 'application/json'
+      // Add authorization token to all requests.
+      // 'Authorization': `token ${process.env.API_TOKEN}`,
+    },
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    launchOptions: {
+      slowMo: 500,
+    },
+  },
   projects: [
     {
-      name: 'chrome',
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+
+    {
+      name: 'mobile-chrome',
+      use: {
+        ...devices['Pixel 7'],
+        viewport: { width: 412, height: 915 }
+      },
+    },
+
+    // Add BrowserStack-specific projects
+    {
+      name: '-latest:Windows 11-browserstack',
       use: {
         browserName: 'chromium',
-        channel: 'chrome',
+        // BrowserStack SDK injects additional settings
+      },
+    },
+    {
+      name: '-latest:OS X Ventura-browserstack',
+      use: {
+        browserName: 'chromium',
+      },
+    },
+
+    {
+      name: 'mobile-safari',
+      use: {
+        ...devices['iPhone 14 Pro'],
+        viewport: { width: 412, height: 915 }
       },
     },
   ],