Playwright Pluse 报告

终极Playwright记者——具有历史趋势分析功能的交互式仪表板,CI/CD已准备好的独立的HTML报告,并硬性支持可缩放的测试执行.

现场直播

文档数字 : 脉冲报告

可用的脚本

此工程提供这些工具命令 :

运行 npm run <command>

* 如何运作

1. 记者收藏数字 :

   • 自定义记者在测试执行过程中收集详细结果
   • 通过合并处理硬化 .pulse-shard-results-*.json 文件

2. JSON 输出数字 :

   • 产生全面的 playwright-pulse-report.json

3. 可视化选项数字 :

   • 静态 HTML: 包含所有数据的自成一体的报告文件
   • 电子邮件: 向利益攸关方发送格式报告

QQ 快速启动

1. 安装

npm install @arghajit/playwright-pulse-report@latest --save-dev

2. 配置剧作家

// playwright.config.ts
import { defineConfig } from "@playwright/test";
import * as path from "path";

const PULSE_REPORT_DIR = path.resolve(__dirname, "pulse-report");

export default defineConfig({
  reporter: [
    ["list"],
    [
      "@arghajit/playwright-pulse-report",
      {
        outputDir: PULSE_REPORT_DIR,
      },
    ],
  ],
  // Other configurations...
});

3. 生成报告

运行测试后 :

npx generate-pulse-report  # Generates static HTML
npx send-email            # Sends email report

4. 自定义输出目录(可选)

现在所有的 CLI 脚本都支持自定义输出目录, 给予您在生成报告的地方的充分灵活性 :

# Using custom directory
npx generate-pulse-report --outputDir {YOUR_CUSTOM_REPORT_FOLDER}
npx generate-report -o test-results/e2e
npx send-email --outputDir custom-pulse-reports

# Using nested paths
npx generate-pulse-report --outputDir reports/integration
npx merge-pulse-report --outputDir {YOUR_CUSTOM_REPORT_FOLDER}

重要内容: 保证你 playwright.config.ts 自定义目录匹配 CLI 脚本 :

报告选项

备选案文1:静态的 HTML 报告(附件)

npm run generate-pulse-report
or,
npx generate-pulse-report

• 生成 playwright-pulse-static-report.html
• 自成一体,不需要服务器
• 保存所有仪表板功能

备选案文2: HTML 报告(基于附件)

npm run generate-report
or,
npx generate-report

• 生成剧作家-脉冲-report.html
• 从附件/ 目录中动态装入截图和图像
• 生产更轻的 HTML 文件, 初始负载更快
• 查看报告时需要显示附件/ 目录

备选案文3:电子邮件报告

1. 配置 .env数字 :

   [email protected]
   [email protected]
   # ... up to 5 recipients
   

2. 发送报告 :

   npx send-email
   

注:电子邮件将附带一个轻量级的html文件,可在邮件预览应用程序中打开.

AI 分析

该仪表板包括AI动力测试分析,提供:

• 测试碎片检测
• 业绩瓶颈
• 失败模式识别
• 建议优化

QQ 向邮件发送报告

这个 send-email CLI 覆盖整个电子邮件流 :

• 生成一个轻量级的 HTML 摘要( E)pulse-email-summary.html从最新 playwright-pulse-report.json。 。 。 .
• 构建一个统计表(启动时间、持续时间、总数、通过、失败、跳过、百分比).
• 作为正文和HTML附件发送带有该摘要的电子邮件.

1. 配置收件人

通过环境变量设置最多5个收件人:

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

2. 选择信誉流动

脚本支持获得SMTP证书的两种方式:

A流-基于环境的证书(建议)

通过环境变量提供邮件主机和证书:

PULSE_MAIL_HOST=gmail        # or: outlook
[email protected]
PULSE_MAIL_PASSWORD=your_app_password

• PULSE_MAIL_HOST 支持 gmail 或者说 outlook 只有这个.
• 对于Gmail/Outlook,使用应用程序密码或SMTP启用的证书.

流量 B – 默认流量(回落)

如果以上变量没有设置,脚本会倒置以默认邮件主机的相容性.

3. 运行CLI

使用默认输出目录 :

npx send-email

或指向自定义报告目录( 必须包含) playwright-pulse-report.json:

npx send-email --outputDir <YOUR_CUSTOM_REPORT_FOLDER>

盖下,这个会:

• 解析报告目录(来自 --outputDir 或者说 playwright.config.ts) (中文(简体) ).
• 运行 generate-email-report.mjs 创建 pulse-email-summary.html。 。 。 .
• 使用节点邮件通过所选提供者(Gmail或Outlook)发送邮件.

CI/CD 一体化

基本工作流程

# .github/workflows/playwright.yml
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: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npm run test
    - name: Generate Pulse Report
      run: npx generate-report
    - uses: actions/upload-artifact@v4
      if: always()
      with:
        name: pulse-report
        path: pulse-report/
        retention-days: 30

详细情况请参见 基本CI/CD整合。 。 。 .

困难的工作流程

# .github/workflows/playwright.yml
name: Playwright Tests with Pulse Report
on: [push]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test --shard=${{ matrix.shard }}/${{ strategy.job-total }}
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: pulse-report-shard-${{ matrix.shard }}
          path: pulse-report/
          retention-days: 1

  merge-report:
    needs: test
    if: always()
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm ci

      # Download all shard artifacts to a single directory
      - uses: actions/download-artifact@v4
        with:
          path: all-reports
          pattern: pulse-report-shard-*

      # Merge all shard reports into a single report
      - run: npx merge-pulse-report -o all-reports

      # Generate the final HTML report
      - run: npx generate-pulse-report -o all-reports

      # Upload the final merged report
      - uses: actions/upload-artifact@v4
        with:
          name: final-playwright-pulse-report
          path: all-reports/
          retention-days: 7

详细情况请参见 脉冲报告。 。 。 .

页:1

• npm run generate-report 生成 HTML 报表( 截图/ 图像将实时取自“ attachments/” 目录 ).
• npm run generate-pulse-report 生成一个完全自成一体的静态 HTML 报表( 所有截图和图像都使用 Base64 编码直接嵌入到 HTML 中,它简化了分布,但可能导致文件大小更大和加载时间更长.
• 每个硬体产生自己的剧作家-脉冲-报告. json 内脉-报告/.
• 活体用硬体类型(matrix.config.type)来命名.
• 测试矩阵完成后,报告会被下载,重新命名,并合并.
• 合并-报告是一个自定义的节点.js脚本,将所有JSON文件合并为一个.

🚀 现在升级

npm install @arghajit/playwright-pulse-report@latest

高级配置

处理顺序测试运行

默认情况下, 记者将覆盖 playwright-pulse-report.json 每个新测试运行时的文件。 这通常是我们想要的。 但是,如果我们在同一个岗位上连续进行测试, 像这样:

npx playwright test test1.spec.ts && npx playwright test test2.spec.ts

默认情况下,在上述情况下,从测试1得到的报告会丢失. 要解决这个问题,可以使用重置OnEachRun选项.

// playwright.config.ts
import { defineConfig } from "@playwright/test";
import * as path from "path";

// Define where the final report JSON and HTML should go
const PULSE_REPORT_DIR = path.resolve(__dirname, "pulse-report"); // Example: a directory in your project root

export default defineConfig({
  reporter: [
    ["list"],
    [
      "@arghajit/playwright-pulse-report",
      {
        outputDir: PULSE_REPORT_DIR,
        // Add this option
        resetOnEachRun: false, // Default is true
      },
    ],
  ],
  // ...
});

重置 OnEachRun 时如何工作: 假 :

• 首先,它将报告-1.json保存到脉冲报告/脉冲结果目录中,并从中创建了主要剧作家-脉冲报告.json.
• 在第二次运行时,它将报告-2.json保存到同一个目录.
• 然后,它自动地读取了报告-1.json和报告-2.json,将其合并,并用综合结果更新了主要剧作家-脉冲-report.json.

这保证了您的最后报告永远是所有连续测试的完整总结.

实时 Playwright 测试监测和分析

A Next.js 组件 & CLI 用于可视化 Playwright 测试处决的工具. 提供实时的洞察力,历史趋势和失败分析.

关键特性数字 :

• 交互式测试结果可视化
• 历史趋势分析
• 失败模式识别

快速启动数字 :

npx pulse-dashboard
  or,
npm run pulse-dashboard

(运行来自工程根,包含 pulse-report/ 目录)

国家防范机制一揽子计划数字 : 脉冲盘

技术堆栈: Next.js, TypeScript, Tailwind CSS, Playwright (英语)

Playwright Pulse 报告生态系统的一部分

++ 辅助

对于问题或专题请求,请 联系我。 。 。 .

谢谢

特别 感谢 @Suman Vishwakarma (英语),用于持续UAT反馈.