如何通过GitHub Actions实现HTML运行与JS校验的PR自动化检查

实现思路 #

要完成「在GitHub Actions中运行HTML并执行JS校验」的需求，核心是用无头浏览器加载HTML文件，完整执行页面内的JS逻辑后，获取最终页面内容再做校验。以下以Playwright为例（Puppeteer实现逻辑类似），给出具体步骤：

具体实现步骤 #

1. 创建GitHub Actions工作流文件 #

在仓库根目录新建 .github/workflows/html-validation.yml，内容如下：

name: HTML Validation Check
on: [pull_request]

jobs:
  validate-html:
    runs-on: ubuntu-latest
    steps:
      - name: 检出代码
        uses: actions/checkout@v4

      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: 安装Playwright依赖
        run: |
          npm init -y
          npm install playwright
          npx playwright install chromium

      - name: 运行HTML校验脚本
        run: node validate-html.js

2. 编写HTML校验脚本 #

在仓库根目录新建 validate-html.js，该脚本会递归遍历所有HTML文件，用无头浏览器加载执行后完成校验：

const fs = require('fs');
const path = require('path');
const { chromium } = require('playwright');

// 递归获取所有HTML文件路径
function getHtmlFiles(dir) {
  let htmlFiles = [];
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      htmlFiles = htmlFiles.concat(getHtmlFiles(fullPath));
    } else if (file.endsWith('.html')) {
      htmlFiles.push(fullPath);
    }
  }
  return htmlFiles;
}

async function validateHtmlFiles() {
  const browser = await chromium.launch({ headless: true });
  const htmlFiles = getHtmlFiles('.');
  let hasError = false;

  for (const file of htmlFiles) {
    console.log(`正在校验文件: ${file}`);
    const page = await browser.newPage();
    // 加载本地HTML文件
    await page.goto(`file://${path.resolve(file)}`);
    // 获取页面执行JS后的最终HTML内容
    const pageHtml = await page.content();
    // 校验是否存在未被✔️标记的<p>标签
    const match = pageHtml.match(/<p>(?!✔️)/g);
    
    if (match) {
      console.error(`❌ 文件 ${file} 校验失败: 发现 ${match.length} 个未通过验证的段落`);
      hasError = true;
    } else {
      console.log(`✅ 文件 ${file} 校验通过`);
    }
    await page.close();
  }

  await browser.close();
  // 存在错误时以非0码退出，触发GitHub Actions检查失败标记
  process.exit(hasError ? 1 : 0);
}

validateHtmlFiles().catch(err => {
  console.error('校验过程出错:', err);
  process.exit(1);
});

关键说明 #

• 无头浏览器的作用：Playwright的Chromium无头模式会完整模拟真实浏览器行为，加载HTML并执行所有页面内的JS脚本，确保拿到经过页面逻辑修改后的最终HTML内容。
• 校验逻辑：通过正则 /<p>(?!✔️)/ 检查是否存在未被验证标记的段落，一旦发现就标记错误，脚本以非0退出码结束后，GitHub Actions会自动将PR检查标记为失败。
• 批量处理：getHtmlFiles 函数会递归遍历仓库所有目录，确保所有HTML文件都被校验。

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