Test automation với Playwright

Bắt lỗi checkout trước khi khách hàng gặp nó.

TTN xây dựng và vận hành bộ kiểm thử end-to-end bằng Playwright + BDD cho website thương mại điện tử và hệ thống doanh nghiệp. Mỗi lần deploy, hàng trăm kịch bản chạy song song trên Chromium, Firefox và WebKit, kết quả đẩy thẳng về Squash TM và pipeline CI của bạn.

Nhận đánh giá miễn phí Xem một kịch bản mẫu

Gherkin tiếng Việt / Anh Chạy trong CI/CD Trace, video, screenshot

~/shop-e2e — npx bddgen && npx playwright test --shard=1/4

Running 184 tests using 8 workers
 
Feature: Checkout – khách vãng lai
  Scenario: Đặt hàng COD với mã giảm giá
    ✓ Given tôi đang ở trang sản phẩm "MWK-2904"   1.2s
    ✓ When  tôi thêm 2 sản phẩm vào giỏ          0.8s
    ✓ And   tôi áp mã "SALE10"                  0.6s
    ✓ Then  tổng tiền giảm 10%                 0.2s
    ✓ And   đơn hàng được tạo thành công        2.4s
 
  182 passed  1 failed  1 flaky (retried)  · 3m 41s
→ Imported to Squash TM iteration #1234

chromium ✓ firefox ✓ webkit ✓ Pixel 7 ✓ iPhone 15 ✓

Vì sao cần tự động hóa

Regression thủ công không theo kịp tốc độ release.

Những lỗi đắt nhất thường nằm ở luồng mà không ai kịp test lại: thanh toán, giỏ hàng, đăng nhập, đa ngôn ngữ.

Mỗi bản release mất 2–3 ngày test tay

Đội QA lặp lại cùng một checklist trên từng trình duyệt, từng store view.

Bộ regression chạy trong vài phút

Playwright chạy song song nhiều worker, shard trên CI. QA tập trung vào exploratory test.

Test Selenium chập chờn, không ai tin kết quả

Sleep cứng, selector giòn, fail ngẫu nhiên khiến đội dev bỏ qua báo cáo.

Auto-wait, locator theo vai trò, retry có kiểm soát

Test flaky được đánh dấu riêng, kèm trace để tìm nguyên nhân gốc.

Business không đọc được test case

Kịch bản nằm trong code, không ai đối chiếu được với yêu cầu.

Kịch bản Gherkin đồng bộ với Squash TM

BA, PO và QA cùng đọc một file .feature, có traceability tới requirement.

Giải pháp

Một framework hoàn chỉnh, bàn giao được, không khóa bạn vào vendor.

Toàn bộ là mã nguồn mở trên repo của bạn. Đội của bạn có thể tự vận hành sau khi bàn giao.

@playwright/test · TypeScript

Playwright đa trình duyệt

Chromium, Firefox, WebKit và giả lập mobile trong một API. Auto-wait loại bỏ phần lớn lỗi timing.

playwright-bdd · Gherkin

BDD dễ đọc cho business

Kịch bản viết bằng Given/When/Then, tái sử dụng step qua step catalog để tránh trùng lặp.

Page Object Model

Kiến trúc dễ bảo trì

Page Object chỉ trả về locator và dữ liệu; mọi assertion nằm ở step. UI đổi chỉ sửa một chỗ.

Squash TM · REST API

Quản lý test case tập trung

Đồng bộ feature file lên Squash TM, chạy theo iteration và import kết quả tự động.

GitHub Actions · GitLab CI · Jenkins · Docker

Tích hợp CI/CD

Chạy trên mỗi pull request hoặc theo lịch nightly, shard theo số runner, chặn merge khi luồng chính fail.

Claude · MCP · AI agents

AI hỗ trợ viết và sửa test

Agent đọc DOM thật để sinh kịch bản, phân loại lỗi theo nguyên nhân gốc và đề xuất bản sửa cho test hỏng.

Cách viết test

Business đọc kịch bản. Code lo phần còn lại.

Một kịch bản thật đi qua ba lớp, mỗi lớp có trách nhiệm riêng.

Feature file mô tả hành vi bằng ngôn ngữ nghiệp vụ, mã hóa ID test case Squash TM ngay trong tên file.
Step definition nối câu Gherkin với Page Object và thực hiện toàn bộ assertion.
Page Object chứa locator và hành động, không chứa expect() .

Feature: Search - Tìm kiếm nhanh

  Scenario: Mở trang sản phẩm từ quick search
    Given tôi đang ở trang chủ
    When  tôi tìm kiếm "M18 FUEL"
    Then  sản phẩm "M18 FUEL Hammer Drill" xuất hiện
    When  tôi chọn sản phẩm đó
    Then  trang sản phẩm được hiển thị

import { expect } from '@playwright/test';
import { Then, When } from './fixtures';

When('tôi tìm kiếm {string}', async ({ searchPage }, q) => {
  await searchPage.searchProduct(q);
});

Then('sản phẩm {string} xuất hiện', async ({ searchPage }, name) => {
  // Assertion chỉ nằm ở step definition
  await expect(searchPage.getQuickSearchResult(name)).toBeVisible();
});

export class SearchPage extends CommonPage {
  getSearchInput(): Locator {
    return this.page.getByRole('searchbox');
  }

  getQuickSearchResult(name: string): Locator {
    return this.page.getByRole('link', { name });
  }

  async searchProduct(q: string) {
    await this.getSearchInput().fill(q);
  }
}

Quy trình triển khai

Từ khảo sát đến bộ regression chạy mỗi ngày.

Thời gian dưới đây là mốc điển hình cho một website ecommerce cỡ vừa; con số thực tế được chốt sau buổi khảo sát.

Tuần 1

Khảo sát

Rà soát luồng nghiệp vụ, môi trường staging, dữ liệu test và test case hiện có.

Tuần 1–2

Test plan

Ưu tiên kịch bản theo rủi ro doanh thu, viết feature file và đồng bộ lên Squash TM.

Tuần 2–4

Xây framework

Dựng repo, fixtures, Page Object, step catalog, cấu hình đa trình duyệt và dữ liệu test.

Tuần 4–5

Tích hợp CI

Gắn vào pipeline, shard, báo cáo HTML + trace, thông báo kết quả qua Slack/Teams.

Liên tục

Vận hành

Bổ sung kịch bản theo sprint, xử lý test flaky, báo cáo xu hướng chất lượng hằng tháng.

Phạm vi cho ecommerce

Kịch bản dựng sẵn cho Magento 2 và Shopify Plus.

Chúng tôi bắt đầu từ thư viện kịch bản đã dùng trong các dự án ecommerce đa thị trường, rồi điều chỉnh theo theme và tích hợp riêng của bạn.

Luồng nghiệp vụ	Ví dụ kịch bản	Magento 2 / Hyvä	Shopify Plus
Tìm kiếm & danh mục	Quick search, filter, sort, phân trang, SEO meta	Có sẵn	Có sẵn
Trang sản phẩm	Biến thể, giá theo nhóm khách, tồn kho, gallery	Có sẵn	Có sẵn
Giỏ hàng & khuyến mãi	Mã giảm giá, cart rule, free shipping threshold	Có sẵn	Có sẵn
Checkout & thanh toán	Guest/đăng nhập, COD, cổng thanh toán sandbox	Có sẵn	Tùy cổng
Tài khoản khách hàng	Đăng ký, đăng nhập, lịch sử đơn, wishlist	Có sẵn	Có sẵn
Đa thị trường	Store view, ngôn ngữ, tiền tệ, thuế theo quốc gia	Có sẵn	Có sẵn (Markets)
B2B & tích hợp	Báo giá, company account, đồng bộ ERP/OMS qua API	Theo dự án	Theo dự án

Có thư viện kịch bản sẵn Xây theo cấu hình cụ thể

Mô hình hợp tác

Bắt đầu nhỏ, mở rộng khi đã thấy kết quả.

2–3 tuần

Pilot

Chứng minh hiệu quả trên luồng quan trọng nhất trước khi đầu tư lớn.

10–20 kịch bản cho 1 luồng chính
Framework chạy được trên CI
Báo cáo đánh giá và đề xuất lộ trình

1–3 tháng

Build & Transfer

Xây bộ regression đầy đủ và bàn giao để đội của bạn tự vận hành.

Phủ các luồng doanh thu chính
Tích hợp Squash TM và CI/CD
Đào tạo, tài liệu, step catalog

Theo tháng

Managed QA

TTN vận hành và bảo trì bộ test song song với chu kỳ release của bạn.

Bổ sung kịch bản theo sprint
Xử lý test flaky và lỗi môi trường
Báo cáo chất lượng hằng tháng

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

Trước khi bắt đầu

Vì sao chọn Playwright thay vì Selenium hay Cypress?

Playwright hỗ trợ cả ba engine trình duyệt chính trong một API, có auto-wait, chạy song song mặc định và đi kèm trace viewer để debug. Với ecommerce cần kiểm tra Safari (WebKit) và mobile, đây là lựa chọn ít đánh đổi nhất.

Chúng tôi đã có test case trên Squash TM hoặc Excel, có dùng lại được không?

Có. Test case hiện có được chuyển thành feature file Gherkin và đồng bộ ngược lên Squash TM, giữ nguyên ID để truy vết.

Test chạy ở đâu, dữ liệu có ra ngoài hạ tầng của chúng tôi không?

Test chạy trên CI runner hoặc server của bạn (Docker, Ubuntu, Kubernetes). Mã nguồn nằm trong repo của bạn; TTN không giữ bản sao dữ liệu nếu không được yêu cầu.

AI được dùng ở đâu trong quy trình?

AI agent hỗ trợ soi DOM để đề xuất locator, sinh bản nháp kịch bản từ step catalog và phân loại test fail theo nguyên nhân. Mọi thay đổi đều được kỹ sư QA review trước khi merge.

Bao lâu thì thấy kết quả?

Với gói Pilot, bộ kịch bản đầu tiên thường chạy được trên CI sau khoảng 2 tuần.

Đánh giá miễn phí

Gửi cho chúng tôi URL staging. Chúng tôi trả lại một bản đánh giá khả năng tự động hóa.

Bao gồm danh sách luồng nên tự động trước, ước lượng effort và một kịch bản Playwright mẫu chạy trên chính website của bạn.