Blog

Hướng Dẫn Sử Dụng Claude Code Tự Động Hóa Trình Duyệt

Ashley Innocent

Ashley Innocent

22 tháng 1 2026

Hướng Dẫn Sử Dụng Claude Code Tự Động Hóa Trình Duyệt

Tự động hóa trình duyệt theo truyền thống yêu cầu viết các tập lệnh phức tạp, quản lý bộ chọn và xử lý các trạng thái trang không thể đoán trước. Claude Code biến đổi quy trình này bằng cách cho phép bạn mô tả những gì bạn muốn bằng ngôn ngữ tự nhiên và để AI dịch nó thành các hành động trình duyệt chính xác.

Điều gì làm cho tự động hóa trình duyệt của Claude Code trở nên mạnh mẽ:

💡
Đang kiểm thử API cùng với các quy trình trình duyệt? Apidog bổ sung cho tính năng tự động hóa trình duyệt của Claude Code bằng cách cung cấp kiểm thử API trực quan và máy chủ mock. Khi các kiểm thử trình duyệt của bạn kích hoạt các lệnh gọi API, Apidog giúp bạn xác thực toàn bộ chu trình yêu cầu-phản hồi. Dùng thử Apidog miễn phí để xây dựng các quy trình kiểm thử đầu cuối toàn diện.

nút

Hướng dẫn này bao gồm mọi thứ từ thiết lập cơ bản đến các mẫu tự động hóa nâng cao bằng cách sử dụng máy chủ MCP (Giao thức ngữ cảnh mô hình).

Tìm hiểu các tùy chọn tự động hóa trình duyệt

Claude Code cung cấp nhiều cách tiếp cận để tự động hóa trình duyệt, mỗi cách phù hợp với các trường hợp sử dụng khác nhau.

Tùy chọn 1: Playwright MCP (Được khuyến nghị)

Playwright MCP của Microsoft là cách tiếp cận được khuyến nghị để tự động hóa trình duyệt với Claude Code. Nó cung cấp:

Tùy chọn 2: Puppeteer MCP (Cộng đồng)

Mặc dù gói Puppeteer MCP chính thức đã bị loại bỏ, vẫn có các lựa chọn thay thế do cộng đồng duy trì:

Tùy chọn 3: API sử dụng máy tính của Claude

Để kiểm soát máy tính để bàn hoàn toàn, không chỉ riêng trình duyệt:

Bảng so sánh

Tính năngPlaywright MCPPuppeteer MCPAPI sử dụng máy tính
Hỗ trợ trình duyệtChromium, Firefox, WebKitChỉ ChromiumBất kỳ trình duyệt nào
Duy trì bởiMicrosoft (chính thức)Cộng đồngAnthropic
Nhắm mục tiêu phần tửCây truy cập (Accessibility tree)Bộ chọn CSSTrực quan/tọa độ
Chế độ không giao diệnCóCóKhông (cần màn hình)
Tốt nhất choKiểm thử web, cào dữ liệuCác dự án cũTự động hóa máy tính để bàn

Thiết lập Playwright MCP

Playwright MCP là cách được khuyến nghị để thêm tự động hóa trình duyệt vào Claude Code. Dưới đây là cách thiết lập.

Điều kiện tiên quyết

Bước 1: Cấu hình máy chủ MCP

Thêm Playwright MCP vào cấu hình Claude Code của bạn. Tạo hoặc chỉnh sửa .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Bước 2: Xác minh cài đặt

Khởi động Claude Code và xác minh máy chủ MCP đang chạy:

claude

Bạn sẽ thấy Playwright MCP được liệt kê trong các công cụ có sẵn. Kiểm tra bằng một lệnh đơn giản:

Navigate to https://example.com and tell me the page title

Bước 3: Cấu hình tùy chọn trình duyệt

Để kiểm soát tốt hơn, hãy tùy chỉnh cài đặt máy chủ MCP:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Các tùy chọn có sẵn:

Bước 4: Chạy trong CI/CD

Đối với các pipeline tự động, hãy sử dụng chế độ không giao diện (headless mode):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

Thay thế: Puppeteer MCP

Nếu bạn thích Puppeteer hoặc có các quy trình làm việc dựa trên Puppeteer hiện có, bạn có thể sử dụng các máy chủ MCP do cộng đồng duy trì.

Cài đặt

Sử dụng máy chủ Puppeteer MCP của cộng đồng:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

Thay thế: puppeteer-mcp-claude

Một tùy chọn khác của cộng đồng với khả năng tự động hóa trình duyệt toàn diện:

# Sao chép kho lưu trữ
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

Cấu hình trong .claude/settings.json:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Điểm khác biệt chính so với Playwright

Khía cạnhPlaywright MCPPuppeteer MCP
Thiết lậpnpx (không cần cài đặt)Có thể yêu cầu cài đặt npm
Trình duyệtNhiềuChrome/Chromium
Chiến lược bộ chọnCây truy cập (Accessibility tree)CSS/XPath
Duy trì bởiMicrosoftCộng đồng

Các lệnh tự động hóa trình duyệt cơ bản

Sau khi máy chủ MCP của bạn được cấu hình, bạn có thể điều khiển trình duyệt bằng ngôn ngữ tự nhiên.

Điều hướng

Navigate to https://github.com

Go to the login page on github.com

Open https://docs.example.com/api in a new tab

Tương tác với các phần tử

Click the "Sign In" button

Type "my-username" in the email field

Select "United States" from the country dropdown

Check the "Remember me" checkbox

Đọc nội dung trang

Get the text content of the main heading

List all links on the current page

Extract the product prices from this page

Chụp ảnh màn hình

Take a screenshot of the current page

Capture a screenshot of just the navigation menu

Chờ đợi và định thời

Wait for the loading spinner to disappear

Wait 3 seconds then click the submit button

Wait until the "Success" message appears

Xử lý biểu mẫu

Fill out the contact form:
- Name: John Doe
- Email: john@example.com
- Message: Testing automation
Then submit the form

Tương tác phức tạp

Scroll down to the footer and click the "Privacy Policy" link

Hover over the "Products" menu and click "Enterprise"

Drag the slider to the 75% position

Các mẫu tự động hóa nâng cao

Mẫu 1: Quy trình làm việc đa bước

Tạo các chuỗi tự động hóa phức tạp:

Automate the following checkout flow:
1. Navigate to https://shop.example.com
2. Search for "wireless headphones"
3. Click on the first product result
4. Select size "Medium" if available
5. Click "Add to Cart"
6. Go to cart and verify the item is there
7. Take a screenshot of the cart

Mẫu 2: Trích xuất dữ liệu

Trích xuất dữ liệu có cấu trúc từ các trang web:

Go to https://news.ycombinator.com and extract the top 10 stories with:
- Title
- URL
- Points
- Number of comments
- Posted time ago

Format as JSON

Mẫu 3: Quy trình xác thực

Xử lý các chuỗi đăng nhập:

Log into the application:
1. Navigate to https://app.example.com/login
2. Enter username: test@example.com
3. Enter password from environment variable LOGIN_PASSWORD
4. Click Sign In
5. Wait for dashboard to load
6. Verify login succeeded by checking for "Welcome" text

Mẫu 4: Kiểm thử hồi quy trực quan

So sánh trạng thái trang:

1. Navigate to https://staging.example.com
2. Take a full-page screenshot named "staging-homepage"
3. Navigate to https://production.example.com
4. Take a full-page screenshot named "production-homepage"
5. Compare the two screenshots and report any differences

Mẫu 5: Giám sát và cảnh báo

Tạo các quy trình làm việc giám sát:

Check if the service is healthy:
1. Navigate to https://status.example.com
2. Look for "All Systems Operational" text
3. If not found, extract the current status message
4. Take a screenshot for documentation
5. Report the findings

Mẫu 6: Kiểm thử E2E với xác thực API

Kết hợp kiểm thử trình duyệt và API:

Test the user registration flow:
1. Navigate to https://app.example.com/register
2. Fill in registration form with test data
3. Submit the form
4. Wait for confirmation page
5. Verify the user was created by checking the API response
6. Take a screenshot of the success page

Khi kiểm thử các luồng liên quan đến API, hãy sử dụng Apidog để xác thực các phản hồi từ backend. Bạn có thể xác minh rằng các hành động trình duyệt của bạn kích hoạt các lệnh gọi API chính xác và nhận được các phản hồi mong muốn.

Các trường hợp sử dụng thực tế

Trường hợp sử dụng 1: Ảnh chụp màn hình đánh giá mã tự động

Chụp tài liệu trực quan cho các đánh giá mã:

For the PR review, capture screenshots of:
1. The login page before changes
2. The login page after changes
3. The error state when invalid credentials are entered
4. The success redirect after valid login

Save all screenshots to ./review-screenshots/

Trường hợp sử dụng 2: Phân tích đối thủ cạnh tranh

Giám sát các trang web của đối thủ cạnh tranh:

Analyze competitor pricing:
1. Navigate to https://competitor.com/pricing
2. Extract all plan names and prices
3. Take a screenshot of the pricing page
4. Compare with our current pricing data
5. Generate a summary report

Trường hợp sử dụng 3: Kiểm thử biểu mẫu tự động

Kiểm thử xác thực biểu mẫu trong nhiều trường hợp khác nhau:

Test the contact form validation:

Test 1: Empty submission
- Submit empty form
- Verify all required field errors appear
- Screenshot: empty-form-errors.png

Test 2: Invalid email
- Enter "John" in name
- Enter "invalid-email" in email
- Submit
- Verify email validation error
- Screenshot: invalid-email-error.png

Test 3: Valid submission
- Fill all fields correctly
- Submit
- Verify success message
- Screenshot: form-success.png

Trường hợp sử dụng 4: Kiểm tra SEO

Tự động hóa các kiểm tra SEO:

Perform SEO audit on https://mysite.com:
1. Check page title length (should be 50-60 characters)
2. Check meta description exists and length
3. Verify H1 tag exists and is unique
4. Check all images have alt text
5. Verify canonical URL is set
6. Check for broken links on the page
7. Generate audit report

Trường hợp sử dụng 5: Kiểm thử khả năng truy cập

Tự động hóa các kiểm tra khả năng truy cập:

Run accessibility audit on https://app.example.com:
1. Navigate to the homepage
2. Check color contrast ratios
3. Verify all interactive elements are keyboard accessible
4. Check ARIA labels are present
5. Verify focus indicators are visible
6. Test with screen reader simulation
7. Generate accessibility report

Trường hợp sử dụng 6: Giám sát hiệu suất

Theo dõi hiệu suất tải trang:

Monitor page load performance:
1. Clear browser cache
2. Navigate to https://app.example.com
3. Record time to first contentful paint
4. Record time to interactive
5. Capture network waterfall
6. Take screenshot when fully loaded
7. Compare with baseline metrics

Tích hợp với các Pipeline CI/CD

Tích hợp GitHub Actions

Thêm tự động hóa trình duyệt vào pipeline CI của bạn:

# .github/workflows/e2e-tests.yml
name: E2E Browser Tests

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Run Browser Tests
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Run the following browser tests:
            1. Navigate to ${{ env.STAGING_URL }}
            2. Test login flow with test credentials
            3. Verify dashboard loads correctly
            4. Take screenshots of each step
            5. Report any failures
          "

      - name: Upload Screenshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

Tạo một kỹ năng kiểm thử trình duyệt

Tạo một kỹ năng có thể tái sử dụng để kiểm thử trình duyệt:

---
name: browser-test-runner
version: "1.0.0"
description: Runs browser-based E2E tests using Playwright MCP
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Công cụ chạy kiểm thử trình duyệt

Kỹ năng kiểm thử trình duyệt tự động sử dụng Playwright MCP.

## Cách sử dụng

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

API sử dụng máy tính của Claude

Đối với các kịch bản yêu cầu kiểm soát máy tính để bàn hoàn toàn, API sử dụng máy tính của Claude cung cấp các khả năng tự động hóa toàn diện.

Tổng quan

Tính năng Sử dụng Máy tính là một tính năng beta cho phép Claude:

Thiết lập cơ bản

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Open Chrome and navigate to github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Khi nào nên sử dụng Sử dụng Máy tính so với MCP

Kịch bảnCách tiếp cận được đề xuất
Cào dữ liệu webPlaywright MCP
Kiểm thử E2EPlaywright MCP
Tự động hóa ứng dụng máy tính để bànAPI sử dụng máy tính
Quy trình làm việc đa ứng dụngAPI sử dụng máy tính
Pipeline CI/CDPlaywright MCP (không giao diện)
Kiểm thử trực quanCả hai

Thực tiễn tốt nhất khi sử dụng Máy tính

  1. Luôn xác minh các hành động trước khi nhấp
  2. Sử dụng tọa độ cụ thể khi có thể
  3. Thêm độ trễ giữa các hành động nhanh
  4. Triển khai phục hồi lỗi cho các cú nhấp bị bỏ lỡ
  5. Giới hạn phạm vi chỉ trong các quyền cần thiết

Các vấn đề bảo mật

Xử lý xác thực

Nên:

Không nên:

# Sử dụng biến môi trường
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"

Log in using credentials from environment variables
TEST_USERNAME and TEST_PASSWORD

Quyền riêng tư dữ liệu

Nên:

Không nên:

Bảo mật mạng

Nên:

Không nên:

Bảo mật máy chủ MCP

  1. Chạy cục bộ khi có thể
  2. Kiểm tra mã máy chủ MCP trước khi sử dụng
  3. Giới hạn quyền của công cụ ở mức tối thiểu cần thiết
  4. Giám sát nhật ký máy chủ MCP để phát hiện bất thường

Kết luận

Tự động hóa trình duyệt với Claude Code thay đổi cách các nhà phát triển tiếp cận kiểm thử web, cào dữ liệu và tự động hóa. Bằng cách kết hợp các hướng dẫn bằng ngôn ngữ tự nhiên với các máy chủ MCP mạnh mẽ như Playwright, bạn có thể xây dựng các quy trình làm việc tự động hóa phức tạp mà không cần viết các tập lệnh phức tạp.

Để kiểm thử toàn diện, hãy kết hợp tự động hóa trình duyệt của Claude Code với xác thực API. Tải xuống Apidog miễn phí để xây dựng các quy trình kiểm thử hoàn chỉnh bao gồm cả frontend và backend của bạn.

nút

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống