Human Capital Management - Frontend checklist in CI/CD

📘 Tài liệu hướng dẫn:

🧪 Tự động kiểm tra id & automation-readiness khi CI/CD

---

🎯 Mục tiêu

• Kiểm tra toàn bộ giao diện đã có đầy đủ ID theo quy chuẩn (tránh miss khi release).
• Ngăn chặn selector yếu (class động, nth-child) được đưa vào production.
• Tích hợp kiểm tra vào CI/CD pipeline để đảm bảo “Automation Test Ready” trước khi merge.

---

🧱 1. Kiến trúc kiểm tra

CI/CD Pipeline
   └──> Build FE App (Vite, Webpack, etc)
         └──> Spin up local server
               └──> Run Automation Readiness Check Script (headless browser)
                       ├── Load page(s) hoặc layout
                       ├── Crawl DOM
                       ├── Kiểm tra: thiếu ID, naming sai, class nguy hiểm
                       └──> Fail nếu có vi phạm

---

🛠 2. Công cụ sử dụng

• Playwright (hoặc Puppeteer): Dùng để load UI, thao tác DOM
• Node.js script: Crawl DOM, kiểm tra logic ID và selector
• Jest hoặc ESLint Custom Rule (nếu muốn build sâu hơn)
• CI runner (GitLab CI, GitHub Actions, Jenkins, CircleCI…)

---

📋 3. Sample checklist được tự động hoá

Kiểm tra	Tự động được không?	Ghi chú
[✔] Tất cả component có ID	✅	Có thể check DOM nodes
[✔] ID đúng naming theo logic nghiệp vụ	✅	So sánh regex & prefix
[✔] Modal/Dialog có ID	✅	Tìm node .modal hoặc role=dialog
[✔] Table/Row có ID	✅	Duyệt qua table > tr
[✔] Không dùng class động .css-*	✅	Regex check toàn bộ className
[✔] Không dùng nth-child selector	✅ (ESLint hoặc snapshot check)
[✔] Alert có ID	✅	Duyệt div.alert hoặc role=alert
[✖] Dropdown hoạt động	⚠️	Cần test hành vi thực tế, nên giữ manual
[✖] Trạng thái phản ánh đúng logic	⚠️	Check bằng Playwright test manual hoặc logic QA

---

📦 4. Sample Script (Node.js + Playwright)

automation-readiness-check.js

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  const FAILS = [];

  await page.goto('http://localhost:3000');

  const elements = await page.$$('body *');

  for (const el of elements) {
    const tag = await el.evaluate(el => el.tagName.toLowerCase());
    const id = await el.getAttribute('id');
    const className = await el.getAttribute('class');

    // Check ID presence for key tags
    if (['button', 'input', 'select', 'textarea', 'form', 'table'].includes(tag)) {
      if (!id) {
        FAILS.push(`❌ Missing id on <${tag}>`);
      } else {
        // Naming convention check
        const valid = /^[a-z]+-[a-z0-9]+(-[a-z0-9]+)*$/.test(id);
        if (!valid) {
          FAILS.push(`⚠️ Invalid id format: "${id}"`);
        }
      }
    }

    // Check dangerous class
    if (className && /css-[a-zA-Z0-9]{4,}/.test(className)) {
      FAILS.push(`⚠️ Suspicious className: "${className}"`);
    }
  }

  if (FAILS.length > 0) {
    console.log(`\n--- Automation Readiness Issues ---`);
    FAILS.forEach(f => console.log(f));
    console.log(`\nTotal Issues: ${FAILS.length}`);
    process.exit(1); // ❌ Fail CI
  } else {
    console.log('✅ UI passed automation readiness checks.');
    process.exit(0);
  }

  await browser.close();
})();

---

🔧 5. Tích hợp vào CI/CD

Với GitHub Actions:

name: Automation Readiness

on: [pull_request]

jobs:
  readiness-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install deps
        run: npm ci
      - name: Build app
        run: npm run build && npm run preview & npx wait-on http://localhost:3000
      - name: Run automation check
        run: node automation-readiness-check.js

Với GitLab CI:

automation_check:
  stage: test
  script:
    - npm ci
    - npm run build
    - npm run preview & npx wait-on http://localhost:3000
    - node automation-readiness-check.js

---

✅ Kết luận

Tích hợp Automation Readiness Check vào CI giúp frontend team:

• Chủ động phát hiện vấn đề ảnh hưởng automation test
• Không phụ thuộc hoàn toàn vào QA/manual testing
• Đảm bảo mọi bản build đều sẵn sàng để kiểm thử tự động