Update files for Playwright pipeline and reporting

azure-pipelines-automated-testing.yml

@@ -8,21 +8,28 @@ schedules:
     - develop
 pool: 'Default'
 
+resources:
+  repositories:
+      - repository: AzureDevOps
+        type: github
+        name: Safelite/AzureDevOps
+        endpoint: Safelite
+        ref: refs/tags/t5.7.40
+
 variables:
   # - group: Digital-Infrastructure
   # - group: ISS-BuildBranches
+  - group: SafelitePlaywright
   - name: dockerImageName
     value: 'playwright-tests'
   - name: imageTag
     value: '$(Build.BuildId)'
   - name: totalShards
-    value: 4
+    value: '4'
   - name: IS_REGRESSION
     value: 'true'
   - name: JIRA_BOARD_ID
     value: '853'
-  - name: JIRA_EPIC_KEY
-    value: 'INSR-414'
   - name: JIRA_PROJECT_KEY
     value: 'INSR'
 
@@ -30,158 +37,17 @@ stages:
   - stage: TestPr
     displayName: Run Playwright Test
     jobs:
-    - job: playwright_tests
-      continueOnError: true
-      strategy:
-        matrix:
-          shard1:
-            shardNumber: 1
-          shard2:
-            shardNumber: 2
-          shard3:
-            shardNumber: 3
-          shard4:
-            shardNumber: 4
-
-      steps:
-      - task: Docker@2
-        displayName: 'Build Docker Image'
-        inputs:
-          command: build
-          dockerfile: Dockerfile.playwright
-          repository: $(dockerImageName)
-          tags: $(imageTag)
-          arguments: '--no-cache --pull'
-
-      - script: |
-          # Create container and run tests
-          container_id=$(docker create \
-            --ipc=host \
-            -e CCIS_API_AUTH=$(CCIS_API_AUTH) \
-            -e BASE_URL=$(BASE_URL) \
-            -e CCIS_API_URL=$(CCIS_API_URL) \
-            -e ADMIN_SERVICE_API_URL=$(ADMIN_SERVICE_API_URL) \
-            -e SHARD=$(shardNumber) \
-            -e CI=true \
-            -e NODE_ENV=$(NODE_ENV) \
-            $(dockerImageName):$(imageTag) \
-            npx concurrently -k -n "server,playwright"\
-            "sed -i \"s|^process\.env\.VUE_APP_CONSUMER_CF_DISTRO = .*|process\.env\.VUE_APP_CONSUMER_CF_DISTRO='https://digitalapi.test.safelite.io'|\" \"./vue.config.js\" && echo \"Updated config file to use TEST APIs\" && npm run serve -- --port=8080"\
-            "npx wait-on http://localhost:8080 && npm run test:playwright -- --shard=$(shardNumber)/$(totalShards) --reporter=list,blob --grep \"@smoke|@Advanced\"")
-
-          # Start container and stream logs
-          echo "Starting tests for shard $(shardNumber)..."
-          docker start -a $container_id
-
-          # Create directory for test results
-          echo "Creating test results directory..."
-          mkdir -p $(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)
-
-          # Copy test results from container
-          echo "Copying test results..."
-          docker cp $container_id:/app/blob-report/. $(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)/
-
-          # Remove container
-          echo "Cleaning up container..."
-          docker rm $container_id
-
-          # Check if tests failed
-          if [ $? -ne 0 ]; then
-            echo "Tests failed in shard $(shardNumber) or tests don't exist for this shard number!"
-            exit 0  # Suppress error. It will be visible in report.
-          fi
-        displayName: 'Run Playwright Tests - Shard $(shardNumber)'
-
-      - task: PublishPipelineArtifact@1
-        displayName: 'Publish Test Reports - Shard $(shardNumber)'
-        condition: always()
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/blob-reports/shard-$(shardNumber)'
-          artifact: 'playwright-report-shard-$(shardNumber)'
-          publishLocation: 'pipeline'
-
-      - script: |
-          docker rmi $(dockerImageName):$(imageTag) -f
-        displayName: 'Cleanup Docker Image'
-        condition: always()
-
-    - job: download_and_merge_reports
-      dependsOn: playwright_tests
-      timeoutInMinutes: 8
-      cancelTimeoutInMinutes: 10
-      steps:
-      - task: DownloadPipelineArtifact@2
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/playwright-reports'
-      - task: Docker@2
-        displayName: 'Build Docker Image'
-        inputs:
-          command: build
-          dockerfile: Dockerfile.playwright
-          repository: $(dockerImageName)
-          tags: $(imageTag)
-          arguments: '--no-cache --pull'
-      - bash: |
-            # Create container for jira writeback
-            container_id=$(docker create \
-            --ipc=host \
-            -e JIRA_SERVER=$(JIRA_SERVER) \
-            -e JIRA_USERNAME=$(JIRA_USERNAME) \
-            -e JIRA_API_KEY=$(JIRA_API_KEY) \
-            -e IS_REGRESSION=$(IS_REGRESSION) \
-            -e JIRA_BOARD_ID=$(JIRA_BOARD_ID) \
-            -e JIRA_EPIC_KEY=$(JIRA_EPIC_KEY) \
-            -e JIRA_PROJECT_KEY=$(JIRA_PROJECT_KEY) \
-            $(dockerImageName):$(imageTag) \
-            bash -c "echo \"Moving Playwright reports out of subfolders...\" &&
-              find ./playwright-reports/ -mindepth 2 -type f -exec mv {} ./playwright-reports/ \; &&
-              echo \"Merging reports...\" && 
-              PLAYWRIGHT_JUNIT_OUTPUT_DIR='/app/test-results' PLAYWRIGHT_JUNIT_OUTPUT_NAME='junit_results.xml' npx playwright merge-reports --reporter='playwright-tests/impl/reporter/JiraWritebackReporter.ts',junit ./playwright-reports
-              echo \"Contents of ortoni-report:\" && ls ./ortoni-report &&
-              echo 'Current dir: ' && pwd
-              echo 'Contents of current dir: ' && ls
-              echo 'Contents of /app/test-results' && ls /app/test-results ")
-
-            # Start container and stream logs
-            echo "Starting merge"
-            docker start -a $container_id
-
-            # Create directory for test results
-            echo "Creating test results directory..."
-            mkdir -p $(System.DefaultWorkingDirectory)/ortoni-report
-            mkdir -p $(System.DefaultWorkingDirectory)/test-results
-
-            # Copy test results from container
-            echo "Copying test results..."
-            docker cp $container_id:/app/ortoni-report/. $(System.DefaultWorkingDirectory)/ortoni-report
-            docker cp $container_id:/app/test-results/junit_results.xml $(System.DefaultWorkingDirectory)/test-results
-
-            # Remove container
-            echo "Cleaning up container..."
-            docker rm $container_id
-        env:
+    - template: templates/digital/playwright-test.yml@AzureDevOps
+      parameters:
+        applicationType: 'vue'
+        totalShards: ${{ variables.totalShards }}
+        targetUrl: $(BASE_URL)
+        dockerFileName: 'Dockerfile.playwright'
+        isRegression: ${{ variables.IS_REGRESSION }}
+        filterTags: ''
+        playwrightTestsPath: 'playwright-tests'
+        npmServePath: '.'
+        npmrcPath: 'playwright-tests/.npmrc'
+        secrets:
+          CCIS_API_AUTH: $(CCIS_API_AUTH)
           JIRA_API_KEY: $(JIRA_API_KEY)
-        displayName: merge_and_publish_results_to_jira
-
-      - task: PublishTestResults@2
-        displayName: 'Publish test results'
-        inputs:
-          searchFolder: 'test-results'
-          testResultsFormat: 'JUnit'
-          testResultsFiles: 'junit_results.xml'
-          mergeTestResults: true
-          failTaskOnFailedTests: false
-          testRunTitle: 'Playwright Tests'
-        condition: succeededOrFailed()
-
-      - task: PublishPipelineArtifact@1
-        displayName: 'Publish Merged Report'
-        condition: always()
-        inputs:
-          targetPath: '$(System.DefaultWorkingDirectory)/ortoni-report'
-          artifact: 'playwright-merged-report'
-          publishLocation: 'pipeline'
-      - script: |
-          docker rmi $(dockerImageName):$(imageTag) -f
-        displayName: 'Cleanup Docker Image'
-        condition: always()

playwright-tests/.npmrc

@@ -0,0 +1,3 @@
+registry=https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/
+                       
+always-auth=true

playwright-tests/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "safelite-iss-nextgen-playwright-tests",
+  "version": "1.0.0",
+  "description": "Playwright tests for ISS Nextgen using Safelite Playwright Core",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:smoke": "playwright test --grep @smoke",
+    "test:report": "playwright test --grep @test_report",
+    "report": "playwright show-report",
+    "install": "playwright install",
+    "install:deps": "playwright install-deps"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.9.0",
+    "axios-retry": "^4.5.0",
+    "safelite-playwright-core": "^1.0.26"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.8.0",
+    "@playwright/test": "^1.52.0",
+    "@types/dotenv-safe": "^8.1.6",
+    "@types/node": "^22.15.32",
+    "dotenv-safe": "^9.1.0",
+    "eslint": "^9.28.0",
+    "luxon": "^3.6.1",
+    "ortoni-report": "^3.0.5",
+    "playwright-jira-reporter": "^1.0.16"
+  },
+  "private": "true"
+}

playwright-tests/playwright.config.ts

@@ -1,46 +1,61 @@
+import { formatDateForFilename } from 'safelite-playwright-core';
 import { defineConfig, devices } from '@playwright/test';
+import { JiraReporterConfig } from 'playwright-jira-reporter'
 import dotenv from 'dotenv-safe';
 import { OrtoniReportConfig } from "ortoni-report";
-import * as path from 'path';
+import path from 'path';
 
 if (!process.env.CI) {
     // Environment variables are present in CI environment, no need to read from file
-  if (process.env.NODE_ENV == 'undefined' || process.env.NODE_ENV == null) {
-    dotenv.config({ path: `playwright-tests/.env.dev`, example: 'playwright-tests/.env.example' });
-  }
-  else {
-    dotenv.config({ path: `playwright-tests/.env.${process.env.NODE_ENV}`, example: 'playwright-tests/.env.example' });
-  }
+    const basePath = __dirname; // This gets the directory where the config file is located
+
+    if (process.env.PLAYWRIGHT_ENV == undefined || process.env.PLAYWRIGHT_ENV == null) {
+        dotenv.config({
+            path: path.join(basePath, '.env.dev'),
+            example: path.join(basePath, '.env.example')
+        });
     }
 
+    dotenv.config({
+        path: path.join(basePath, `.env.${process.env.PLAYWRIGHT_ENV}`),
+        example: path.join(basePath, '.env.example')
+    });
+}
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const reportConfig: OrtoniReportConfig = {
-  port: 1994,
+// Ortoni config
+const ortoniReportConfig: OrtoniReportConfig = {
     open: "never",
-  folderPath: "test-results",
-  filename: "index.html",
-  logo: "../business-logic/data/logo.png",
-  title: "Test Report",
+    folderPath: process.env.CI ? 'ortoni-report' : 'test-results',
+    title: "ISS-NextGen Test Report",
+    filename: `iss_nextgen_ortoni_report_${formatDateForFilename(new Date())}.html`,
     showProject: false,
-  projectName: "ISS-Nextgen-Playwright-Report",
-  testType: `E2E- Environment: ${process.env.NODE_ENV} `,
+    projectName: "ISS-NextGen-Playwright-Report",
+    testType: `E2E- Environment: ${process.env.PLAYWRIGHT_ENV} `,
     preferredTheme: "light",
     base64Image: true,
-};
+}
 
-export const reportFilePath = path.resolve(__dirname, './../test-results/accessibility-report.html');
-export const jsonReportFilePath = path.resolve(__dirname, './../test-results/accessibility-report.json');
+// Jira Report config
+const jiraReportConfig: JiraReporterConfig = {
+  // Jira Reporter Config
+  isRegressionRun: process.env.IS_REGRESSION === 'true',
+  jiraProjectKey: process.env.JIRA_PROJECT_KEY || '',
+  jiraEpicKey: process.env.JIRA_EPIC_KEY || '',
+  jiraCardNumber: process.env.JIRA_CARD_NUMBER || '',
+  applicationName: 'ISS NextGen',
+  jiraApiUtilConfig: {
+    jiraUrl: process.env.JIRA_SERVER || '',
+    jiraUsername: process.env.JIRA_USERNAME || '',
+    jiraApiKey: process.env.JIRA_API_KEY || '',
+    jiraBoardId: process.env.JIRA_BOARD_ID || ''
+  },
+  jiraCreationPermissions: {
+    isCreateTestSubtasks: process.env.IS_REGRESSION !== 'true',
+    isCreateBugs: process.env.IS_REGRESSION !== 'true'
+  },
+  // Wrapped ortoni config
+  ...ortoniReportConfig
+};
 
 export default defineConfig({
   testDir: './tests',
@@ -53,12 +68,16 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 4 : 5,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [
-    ['ortoni-report', reportConfig],
+  reporter: process.env.CI? [
+    ['junit'],
+    ['playwright-jira-reporter', jiraReportConfig],
+    ['ortoni-report', ortoniReportConfig]
+  ]: [
+    ['ortoni-report', ortoniReportConfig],
     ['junit'],
     ['list']
   ],
-  timeout: 120_000,
+  timeout: 240_000,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -68,8 +87,8 @@ export default defineConfig({
     trace: 'on-first-retry',
     headless: process.env.CI ? true : false,
     screenshot: "only-on-failure",
-    actionTimeout: 5_000,
-    navigationTimeout: 20_000
+    actionTimeout: 60_000,
+    navigationTimeout: 60_000
   },
 
     /* Configure projects for major browsers */
@@ -78,42 +97,5 @@ export default defineConfig({
             name: 'chromium',
             use: { ...devices['Desktop Chrome'] },
         },
-
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
     ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });