如何在现有Azure DevOps流水线中集成axe-playwright网页可访问性测试

操作步骤 #

1. 准备测试代码 #

将你提供的可访问性测试代码保存到项目测试目录（如tests/a11y.test.ts），补充收尾逻辑并指定报告输出路径，方便后续查看：

import { chromium, Browser, Page } from 'playwright'
import { test } from '@playwright/test';
import { injectAxe, checkA11y } from 'axe-playwright'

let browser: Browser
let page: Page

test.describe('Playwright web page accessibility test', () => {
  test.beforeAll(async () => {
    browser = await chromium.launch()
    page = await browser.newPage()
    await page.goto(`http://localhost:4000`)
    await injectAxe(page)
  })

  test('simple accessibility run', async () => {
    await checkA11y(page, null, {
      axeOptions: {
        runOnly: {
          type: 'tag',
          values: ['best-practice'],
        },
      },
      detailedReport: true,
      detailedReportOptions: { 
        html: true,
        outputDir: 'a11y-reports' // 指定报告输出目录
      },
    })
  })

  test.afterAll(async () => {
    await browser.close()
  })
})

2. 更新流水线YAML #

在原有流水线的npm build步骤之后、发布工件步骤之前，插入启动本地服务、执行可访问性测试的环节。如果需要保留测试报告，可额外添加发布报告的任务：

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.16.1'
  displayName: '安装Node.js'

- script: |
    npm install
  displayName: '安装项目依赖'

- script: |
    npm run build
  displayName: '构建项目'

# 启动本地服务（请根据项目实际启动命令调整，如npm run serve）
- script: |
    npm start &
    # 等待服务完全启动，可根据项目启动速度调整等待时长
    sleep 10
  displayName: '启动本地测试服务'

# 执行axe-playwright可访问性测试
- script: |
    npx playwright test tests/a11y.test.ts || exit 1
  displayName: '执行网页可访问性测试'

# 停止本地服务（可选，根据需要添加）
- script: |
    pkill -f "npm start"
  displayName: '停止本地测试服务'

# 发布可访问性测试报告（可选）
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'a11y-reports'
    ArtifactName: 'a11y-reports'
    publishLocation: 'Container'
  displayName: '发布可访问性测试报告'

# 原有的发布工件环节，保留你的原有配置
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'drop'
    ArtifactName: 'drop'
    publishLocation: 'Container'
  displayName: '发布工件'

注意事项 #

• 确保项目package.json中已添加playwright、@playwright/test、axe-playwright作为开发依赖，可通过npm install --save-dev playwright @playwright/test axe-playwright安装后提交到代码仓库。
• 本地服务的启动命令和等待时长需根据项目实际情况调整，确保服务完全启动后再执行测试。
• 若流水线使用的Node.js版本与示例不同，修改NodeTool@0任务中的versionSpec即可。

内容的提问来源于stack exchange，提问作者Abhishek Konnur