Posted inAI

Kiểm thử giao diện bằng AI: Phát hiện lỗi UI Regression với Playwright và Claude 3.5 Sonnet

AI tutorial - IT technology blog
AI tutorial - IT technology blog

Vượt xa phương pháp so sánh Pixel truyền thống

Tôi đã từng mất cả buổi chiều để truy tìm các lỗi CSS regression mà các bài kiểm thử unit truyền thống không thể phát hiện được. Hầu hết các đội ngũ hiện nay đều dựa vào việc kiểm thử snapshot từng pixel, nhưng những công cụ này thường nhạy cảm một cách khó chịu.

Chỉ cần lệch 1 pixel hoặc một thay đổi nhỏ về khử răng cưa (anti-aliasing) giữa macOS và Linux cũng có thể làm hỏng bản build và gây ra cảnh báo giả. Các mô hình Vision LLM, đặc biệt là Claude 3.5 Sonnet, thay đổi hoàn toàn cách tiếp cận này. Thay vì so sánh các pixel thô, giờ đây chúng ta yêu cầu AI diễn giải giao diện dưới góc nhìn của con người.

Làm chủ kỹ thuật này là một bước tiến lớn cho bất kỳ ai muốn chuyển từ tự động hóa cơ bản sang đảm bảo chất lượng thông minh (intelligent QA). Bằng cách kết hợp khả năng điều khiển trình duyệt của Playwright với tư duy thị giác của Claude, chúng ta có thể xác định văn bản bị chồng chéo, lỗi truy cập (accessibility) và bố cục bị vỡ. Đây là những loại nợ kỹ thuật về mặt thị giác mà các kịch bản thông thường thường bỏ qua.

Bắt đầu nhanh: Chạy một đợt kiểm tra UI bằng AI

Để thực hiện theo, bạn sẽ cần môi trường Node.js, API key của Anthropic và Playwright. Thiết lập này sẽ chụp ảnh màn hình độ phân giải cao của ứng dụng và gửi cho Claude để phân tích cấu trúc.

1. Khởi tạo dự án

mkdir visual-ai-tester
cd visual-ai-tester
npm init -y
npm i playwright @anthropic-ai/sdk dotenv

2. Tạo tập lệnh phát hiện lỗi

Tạo một tệp có tên audit.js. Tập lệnh này xử lý logic trình duyệt, tạo bộ đệm hình ảnh (image buffer) và yêu cầu AI phân tích theo cấu trúc.

const { chromium } = require('playwright');
const Anthropic = require('@anthropic-ai/sdk');
require('dotenv').config();

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

async function runVisualAudit(url) {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.setViewportSize({ width: 1280, height: 800 });
    await page.goto(url, { waitUntil: 'networkidle' });
    
    const screenshot = await page.screenshot({ fullPage: false });
    const base64Image = screenshot.toString('base64');

    const response = await anthropic.messages.create({
        model: "claude-3-5-sonnet-20240620",
        max_tokens: 1024,
        messages: [{
            role: "user",
            content: [
                {
                    type: "image",
                    source: {
                        type: "base64",
                        media_type: "image/png",
                        data: base64Image,
                    },
                },
                {
                    type: "text",
                    text: "Hãy đóng vai một Kỹ sư QA cao cấp. Phân tích ảnh chụp màn hình UI này để tìm các lỗi hiển thị như các phần tử chồng chéo hoặc độ tương phản kém. Trả về một đối tượng JSON với 'has_bugs' (boolean) và 'issues' (mảng)."
                }
            ],
        }],
    });

    console.log(response.content[0].text);
    await browser.close();
}

runVisualAudit('https://your-staging-site.com');

Tại sao lại chọn Claude 3.5 Sonnet?

Claude 3.5 Sonnet nổi bật trong lĩnh vực UI nhờ khả năng nhận thức không gian vượt trội. Trong khi các mô hình khác có thể nhận ra một nút bấm đang tồn tại, Claude hiểu được mối quan hệ giữa các phần tử. Nếu nút ‘Gửi’ chỉ cách trường nhập liệu 2 pixel, Claude sẽ xác định đó là bố cục bị ‘chật chội’. Một công cụ so sánh pixel chỉ gắn cờ lỗi này nếu nó khác biệt so với ảnh gốc (baseline).

Chiến lược viết Prompt hiệu quả nhất

Bí quyết thực sự để có kết quả đáng tin cậy nằm ở cách bạn đặt câu hỏi. Việc hỏi chung chung “Có lỗi không?” sẽ dẫn đến những câu trả lời mơ hồ. Thay vào đó, tôi sử dụng một system prompt chi tiết buộc mô hình phải đánh giá các danh mục thiết kế cụ thể:

  • Phân cấp thị giác: Các hành động chính có nổi bật hơn các hành động phụ không?
  • Căn lề: Các phần tử có tuân theo hệ thống lưới (grid system) dự kiến không?
  • Độ tương phản màu sắc: Văn bản có đáp ứng tiêu chuẩn WCAG về khả năng đọc không?
  • Tính toàn vẹn của tài nguyên: Có biểu tượng hình ảnh bị hỏng hoặc khung trống (placeholder) không?

Quản lý trang dài và độ phân giải

Các mô hình thị giác có giới hạn độ phân giải và chi phí token nhất định. Gửi một ảnh chụp màn hình dọc dài 12.000 pixel có thể dẫn đến mất chi tiết hoặc lỗi yêu cầu. Để giải quyết vấn đề này, tôi chia trang thành các phần logic. Việc nhắm mục tiêu vào các selector cụ thể như <nav> hoặc .dashboard-grid giúp AI tập trung hơn và giảm chi phí.

Tích hợp CI/CD với GitHub Actions

Tự động hóa các kiểm tra này đảm bảo không có lỗi UI regression nào đến tay người dùng. Bạn có thể thiết lập workflow để kích hoạt kiểm tra AI mỗi khi lập trình viên mở một pull request.

Ví dụ cấu hình Workflow

Tạo tệp .github/workflows/visual-qa.yml để đóng vai trò như một “người gác cổng” tự động:

name: Visual Bug Detection
on: [push]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm install
      - run: npx playwright install --with-deps chromium
      - name: Run AI Audit
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          node audit.js > result.json
          if grep -q '"has_bugs": true' result.json; then
            echo "Phát hiện lỗi hiển thị! Hãy kiểm tra log."
            exit 1
          fi

Quy trình này tiết kiệm đáng kể thời gian đánh giá thủ công. Thay vì con người phải kiểm tra từng link staging, AI sẽ thực hiện lượt quét đầu tiên. Nếu Claude phát hiện vấn đề, bản build sẽ thất bại ngay lập tức, thông báo cho lập trình viên trước khi mã nguồn được đưa lên production.

Mẹo thực tế cho môi trường Production

Chuyển từ một thử nghiệm cục bộ sang một công cụ cấp độ production đòi hỏi sự tối ưu hóa. Dưới đây là ba bài học tôi đã rút ra khi triển khai việc này trong các quy trình của doanh nghiệp:

1. Kiểm soát chi phí

Claude 3.5 Sonnet hoạt động hiệu quả, nhưng việc chạy nó trên mọi commit có thể tốn kém. Với mức giá khoảng 0,03 đến 0,05 USD cho mỗi lần kiểm tra, chi phí có thể tăng vọt ở các đội ngũ có tốc độ phát triển nhanh. Tôi khuyên bạn nên chỉ kích hoạt các đợt kiểm tra này trên các Pull Request hoặc khi có thay đổi trong các thư mục CSS và component cụ thể.

2. Xử lý dữ liệu động

Nội dung động như video nền hoặc carousel xoay vòng có thể làm AI bối rối. Để tránh các cảnh báo giả, hãy sử dụng locator.evaluate() của Playwright để ẩn các phần tử này trước khi chụp ảnh. Thay thế một video đang chuyển động bằng một hộp xám tĩnh giúp AI chỉ tập trung vào sự ổn định của bố cục.

3. Chiến lược kết hợp con người (Human-in-the-loop)

AI thỉnh thoảng có thể bị ảo giác hoặc quá khắt khe. Tôi không bao giờ để AI chặn một bản phát hành mà không có sự xem xét của con người. Cách tiếp cận tốt nhất là để tập lệnh đăng kết quả của AI dưới dạng bình luận trên GitHub PR. Điều này cho phép lập trình viên xác minh lỗi hoặc bỏ qua cảnh báo giả chỉ bằng một cú nhấp chuột.

Tích hợp Vision LLM vào bộ công cụ kiểm thử không chỉ là một xu hướng; đó là một cách thiết thực để phát hiện những lỗi tinh vi mà cả mắt thường và các tập lệnh truyền thống thường bỏ sót. Bằng cách chi vài xu cho mỗi bài kiểm tra, bạn có thể ngăn chặn các lỗi regression vốn có thể gây thiệt hại hàng ngàn đô la do mất tỷ lệ chuyển đổi.

Share:
Tags: