CYBERSOFT
Đăng nhập

Cấu trúc dự án test & hooks (beforeEach/afterEach) cho người mới: tổ chức bền vững (có code chạy được)

Chuyên công nghệNền tảngNgười mớiChuẩn SEO
🗓 1 tháng trước19 phút đọc·👁 1,266 lượt xem👤 190 người đọc

Bài cho người mới: học cấu trúc dự án test & test hooks (beforeEach/afterEach) qua app TMĐT ShopEasy. Cấu trúc thư mục chuẩn tests/fixtures/config, đặt tên file/test, nhóm bằng describe, vòng đời 4 hook, hai tình huống thật (lặp code đăng nhập, thiếu afterEach gây rác dữ liệu), nhiều mockup giao diện, FAQ và trắc nghiệm 5 câu. Chuẩn SEO, dẫn về khóa Tester CyberSoft.

1. Tóm tắt nhanh & màn hình bạn sẽ test

⭐ TL;DR — Cấu trúc dự án test là cách tổ chức thư mục, đặt tên file/test và nhóm test (describe) sao cho ai đọc cũng hiểu ngay. Test hooks (beforeAll/beforeEach/afterEach/afterAll) là các hàm chạy tự động quanh vòng đời test, giúp gom phần chuẩn bị và dọn dẹp dùng chung ra khỏi từng test. Bài này bám màn giỏ hàng của app TMĐT ShopEasy: bạn học thư mục chuẩn tests/fixtures/config, cách viết test.describe kèm beforeEach/afterEach bằng Playwright chạy được thật, và hai tình huống thật cho thấy cái giá phải trả khi thiếu hooks. Nhiều hình minh hoạ và trắc nghiệm cuối bài.

Chào bạn mới! Khi vừa học automation, phản xạ tự nhiên là mở thư mục dự án, tạo ngay 1 file test đầu tiên, rồi cứ thế thêm file mới mỗi khi có tính năng cần test — không theo quy tắc thư mục hay đặt tên nào cả. Cách này chạy được với vài test đầu tiên. Nhưng khi số lượng test tăng lên, và mỗi test đều cần đăng nhập, dọn dữ liệu trước/sau khi chạy, bạn sẽ thấy cùng một đoạn code chuẩn bị/dọn dẹp lặp đi lặp lại ở khắp nơi, còn file test thì nằm lộn xộn không theo trật tự nào. Cấu trúc dự án test rõ ràng, cộng với test hooks, chính là cách giải quyết cả hai vấn đề: có nơi cố định cho từng loại tệp, và có chỗ cố định để chạy phần chuẩn bị/dọn dẹp dùng chung. Chúng ta sẽ học qua màn giỏ hàng thật của ShopEasy, có hình minh hoạ và code Playwright chạy được.

🔒 shopeasy.vn/gio-hang ShopEasy · TMĐT ShopEasy · Giỏ hàng Áo thun ShopEasy Basic Số lượng: 2 · 199.000đ Balo laptop ShopEasy Pro Số lượng: 1 · 459.000đ3 Badge: 3 sản phẩm sót từ test trước
Màn hình test: giỏ hàng ShopEasy, chú thích badge còn sót sản phẩm do thiếu dọn dẹp giữa các test
📖 Cấu trúc dự án test: cách tổ chức thư mục, đặt tên file/test, và nhóm test (describe) của một dự án automation, sao cho bất kỳ ai đọc cũng nhanh chóng biết tệp nào chứa gì và cần sửa ở đâu.

2. Vấn đề: dự án test không có cấu trúc & không dùng hooks

Hãy hình dung một dự án automation ShopEasy sau 3 tháng phát triển không theo quy tắc nào: có file tên test1.js, có file tên checkTest.js, có file tên gio_hang_v2_final.js nằm cùng thư mục gốc. Không ai biết chắc file nào đang được dùng, file nào là bản nháp cũ còn sót lại. Khi cần sửa test giỏ hàng, bạn phải mở từng file để tìm, tốn thời gian chỉ để xác định 'mình nên sửa ở đâu'.

Vấn đề thứ hai, sâu hơn, là thiếu hooks. Mỗi test giỏ hàng đều cần đăng nhập trước; không dùng beforeEach, nghĩa là 5 dòng code đăng nhập được copy-paste vào từng test. Không dùng afterEach để xoá giỏ hàng sau mỗi test, nghĩa là test chạy sau 'thừa hưởng' luôn sản phẩm mà test chạy trước để lại — dẫn tới kết quả sai lệch không phải vì tính năng lỗi, mà vì dữ liệu bẩn tồn đọng. Cả hai vấn đề — cấu trúc lộn xộn và thiếu hooks — cộng dồn lại khiến bộ test ngày càng khó tin tưởng, và mỗi lần có lỗi lại mất rất nhiều thời gian chỉ để tìm ra nguyên nhân thật sự.

📖 Hook: hàm đặc biệt trong công cụ test (như Playwright) chạy tự động vào thời điểm cố định quanh vòng đời test — trước/sau tất cả test, hoặc trước/sau mỗi test — thay vì phải gọi thủ công trong từng test.

3. Cấu trúc dự án test là gì & nguyên tắc đặt tên

Cấu trúc dự án test gồm hai phần gắn liền nhau: (1) cách chia thư mục — tệp nào nằm ở đâu, và (2) cách đặt tên — tên file, tên test, tên nhóm test nói lên điều gì. Một dự án có cấu trúc tốt trả lời được ngay câu hỏi: 'Tôi cần sửa test đăng nhập, nên mở file nào?' mà không cần tìm kiếm hay đoán mò.

Nguyên tắc đặt tên phổ biến trong Playwright: mỗi màn hình/luồng nghiệp vụ có 1 file *.spec.js riêng (login.spec.js, cart.spec.js, checkout.spec.js), tên file nói rõ nó test cái gì. Bên trong file, dùng test.describe('ShopEasy - Tên tính năng', ...) để nhóm các test liên quan, và mỗi test('mô tả hành vi cụ thể', ...) nên mô tả rõ ràng bằng câu tiếng Việt hoặc tiếng Anh dễ hiểu, tránh viết tắt khó đoán như test('tc1').

💡 Đặt tên test bắt đầu bằng động từ mô tả hành vi (ví dụ 'thêm sản phẩm vào giỏ hàng thành công', 'giỏ hàng trống khi vừa đăng nhập') — khi test fail, chỉ nhìn tên là đoán ngay được nên mong đợi gì.

4. Cấu trúc thư mục dự án automation chuẩn

Một dự án Playwright chuẩn thường tách rõ các khu vực: thư mục tests/ chứa các file *.spec.js (mỗi luồng nghiệp vụ 1 file), thư mục fixtures/ chứa dữ liệu mẫu dùng lại giữa nhiều test, cùng với playwright.config.js ở gốc dự án để cấu hình chung, và .gitignore để loại các tệp không nên đưa vào git.

Cấu trúc thư mục dự án automation chuẩn Thư mục / TệpVai tròtests/login.spec.jsKịch bản test đăng nhập, nhóm bằng test.describe('ShopEasy - Đăng nhập')tests/cart.spec.jsKịch bản test giỏ hàng, dùng chung hooks beforeEach/afterEachfixtures/test-data.jsonDữ liệu mẫu dùng lại giữa nhiều test: tài khoản, sản phẩm...playwright.config.jsCấu hình chạy test: baseURL, trình duyệt, số lần thử lại.gitignoreLoại trừ node_modules/, report, trace khỏi git để repo gọn nhẹpackage.jsonKhai báo script chạy test, phiên bản Playwright đang dùngMỗi loại tệp có 1 vị trí cố định — thành viên mới nhìn tên thư mục là đoán được nội dung bên trong.
Cấu trúc thư mục chuẩn của một dự án automation Playwright: tests/, fixtures/, config, .gitignore
text
shopeasy-automation/
├── tests/
│   ├── login.spec.js     # kich ban test dang nhap
│   └── cart.spec.js      # kich ban test gio hang
├── fixtures/
│   └── test-data.json    # du lieu mau: tai khoan, san pham...
├── playwright.config.js  # cau hinh chung: baseURL, retries...
├── .gitignore            # loai node_modules, report khoi git
└── package.json
💡 Khi dự án lớn dần, có thể thêm thư mục pages/ cho Page Object hoặc utils/ cho hàm dùng chung — nhưng ngay từ đầu, chỉ cần tests/, fixtures/, config và .gitignore là đủ gọn để bắt đầu đúng cách.

5. Hooks là gì & vòng đời beforeAll/beforeEach/afterEach/afterAll

Playwright cung cấp 4 hook chính, đặt bên trong test.describe: test.beforeAll() chạy đúng 1 lần trước khi test đầu tiên bắt đầu; test.beforeEach() chạy lại trước MỖI test; test.afterEach() chạy sau MỖI test dù test đó pass hay fail; test.afterAll() chạy đúng 1 lần sau khi test cuối cùng đã xong. Bốn hook này tạo thành một vòng đời lặp lại: chuẩn bị chung một lần, rồi chuẩn bị riêng — chạy — dọn riêng cho từng test, và cuối cùng dọn chung một lần.

🔒

Nội dung bị khoá

Bạn đang xem bản xem trước. Đăng nhập để mở khoá toàn bộ bài viết và tất cả tài liệu Tester/QA.

Đã xem 25% nội dung
  • Đọc trọn vẹn mọi bài viết
  • Lưu bài & ghi chú cá nhân
  • Theo dõi tiến độ đã đọc
  • Luyện phỏng vấn, ISTQB, Mock
Đăng nhập để đọc tiếp

Chưa có mã? Lấy mã qua Fanpage / Zalo CyberSoft.

0

💬 Bình luận (0)

Bạn có thể đọc mọi bình luận. Đăng nhập để bình luận

Chưa có bình luận nào. Hãy là người đầu tiên!