test: [OCISDEV-417] add a11y playwright tests

Setup new Playwright a11y tests and add a11y reporter.

Author: LukasHirt

.drone.star

@@ -571,6 +571,7 @@ def e2eTestsOnPlaywright(ctx):
     environment = {
         "BASE_URL_OCIS": "ocis:9200",
         "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
+        "TESTS_RUNNER": "playwright",
     }
 
     steps += restoreBuildArtifactCache(ctx, "pnpm", ".pnpm-store") + \

package.json

@@ -57,6 +57,7 @@
     "@vue/compiler-dom": "3.5.22",
     "@vue/compiler-sfc": "3.5.22",
     "@vue/test-utils": "2.4.6",
+    "axe-core": "^4.11.0",
     "browserslist-to-esbuild": "^2.1.1",
     "browserslist-useragent-regexp": "^4.1.3",
     "commander": "14.0.2",

pnpm-lock.yaml

@@ -1,4 +1,9 @@
-import { defineConfig, devices } from '@playwright/test'
+import path from 'node:path'
+import { defineConfig, devices, ReporterDescription } from '@playwright/test'
+import { config } from '../e2e/config'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+const reportsDir = path.resolve(__dirname, '../../', config.reportDir)
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -20,7 +25,12 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
 
   // Reporter to use
-  reporter: 'html',
+  reporter: [
+    (process.env.CI && ['dot']) as ReporterDescription,
+    (!process.env.CI && ['list']) as ReporterDescription,
+    ['./reporters/a11y.ts', { outputFile: path.join(reportsDir, 'a11y-report.json') }]
+  ].filter(Boolean) as ReporterDescription[],
+  outputDir: reportsDir,
 
   use: {
     ignoreHTTPSErrors: true,

tests/e2e-playwright/playwright.config.ts

@@ -0,0 +1,125 @@
+import type {
+  Reporter,
+  FullConfig,
+  Suite,
+  TestCase,
+  TestResult,
+  FullResult
+} from '@playwright/test/reporter'
+import { AxeResults } from 'axe-core'
+import * as fs from 'fs/promises'
+import * as path from 'path'
+
+interface A11yTestResult {
+  test: string
+  file: string
+  line: number
+  status: string
+  duration: number
+  url?: string
+  violations: AxeResults['violations']
+  violationCount: number
+  passCount: number
+  incompleteCount: number
+}
+
+interface A11yReport {
+  summary: {
+    totalTests: number
+    totalViolations: number
+    totalPasses: number
+    totalIncomplete: number
+    timestamp: string
+    duration: number
+  }
+  tests: A11yTestResult[]
+}
+
+class A11yReporter implements Reporter {
+  private results: A11yTestResult[] = []
+  private outputFile: string
+  private startTime: number = 0
+
+  constructor(options: { outputFile?: string } = {}) {
+    this.outputFile = options.outputFile || 'a11y-report.json'
+  }
+
+  onBegin(_config: FullConfig, _suite: Suite): void {
+    this.startTime = Date.now()
+  }
+
+  onTestEnd(test: TestCase, result: TestResult): void {
+    result.attachments.forEach((attachment) => {
+      if (attachment.name !== 'accessibility-scan') {
+        return
+      }
+
+      try {
+        let axeResults: AxeResults
+
+        if (attachment.body) {
+          axeResults = JSON.parse(attachment.body.toString('utf-8'))
+        } else if (attachment.path) {
+          const content = require('fs').readFileSync(attachment.path, 'utf-8')
+          axeResults = JSON.parse(content)
+        } else {
+          throw new Error('No accessibility scan attachment found')
+        }
+
+        this.results.push({
+          test: test.title,
+          file: path.relative(process.cwd(), test.location.file),
+          line: test.location.line,
+          status: result.status,
+          duration: result.duration,
+          url: axeResults.url,
+          violations: axeResults.violations || [],
+          violationCount: axeResults.violations?.length || 0,
+          passCount: axeResults.passes?.length || 0,
+          incompleteCount: axeResults.incomplete?.length || 0
+        })
+      } catch (error) {
+        console.error(`Error parsing accessibility results for test "${test.title}":`, error)
+      }
+    })
+  }
+
+  async onEnd(_result: FullResult): Promise<void> {
+    const duration = Date.now() - this.startTime
+    const totalViolations = this.results.reduce((sum, test) => sum + test.violationCount, 0)
+
+    const report: A11yReport = {
+      summary: {
+        totalTests: this.results.length,
+        totalViolations,
+        totalPasses: this.results.reduce((sum, test) => sum + test.passCount, 0),
+        totalIncomplete: this.results.reduce((sum, test) => sum + test.incompleteCount, 0),
+        timestamp: new Date().toISOString(),
+        duration
+      },
+      tests: this.results
+    }
+
+    try {
+      const outputDir = path.dirname(this.outputFile)
+      await fs.mkdir(outputDir, { recursive: true })
+
+      await fs.writeFile(this.outputFile, JSON.stringify(report, null, 2), 'utf-8')
+
+      console.info(`\n📊 Accessibility Report Generated:`)
+      console.info(`   File: ${this.outputFile}`)
+      console.info(`   Tests: ${report.summary.totalTests}`)
+      console.warn(`   Violations: ${report.summary.totalViolations}`)
+
+      if (totalViolations > 0) {
+        console.warn(`\n⚠️  Found ${totalViolations} accessibility violations`)
+      } else {
+        console.info(`\n✅ No accessibility violations found`)
+      }
+    } catch (error) {
+      console.error('Error writing accessibility report:', error)
+    }
+  }
+}
+
+export default A11yReporter

tests/e2e-playwright/reporters/a11y.ts

@@ -20,6 +20,20 @@ export async function userHasBeenCreated({
   }
 }
 
+export async function deleteUser({
+  usersEnvironment,
+  stepUser,
+  targetUser
+}: {
+  usersEnvironment: UsersEnvironment
+  stepUser: string
+  targetUser: string
+}): Promise<void> {
+  const admin = usersEnvironment.getUser({ key: stepUser })
+  const user = usersEnvironment.getUser({ key: targetUser })
+  await api.provision.deleteUser({ user, admin })
+}
+
 export async function userHasCreatedFolder({
   usersEnvironment,
   stepUser,
@@ -33,6 +47,23 @@ export async function userHasCreatedFolder({
   await api.dav.createFolderInsidePersonalSpace({ user, folder: folderName })
 }
 
+export async function userHasCreatedFile({
+  usersEnvironment,
+  stepUser,
+  filename
+}: {
+  usersEnvironment: UsersEnvironment
+  stepUser: string
+  filename: string
+}): Promise<void> {
+  const user = usersEnvironment.getUser({ key: stepUser })
+  await api.dav.uploadFileInPersonalSpace({
+    user,
+    pathToFile: filename,
+    content: 'This is a test file'
+  })
+}
+
 export async function userHasSharedResource({
   usersEnvironment,
   stepUser,

tests/e2e-playwright/steps/api/api.ts

@@ -2,3 +2,4 @@ export * from './public'
 export * from './shares'
 export * from './resources'
 export * from './session'
+export * from './spaces'

tests/e2e-playwright/steps/ui/index.ts

@@ -1,5 +1,6 @@
 import { objects } from '../../../e2e/support'
 import { ActorsEnvironment, LinksEnvironment } from '../../../e2e/support/environment'
+import { substitute } from '../../../e2e/support/utils'
 
 export async function openPublicLink({
   actorsEnvironment,
@@ -21,3 +22,19 @@ export async function openPublicLink({
   const pageObject = new objects.applicationFiles.page.Public({ page })
   await pageObject.open({ url })
 }
+
+export async function createPublicLink({
+  actorsEnvironment,
+  stepUser,
+  resource,
+  password
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: string
+  resource: string
+  password: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const publicObject = new objects.applicationFiles.Link({ page })
+  await publicObject.create({ resource, password: substitute(password) })
+}

tests/e2e-playwright/steps/ui/public.ts

@@ -21,6 +21,7 @@ export async function uploadResource({
   const { page } = actorsEnvironment.getActor({ key: stepUser })
   const resourceObject = new objects.applicationFiles.Resource({ page })
   await resourceObject.upload({
+    returnToOriginalPage: false,
     to: to,
     resources: [filesEnvironment.getFile({ name: resource })],
     option: option,
@@ -42,3 +43,20 @@ export async function isAbleToEditFileOrFolder({
   const userCanEdit = await resourceObject.canManageResource({ resource })
   return userCanEdit
 }
+
+export async function createDir({
+  actorsEnvironment,
+  stepUser,
+  directoryName
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: string
+  directoryName: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const resourceObject = new objects.applicationFiles.Resource({ page })
+  await resourceObject.create({
+    name: directoryName,
+    type: 'folder'
+  })
+}

tests/e2e-playwright/steps/ui/resources.ts

@@ -112,3 +112,35 @@ export async function updateShareeRole({
     })
   }
 }
+
+export async function shareResource({
+  actorsEnvironment,
+  usersEnvironment,
+  stepUser,
+  resource,
+  resourceType,
+  recipient
+}: {
+  actorsEnvironment: ActorsEnvironment
+  usersEnvironment: UsersEnvironment
+  stepUser: string
+  resource: string
+  resourceType: ResourceType
+  recipient: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const shareObject = new objects.applicationFiles.Share({ page })
+  const roleId = await getDynamicRoleIdByName(
+    usersEnvironment.getUser({ key: stepUser }),
+    'Can view',
+    resourceType
+  )
+
+  await shareObject.create({
+    resource,
+    recipients: [
+      { collaborator: usersEnvironment.getUser({ key: recipient }), role: roleId, type: 'user' }
+    ],
+    via: 'QUICK_ACTION'
+  })
+}