Software Testing - Web Testing (P1)

PHẦN 1 – WEB PAGE TESTING TECHNIQUES

1. Web Testing là gì?

Web Testing là quá trình kiểm thử các ứng dụng web nhằm xác minh rằng chúng hoạt động đúng về chức năng, hiển thị, tương tác và xử lý dữ liệu trong các điều kiện sử dụng khác nhau.

Một ứng dụng web có thể rất đơn giản, chỉ gồm văn bản và hình ảnh, nhưng cũng có thể là một hệ thống lớn với hàng nghìn dòng mã và nhiều công nghệ tương tác. Web application còn thường được truy cập công khai, vì vậy có thể đối mặt với nhiều loại rủi ro và lỗi khác nhau. 10. Web Testing

Về mặt logic, web application có thể chia thành hai phía:

  • Client-side: tập trung vào phần người dùng trực tiếp nhìn thấy và tương tác, như giao diện, nội dung và hành vi trên trình duyệt.
  • Server-side: tập trung nhiều hơn vào hiệu năng, bảo mật và các quy trình chức năng được xử lý trên máy chủ. 10. Web Testing

Trong Phần 1, trọng tâm chủ yếu nằm ở client-side và web page testing.

2. Web Page Fundamentals – Một trang web gồm những gì?

Một web page thường bao gồm:

  • Nội dung tĩnh.
  • Nội dung động.
  • Hoặc kết hợp cả hai. 10. Web Testing

Trước khi bắt đầu kiểm thử, tester nên đặt ba câu hỏi:

  • Cái gì cần được kiểm thử?
  • Cái gì có thể không cần kiểm thử?
  • Kỹ thuật kiểm thử nào phù hợp nhất? 10. Web Testing

Các thành phần thường gặp trên trang web gồm:

  • Văn bản với nhiều kích thước, font và màu sắc.
  • Hình ảnh và đồ họa.
  • Hyperlink.
  • Quảng cáo thay đổi.
  • Drop-down list.
  • Các trường nhập dữ liệu.
  • Nội dung hoặc layout có thể tùy chỉnh.
  • Nội dung thay đổi động.
  • Layout thay đổi theo độ phân giải.
  • Các ứng dụng nhúng phía client hoặc server. 10. Web Testing 10. Web Testing 10. Web Testing

Điểm quan trọng là không có một kỹ thuật duy nhất chỉ dành riêng cho web. Những kỹ thuật đã học trước đó như Black-box hay White-box đều có thể được áp dụng, miễn là phù hợp với test requirements. 10. Web Testing

3. Testing Web Pages Using Black-box Method

Black-box Testing tập trung vào hành vi bên ngoài của hệ thống mà không cần quan tâm đến cách code bên trong được xây dựng.

Đối với web page, tester thao tác như một người dùng thực tế và đánh giá kết quả hiển thị hoặc phản hồi của hệ thống.

3.1. Testing the Text

Văn bản là nội dung phổ biến nhất trên web. Khi kiểm thử text, tester cần chú ý:

  • Chính tả.
  • Thuật ngữ, nội dung và chủ đề.
  • Thông tin có bị lỗi thời hay không.
  • Email, số điện thoại và địa chỉ có chính xác hay không.
  • Copyright có đúng và đúng thời điểm không.
  • Tiêu đề trang có phù hợp không.
  • ALT text.
  • Bố cục văn bản khi thay đổi kích thước trình duyệt rất nhỏ hoặc rất lớn. 10. Web Testing 10. Web Testing

Như vậy, kiểm thử text không chỉ là soát lỗi chính tả, mà còn liên quan đến độ chính xác, tính cập nhật và khả năng hiển thị.

4. Testing Hyperlinks

Hyperlink là thành phần kết nối người dùng từ một nội dung sang trang hoặc tài nguyên khác.

Tester cần xác minh:

  • Link dẫn đúng destination.
  • Link mở đúng cửa sổ.
  • Người dùng dễ nhận biết đâu là hyperlink.
  • Con trỏ chuột thay đổi khi di qua link.
  • Link mở email hoạt động đúng.
  • Không tồn tại orphan page – trang tồn tại nhưng không thể truy cập qua hyperlink nào. 10. Web Testing

Đây là nhóm lỗi khá phổ biến vì khi cấu trúc website thay đổi, link cũ có thể bị sai hoặc trở thành broken link.

5. Testing Graphics

Hình ảnh và đồ họa ảnh hưởng trực tiếp đến cả trải nghiệm người dùng lẫn tốc độ tải trang.

Một số câu hỏi kiểm thử quan trọng:

  • Hình ảnh có tải và hiển thị đúng không?
  • Nếu ảnh không tải được, có thông báo hoặc nội dung thay thế phù hợp không?
  • Khi resize browser, text và graphics có bị chồng lên nhau không?
  • Hiệu năng tải trang như thế nào?
  • Điều gì xảy ra khi kết nối quá chậm? 10. Web Testing

Điểm đáng chú ý là kiểm thử graphics không chỉ nhìn vào “ảnh đẹp hay không”, mà còn liên quan đến layout và performance.

6. Testing Forms

Form là khu vực người dùng nhập hoặc lựa chọn dữ liệu, chẳng hạn:

  • Text box.
  • List box.
  • Drop-down.
  • Các trường nhập hoặc chọn thông tin. 10. Web Testing

Khi kiểm thử form, tester cần xem xét:

  • Các field có được đặt đúng vị trí không?
  • Kích thước field có phù hợp không?
  • Dữ liệu đúng có được chấp nhận không?
  • Dữ liệu sai có bị từ chối không?
  • Có xác nhận phù hợp sau khi nhập không?
  • Optional field có thực sự optional?
  • Required field có thực sự bắt buộc?
  • Điều gì xảy ra khi nhập dữ liệu ngẫu nhiên? 10. Web Testing

Đây là khu vực rất phù hợp để áp dụng lại các kỹ thuật đã học như:

  • Equivalence Partitioning.
  • Boundary Value Analysis.
  • Decision Table.
  • State-based thinking.

7. Testing Other Web Elements

Ngoài text, link, graphics và forms, web page còn có nhiều thành phần khác như:

  • Hit counter.
  • Quảng cáo thay đổi.
  • Internal search.
  • Các thành phần động khác. 10. Web Testing

Đối với mỗi thành phần, tester có thể đặt các câu hỏi:

  • Nó có trạng thái riêng không?
  • Nó có xử lý dữ liệu không?
  • Có ranges hoặc boundaries không?
  • Test case nào phù hợp?
  • Có thể chia equivalence class như thế nào? 10. Web Testing

Cách tiếp cận này cho thấy Web Testing thực chất là tái sử dụng tư duy kiểm thử đã học, nhưng áp dụng vào các đối tượng đặc trưng của môi trường web.

8. Gray-box Testing cho Web Page

Gray-box Testing là sự kết hợp giữa Black-box và White-box.

Tester vẫn kiểm thử hệ thống từ bên ngoài như Black-box, nhưng có thêm một phần hiểu biết về cách hệ thống hoạt động bên trong để hỗ trợ việc tìm lỗi. 10. Web Testing

Web page khá phù hợp với Gray-box Testing vì phần lớn được xây dựng bằng HTML. Tester có thể quan sát hoặc đọc HTML để hiểu:

  • Cấu trúc trang.
  • Cách text và graphics được tổ chức.
  • Cách các thành phần được đánh dấu và hiển thị.

Nhờ đó, tester có thể phát hiện những defect mà nếu chỉ nhìn giao diện bên ngoài có thể bỏ sót. 10. Web Testing

9. White-box Testing cho Web Page

Web page hiện đại không chỉ chứa HTML tĩnh. Chúng có thể có các chương trình được nhúng hoặc chạy bằng những công nghệ như:

  • Java.
  • JavaScript.
  • Perl.
  • CGI. 10. Web Testing

Các thành phần này vẫn cần được kiểm thử theo những nguyên tắc của phần mềm thông thường.

Có hai nhóm dynamic content:

  • Client-side: được nhúng trong HTML và thực thi phía client.
  • Server-side: nằm và thực thi phía server. 10. Web Testing

10. Data-driven và Programmatically Created Web Pages

Một dạng web page phổ biến là Data-driven Web Page.

Trong trường hợp này:

  • HTML chủ yếu cung cấp layout.
  • Nội dung như text description, picture hay pricing được lấy từ database rồi đưa vào trang. 10. Web Testing

Tester cần xác minh rằng dữ liệu được lấy ra và hiển thị chính xác.

Ngoài ra còn có Programmatically Created Web Pages, nơi HTML được sinh tự động bởi chương trình. Tester cần kiểm tra HTML sinh ra có đúng với thiết kế mong đợi hay không. 10. Web Testing

Đối với phần logic xử lý, có thể áp dụng lại các kỹ thuật White-box:

  • Basic Path.
  • Decision Testing.
  • Loop Testing.
  • Các kỹ thuật kiểm tra dynamic content khác. 10. Web Testing

11. Test Case List – Tái sử dụng test case hiệu quả

Trong các web form lớn, rất nhiều field có cùng hoặc gần giống yêu cầu đầu vào.

Thay vì thiết kế test case riêng hoàn toàn cho từng field, tester có thể xây dựng một Test Case List dùng chung. 10. Web Testing

Quy trình xây dựng Test Case List trong tài liệu gồm:

  1. Brainstorm các test condition.
  2. Xây dựng bản nháp Test Case List.
  3. Technical stakeholders review.
  4. Chỉnh sửa.
  5. Baseline danh sách.
  6. Theo dõi các thay đổi của danh sách. 10. Web Testing

Điểm mạnh của cách làm này là tránh việc tester lặp đi lặp lại cùng một quá trình thiết kế test cho những field tương tự.

12. Ví dụ Test Case List cho Character Input Field

Tài liệu đưa ra một Test Case List mẫu dành cho Character Input Field.

Các test condition gồm:

  • Giá trị chỉ gồm chữ cái.
  • Giá trị chỉ gồm số.
  • Null.
  • Maximum Length.
  • Maximum Length − 1.
  • Maximum Length + 1.
  • Minimum Length.
  • Minimum Length − 1.
  • Minimum Length + 1.
  • Nhập /.
  • Nhập :.
  • Nhập khoảng trắng.
  • Nhập expression.
  • Upper case.
  • Lower case.
  • Giá trị có @. 10. Web Testing

Có thể thấy danh sách này kết hợp nhiều tư duy kiểm thử đã học trước đó:

  • Boundary Value.
  • Valid/Invalid Input.
  • Special Characters.
  • Empty/Null.
  • Character types.

13. Áp dụng Test Case List vào Web Form

Slide 18 minh họa một form thực tế với nhiều field như:

  • First Name.
  • Last Name.
  • Email.
  • Job Title.
  • Company.
  • Address.
  • City.
  • Country.
  • Phone Number. 10. Web Testing

Ý tưởng là không cần thiết kế một bộ test hoàn toàn mới cho từng field, mà tái sử dụng các test condition phù hợp trong Test Case List.

Ví dụ:

First Name

  • Chữ cái.
  • Null.
  • Min/Max Length.
  • Số.
  • Ký tự đặc biệt.

Email

  • Có @.
  • Thiếu @.
  • Null.
  • Format hợp lệ/không hợp lệ.

Phone Number

  • Chỉ số.
  • Min/Max Length.
  • Khoảng trắng.
  • Ký tự đặc biệt.

Nhờ vậy, Test Case List giúp giảm công sức thiết kế lặp lại và tăng tính nhất quán của bộ test.

Tổng kết Phần 1

Phần đầu của Web Testing cho thấy kiểm thử web không phải là một tập hợp kỹ thuật hoàn toàn mới. Tester chủ yếu tái sử dụng các kỹ thuật đã học và áp dụng chúng vào những thành phần đặc trưng của web.

Có thể ghi nhớ theo cách sau:

  • Black-box Testing → kiểm tra hành vi bên ngoài của web page.
  • Gray-box Testing → kiểm tra từ góc nhìn người dùng nhưng có thêm hiểu biết về cấu trúc bên trong, đặc biệt là HTML.
  • White-box Testing → kiểm tra logic, code và dynamic content.
  • Test Case List → tái sử dụng test condition cho nhiều field có yêu cầu tương tự.

 

Tin tức liên quan: