KUNGFU TECH

0
0
Lập trình
Admin Team
Admin Teamtechmely

Khắc phục lỗi JavaScript console với Kiro và máy chủ Playwright MCP

Đăng vào 4 ngày trước

• 8 phút đọc

Chủ đề:

#testing#kiro#playwright

Giới thiệu

Năm 2022, tôi bắt đầu chuyển sang Mastodon trên nền tảng Activity Pub. Trong quá trình tham gia cộng đồng, tôi nhận ra tầm quan trọng của việc đảm bảo khả năng truy cập cho người dùng, nhất là những người sử dụng công nghệ hỗ trợ như màn hình đọc. Tôi đã tìm hiểu và thực hiện việc thêm ALT text cho hình ảnh để cải thiện khả năng truy cập. Hiện tại, tôi đang hoạt động chủ yếu trên PixelFed tại pixey.org/@iolaire, nơi tôi thích đăng tải và xem ảnh từ người khác.

Lý do thực hiện dự án

Dù thích đăng ảnh, nhưng tôi thường lười hoặc không muốn gõ ALT text trên điện thoại. May mắn thay, Altbot từng trả lời bài đăng của tôi bằng các chú thích được tạo bằng AI. Tuy nhiên, sau khi họ thực hiện việc phê duyệt GDPR, tính năng này không còn hoạt động với PixelFed.

Vì vậy, năm nay, tôi bắt đầu một dự án nhỏ để bổ sung ALT text còn thiếu trên tài khoản PixelFed của mình. Tôi đã viết một đoạn mã Flask nhỏ để tạo mô tả hình ảnh sử dụng mô hình llava:7b chạy trên máy chủ Ollama cục bộ. Tôi bắt đầu bằng các yêu cầu từ AI trong các chương trình trò chuyện AI khác nhau và sau đó chuyển sang sử dụng Amazon Q để hoàn thiện.

Khám phá Kiro

Vào ngày 14 tháng 7, Kiro từ Amazon đã phát hành một framework để thực hiện phát triển dựa trên đặc tả. Là một người thích hoàn thành công việc, tôi đã thử Kiro để thực hành một phong cách phát triển có tổ chức và chuyên nghiệp hơn. Đoạn mã Python 2500 dòng của tôi nhanh chóng phát triển, hiện đã vượt quá 200,000 dòng với các tính năng như:

  • Hỗ trợ xử lý đa người dùng
  • Nâng cao xử lý và phục hồi lỗi
  • Tối ưu hóa xử lý hình ảnh
  • Cải thiện tích hợp với mô hình llava:7b
  • Quản lý cơ sở dữ liệu hiệu quả
  • Cải thiện giao diện web
  • Tích hợp ActivityPub
  • Triển khai giám sát và quản lý hệ thống
  • Thêm kiểm thử toàn diện
  • Hỗ trợ ActivityPub đa nền tảng

Danh sách vẫn còn tiếp tục mở rộng.

Vấn đề với CSRF Tokens

Một trong những đặc tả của tôi liên quan đến csrf-security-audit. Tuy nhiên, việc thêm điều này giữa quá trình phát triển không phải là một ý tưởng tốt, mà nên thực hiện gần cuối. Tôi đã bắt đầu thực hiện việc gỡ lỗi thường xuyên bằng cách sử dụng console JavaScript. Tôi đã học được nhiều điều về CSRF tokens và nhận ra rằng việc sao chép lỗi từ console sang chat để gỡ lỗi trở nên rất rắc rối. Các bài kiểm tra Python mà Kiro viết cho tôi không thực sự bắt được các lỗi frontend như sự không khớp của CSRF token.

Vì vậy, tôi đã quyết định yêu cầu Kiro viết các bài kiểm tra bằng Playwright. Bạn có thể bắt đầu giải quyết các lỗi CSRF token với các lệnh như kiểm tra bảng điều khiển quản trị với playwright, sử dụng người dùng quản trị admin/abc134, tìm kiếm lỗi console JavaScript và giải quyết các vấn đề. Đôi khi, để kiểm tra các chuyển hướng trên các trang, thật tuyệt khi cho phép Kiro sử dụng máy chủ Playwright MCP và bước qua quá trình đó.

Cài đặt máy chủ MCP

Việc cài đặt máy chủ MCP khá đơn giản khi nó đã được thiết lập trên hệ thống của bạn. Trong trường hợp của tôi trên Mac Mini M4, tôi đã sử dụng:

json Copy 
{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest" ], "disabled": false, "autoApprove": [ "browser_click", "browser_wait_for", "browser_navigate" ] } } }

Lưu ý rằng một vài bước sẽ được phê duyệt tự động; đối với hầu hết các bước còn lại, tôi thích chạy Playwright ở chế độ không đầu = false và theo dõi bài kiểm tra trong trường hợp tôi cần phản hồi cho Kiro.

Khi chạy các bài kiểm tra qua script, tôi đã học được một số điều và Kiro đã giúp tạo ra một tài liệu hướng dẫn vững chắc (có thể hơi quá vững). Tài liệu hướng dẫn kiểm thử Playwright có tên là playwright-testing-guidelines.md và nằm ở cuối bài viết.

Hướng dẫn kiểm thử Playwright

Yêu cầu bắt buộc

Thời gian chờ (BẮT BUỘC)

bash Copy 
# Luôn luôn thêm tiền tố thời gian chờ (chạy từ tests/playwright/)
timeout 120 npx playwright test --config=0830_17_52_playwright.config.js

Cấu hình Thời gian chờ

javascript Copy 
module.exports = defineConfig({
  timeout: 120000,                    // 120 giây
  expect: { timeout: 30000 },         // 30 giây
  use: {
    headless: false,                  // BẮT BUỘC cho gỡ lỗi
    actionTimeout: 30000,
    navigationTimeout: 60000
  },
  webServer: { timeout: 120000 }
});

Xác thực (BẮT BUỘC)

javascript Copy 
const { ensureLoggedOut } = require('../utils/0830_17_52_auth_utils');

test.describe('Test Suite', () => {
  test.beforeEach(async ({ page }) => {
    await ensureLoggedOut(page);      // Dọn dẹp BẮT BUỘC
  });

  test.afterEach(async ({ page }) => {
    await ensureLoggedOut(page);      // Dọn dẹp BẮT BUỘC
  });
});

Tổ chức tệp

Cấu trúc thư mục

plaintext Copy 
tests/playwright/
├── tests/                           # Tất cả tệp kiểm thử
├── utils/                           # Hàm tiện ích
├── 0830_17_52_playwright.config.js  # Cấu hình
├── 0830_17_52_package.json          # Các phụ thuộc
└── 0830_17_52_README.md             # Tài liệu

Đặt tên tệp (BẮT BUỘC)

Tất cả các tệp PHẢI sử dụng tiền tố thời gian: MMdd_HH_mm_filename.js

Cấu hình Trình duyệt

  • Chế độ không đầu: false (BẮT BUỘC cho gỡ lỗi)
  • Chính: WebKit (Safari)
  • Phụ: Chromium, Firefox

Ví dụ Lệnh

bash Copy 
# Điều hướng đến thư mục đúng trước
cd tests/playwright

# Chạy các bài kiểm tra
timeout 120 npx playwright test --config=0830_17_52_playwright.config.js

# Chế độ gỡ lỗi
timeout 120 npx playwright test --config=0830_17_52_playwright.config.js --debug

# Bài kiểm tra cụ thể
timeout 120 npx playwright test tests/0830_17_52_test_admin.js --timeout=120

Kiểm tra Landing Page (MỚI)

Chạy Kiểm tra Landing Page

bash Copy 
# Điều hướng đến thư mục đúng trước
cd tests/playwright

# Khởi động ứng dụng web trước
python web_app.py & sleep 10

# Chạy kiểm tra khả năng truy cập (BẮT BUỘC tiền tố thời gian chờ)
timeout 120 npx playwright test tests/0905_14_50_test_landing_page_accessibility.js --config=0830_17_52_playwright.config.js

# Chạy kiểm tra UI
timeout 120 npx playwright test tests/0905_14_50_test_landing_page_ui.js --config=0830_17_52_playwright.config.js

# Chế độ gỡ lỗi
timeout 120 npx playwright test tests/0905_14_50_test_landing_page_accessibility.js --config=0830_17_52_playwright.config.js --debug

# Sử dụng script tiện lợi
./0905_14_50_run_landing_page_tests.sh --accessibility
./0905_14_50_run_landing_page_tests.sh --ui

Vấn đề An ninh Quan trọng

Lỗi An ninh Page.evaluate()

Vấn đề: SecurityError: The operation is insecure trong WebKit

Giải pháp: Tránh sử dụng page.evaluate() cho việc dọn dẹp lưu trữ

javascript Copy 
// ĐÚNG - Dọn dẹp an toàn
test.beforeEach(async ({ page }) => {
  await page.context().clearCookies();
});

// SAI - Gây ra SecurityError
test.beforeEach(async ({ page }) => {
  await page.evaluate(() => {
    localStorage.clear();    // SecurityError!
  });
});

Ngăn chặn Thời gian chờ Điều hướng

Vấn đề: Thời gian chờ networkidle với WebSockets

Giải pháp: Sử dụng domcontentloaded

javascript Copy 
// ĐÚNG
await page.goto('/login', { 
  waitUntil: 'domcontentloaded',
  timeout: 30000 
});

// SAI - Thời gian chờ
await page.goto('/login', { 
  waitUntil: 'networkidle'
});

Tiêu chuẩn Chất lượng

  • Tất cả các bài kiểm tra phải luôn thành công
  • Không có lỗi console (WebSocket, CORS, thông báo)
  • Dọn dẹp đúng cách sau mỗi bài kiểm tra
  • Tên bài kiểm tra rõ ràng, mô tả

Hướng dẫn Gỡ lỗi

  1. Xác minh ứng dụng web đang chạy trên http://127.0.0.1:5000
  2. Xác nhận tài khoản quản trị/người dùng tồn tại
  3. Kiểm tra console trình duyệt để phát hiện lỗi
  4. Sử dụng chế độ gỡ lỗi để thực hiện theo từng bước

Các mẹo hiệu suất

  • Sử dụng chế độ không đầu trong quá trình phát triển và gỡ lỗi để dễ dàng theo dõi và phát hiện lỗi.
  • Tối ưu hóa mã bằng cách giảm thiểu các thao tác DOM không cần thiết.
  • Sử dụng các công cụ giám sát để theo dõi hiệu suất ứng dụng trong thời gian thực.

Các cạm bẫy phổ biến

  • Không thực hiện dọn dẹp đúng cách có thể dẫn đến lỗi không mong muốn trong các bài kiểm tra.
  • Thiếu các cấu hình thời gian chờ thích hợp có thể khiến bài kiểm tra bị treo.
  • Không kiểm tra trên nhiều trình duyệt có thể bỏ lỡ các lỗi tương thích.

Kết luận

Việc sử dụng Kiro và máy chủ Playwright MCP đã giúp tôi cải thiện quá trình phát triển và gỡ lỗi đáng kể. Nếu bạn đang gặp phải các vấn đề tương tự với việc kiểm tra JavaScript console, tôi khuyên bạn nên thử nghiệm với các công cụ này. Hãy bắt đầu ngay hôm nay và cải thiện chất lượng mã của bạn!

Câu hỏi thường gặp

1. Kiro là gì?

Kiro là một framework phát triển dựa trên đặc tả được Amazon phát triển, giúp tổ chức và quản lý mã nguồn hiệu quả hơn.

2. Playwright MCP có gì khác biệt?

Playwright MCP cho phép bạn thực hiện các bài kiểm tra tự động hóa cho các ứng dụng web với nhiều tính năng mạnh mẽ và linh hoạt.

3. Tôi có thể tìm thêm tài liệu ở đâu?

Bạn có thể tìm thêm tài liệu về Kiro và Playwright trên trang chủ của chúng.

4. Làm thế nào để tối ưu hóa mã của tôi với Playwright?

Hãy chắc chắn rằng bạn thực hiện dọn dẹp sau mỗi bài kiểm tra và sử dụng các cấu hình thời gian chờ hợp lý để tránh các lỗi không mong muốn.

Xem quảng cáo để đọc tiếpHoặc nâng cấp tài khoản để tắt quảng cáo

Nội dung bài viết

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào