Hack Não Copilot: Tự Động Viết Test E2E Ngon Ơ Mà KHÔNG Cần Mã Nguồn?! (Nhờ Playwright MCP)

Lê Lân

19/06/2025

Sử Dụng GitHub Copilot và Playwright MCP Để Tự Động Hóa Việc Viết Test E2E Mà Không Cần Truy Cập Source Code

Mở Đầu

Trong thế giới phát triển phần mềm hiện đại, viết các bài kiểm thử end-to-end (E2E) là một bước quan trọng để đảm bảo chất lượng ứng dụng. Tuy nhiên, việc tạo ra các test này thường đòi hỏi người viết phải hiểu rõ cấu trúc và mã nguồn của ứng dụng. Vậy làm thế nào để tự động hóa việc tạo test khi bạn không có quyền truy cập vào source code?

Bài viết này sẽ giới thiệu cách kết hợp giữa GitHub Copilot và Playwright MCP (Model Context Protocol), giúp tạo ra các bài kiểm thử E2E một cách thông minh chỉ bằng ngôn ngữ tự nhiên, mà không cần phải xem hay có quyền truy cập mã nguồn của ứng dụng. Chúng ta sẽ lần lượt tìm hiểu nguyên lý hoạt động, cách thiết lập, và ví dụ thực tế về quy trình tạo test tự động.

Vì Sao Không Thể Dùng Copilot Một Mình?

Hạn Chế Của GitHub Copilot

GitHub Copilot là một trợ lý lập trình thông minh, nhưng nó hoạt động hiệu quả nhất khi có quyền truy cập vào mã nguồn. Lý do là nó dựa vào nội dung mã để hiểu ứng dụng và viết test phù hợp.

Nếu bạn chỉ tương tác với một ứng dụng web thông qua trình duyệt mà không có mã nguồn, Copilot sẽ không có đủ ngữ cảnh, dẫn đến các bài test không chính xác hoặc thiếu các bước cần thiết.

Cách MCP Thay Đổi Cuộc Chơi

Model Context Protocol (MCP) đóng vai trò như một cầu nối giữa Copilot và trình duyệt thực tế.

MCP cho phép Copilot:

Mở trang web và tương tác với các thành phần giao diện

Thu thập dữ liệu cấu trúc DOM bằng snapshot ARIA

Thực hiện các hành động UI để chuyển thành test Playwright có thể chạy được

Nhờ vậy, Copilot không còn bị giới hạn bởi nguồn code thiếu vắng mà vẫn tạo được test chuẩn xác.

Thiết Lập Prompt Tạo Test

Cách Tạo Prompt Tùy Chỉnh

Chúng ta dùng một prompt đặc biệt nằm trong tệp .github/prompts/generate.prompt.md , trong đó có các hướng dẫn cụ thể cho Copilot như sau:

Bạn là một trình tạo test Playwright.

Bạn được giao một kịch bản kiểm thử, và cần tạo test Playwright dựa trên kịch bản đó.

KHÔNG được tạo code test chỉ dựa trên kịch bản.

Hãy thực hiện lần lượt các bước qua Playwright MCP.

Sau khi hoàn thành tất cả bước, tạo ra file test .ts với @playwright/test .

Lưu test vào thư mục tests .

Thực thi và chỉnh sửa test cho đến khi test chạy thành công.

Ví Dụ Kịch Bản

Tạo test Playwright cho kịch bản sau:

Từ đây, MCP sẽ thực hiện giúp ta toàn bộ thao tác và tạo test hoàn chỉnh.

Từ Tương Tác Trình Duyệt Đến Mã Test

Quá Trình Tự Động Hóa

Khi bạn gửi lệnh trong Copilot Chat (ví dụ sử dụng Cloud 3.5 Sonnet), MCP sẽ:

Bật phiên trình duyệt thực và điều hướng đến URL được yêu cầu

Thấy khó xác định trường tìm kiếm, MCP tạo snapshot phân tích cấu trúc DOM

Tìm đúng input tìm kiếm, nhập từ khóa Garfield

Tiếp tục chạy các bước và cuối cùng tạo mã Playwright dựa trên lịch sử tương tác

Tính Năng Nổi Bật Của MCP

Tính năng	Mô tả
Điều khiển trình duyệt	Tương tác trực tiếp với trang web thực tế
Snapshot ARIA	Thu thập thông tin giao diện hỗ trợ từ trình duyệt
Tạo test tự động	Biên dịch các hành động thành mã Playwright chuẩn
Chạy và xác nhận test	Chạy test ngay lặp lại cho đến khi test thành công

MCP cung cấp cho Copilot như một hệ thống thị giác, giúp nó “nhìn thấy” và hiểu giao diện web như con người.

Xác Thực Test

Sau khi tạo test, Copilot tự động chạy file test và kiểm tra kết quả.

import { test, expect } from '@playwright/test';

test('Movie search - Search for a movie by title', async ({ page }) => {
  // Điều hướng đến ứng dụng movies
  await page.goto('https://debs-obrien.github.io/playwright-movies-app');

  // Bấm nút tìm kiếm để mở ô nhập liệu
  await page.getByRole('search').click();

  // Gõ 'Garfield' vào ô tìm kiếm và nhấn Enter
  await page.getByRole('textbox', { name: 'Search Input' }).fill('Garfield');
  await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');

  // Xác nhận tên phim 'The Garfield Movie' xuất hiện trên màn hình
  await expect(page.getByRole('heading', { name: 'The Garfield Movie', level: 2 })).toBeVisible();
});

Test chạy thành công khi tất cả các bước thực thi không lỗi và xác nhận đúng kết quả đặt ra.

Tiếp Theo Là Gì?

Bạn có thể:

Xem lại và hiệu chỉnh test nếu cần

Dùng GitHub MCP mở Pull Request tự động

Hợp nhất vào bộ test tự động chính thức của dự án

Điều đặc biệt là mọi thao tác này diễn ra mà không cần bạn phải có quyền truy cập vào mã nguồn.

Tại Sao Điều Này Quan Trọng?

QA Tester trong môi trường black-box có thể tự động tạo test nhanh chóng cho môi trường không rõ mã nguồn.

Các công ty agency kiểm thử trang web khách hàng bên ngoài không có quyền cập nhật code.

Các ngành công nghiệp yêu cầu kiểm soát mã nguồn nghiêm ngặt, không cho phép truy cập.

Các nhà phát triển muốn tăng tốc độ viết test bằng ngôn ngữ tự nhiên, giảm công sức thủ công.

Xem Demo Trực Tiếp

🎬 Muốn thấy demo toàn diện? Hãy xem video YouTube minh họa cách Playwright MCP và Copilot phối hợp tạo test Playwright chỉ bằng câu lệnh tiếng Anh:

Watch the Demo

Kết Luận

Kết hợp giữa GitHub Copilot và Playwright MCP đưa việc test tự động lên một tầm cao mới, giúp tạo test E2E nhanh chóng, chính xác ngay cả khi không có quyền truy cập vào mã nguồn của ứng dụng. Đây là một bước tiến lớn giúp các nhóm phát triển và kiểm thử làm việc hiệu quả hơn, giảm thiểu rào cản trong các môi trường hạn chế quyền truy cập.

Hãy thử áp dụng giải pháp này cho các dự án của bạn và trải nghiệm sự khác biệt.

Bạn sẵn sàng để tiết kiệm thời gian viết test và nâng cao chất lượng kiểm thử? Bắt đầu với Playwright MCP và Copilot ngay hôm nay!

Tham Khảo

Microsoft Docs - Playwright Documentation

GitHub Blog - Introducing GitHub Copilot

Playwright MCP Demo - Playwright MCP GitHub Repo

YouTube - Generating Playwright Tests with Copilot and MCP

“Model Context Protocol: Enhancing LLM Interaction with Browsers”,
debsobrien,
May 1, 2024