Chào mừng mọi người đã quay lại với blog của mình và mình là Tuyền. Hôm nay mình sẽ trở lại với serie học gì chia sẻ nấy và series này mình sẽ tạm đặt tên là “Tuyền học Cypress” với mục tiêu vừa tìm hiểu và học và có thể thực hành thành thạo Cypress. Đồng thời, tạo một lộ trình học (mang tính tham khảo) cho những bạn mới bắt đầu học, tìm hiểu về Cypress thì mình hy vọng bài viết của mình sẽ hữu ích cho các bạn.&nbsp;Để hiểu về Cypress là gì? và nó có vai trò như thế nào thì chúng ta cùng nhau tìm hiểu về những kiến thức đại cương về nó nhé!!!! <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/banner_649be52668.png"><h4>No.1: Cùng Tuyền tìm hiểu kiến thức đại cương về Cypress</h4><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cy_97ca7d4a9a.png"></figure>Cypress là một công cụ kiểm thử từ đầu đến cuối được thiết kế cho các ứng dụng web hiện đại. Có mã nguồn mở và được áp dụng rộng rãi trên cộng đồng phát triển web, Cypress hoạt động trực tiếp trên trình duyệt. Với cách hoạt động linh hoạt cho phép các nhà phát triển có thể viết và thực thi các bài kiểm tra một cách dễ dàng, hiệu quả.Những ưu điểm siêu việt của Cypress có thể kể đến:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ud_Cy_f5e0258a87.png"></figure><ul><li>Đơn giản, thân thiện dễ tương tác&nbsp;</li><li>Tải lại trang và loại bỏ lỗi theo thời gian thực: Khi chạy các bài kiểm tra cho phép chúng ta có thể theo dõi từng bước và có thể tạm dừng các bài kiểm tra. Dễ dàng quan sát trạng thái của ứng dụng trong thời gian thực làm đơn giản hóa quá trình gỡ lỗi.</li><li>Đợi và kiểm thử tự động: Với cơ chế thông minh tự động chờ đợi và chạy các bài kiểm tra đối chiếu so sánh dữ liệu: text, con số có đúng với testcase đề ra không?. Đồng thời, hiển thị kết quả đúng hoặc sai một cách rõ ràng, nhằm giúp tester báo cáo lỗi với developer (dev) chính xác hơn. Giúp team dev hiểu và fix lỗi chính xác hơn. Ngoài ra, việc chạy các bài test trong mỗi lần release sẽ giúp web chúng ta không bị lỗi phát sinh trong quá trình phát triển thêm tính năng mới, giúp giảm thiểu được số lượng lỗi, kết quả sai, không đáng tin cậy.</li><li>Khả năng tích hợp vào CI/CD: Giúp cho việc viết test trên các project và chạy lại test nó sẽ linh hoạt và thường xuyên hơn. Dễ dàng thiết lập quy trình kiểm thử mạnh mẽ và đáng tin cậy, loại bỏ lỗi nhanh chóng,&nbsp; đảm bảo chất lượng của ứng dụng với mỗi lần merge pull-request.</li><li>Một tính năng khá hay của Cypress đó là có thể chụp ảnh màn hình ở bất kỳ thời điểm nào khi chạy bài kiểm tra hoặc quay video quá trình chạy test, như vậy có thể giúp bạn lưu trữ và so sánh được với kết quả dự kiến.</li><li>Cộng đồng phát triển lớn và có nhiều plugin hỗ trợ.</li><li>Hỗ trợ kiểm thử ở các trình duyệt: Chrome, Firefox, Edge.</li><li>Hỗ trợ viết nhiều loại test: E2E (End - to - end) test, Component test, Integration test, Unit test,...</li></ul>Tuy vậy, Cypress vẫn có những mặt hạn chế:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/nd_Cy_efe16ff923.png"></figure><ul><li>Giới hạn ngôn ngữ viết test, được biết Cypress hiện tại chỉ dùng duy nhất ngôn ngữ là Javascript để viết test.&nbsp;</li><li>Không hỗ trợ chạy song song nhiều trình duyệt: Cypress chỉ chạy test đồng thời ở một trình duyệt duy nhất.</li><li>Đối với các bài kiểm thử lớn và phức tạp gây chậm trong việc thực thi các bài kiểm thử.</li><li>Kiểm tra đa trang web bị hạn chế: hiện tại Cypress chỉ hỗ trợ kiểm thử cho các trang đơn (Single Page Applications - SPAs). Đối với các ứng dụng có sự chuyển đổi trang thì dùng Cypress có thể gặp khó khăn,...</li></ul>Tuy, có những ưu và nhược điểm như vậy nhưng Cypress cũng đang&nbsp; dần chiếm ưu thế vì sự tiện lợi của mình, giúp giải quyết tốc độ, sự tin cậy, các vấn đề khác mà các công cụ kiểm thử web không làm được. Với sự phát triển này, đội ngũ phát triển Cypress sẽ cập nhật thêm nhiều tính năng để giúp các nhà phát triển viết test nhanh chóng và tiện lợi hơn nữa đảm bảo cho các ứng dụng đầu ra sẽ chất lượng đỉnh cao, trải nghiệm người dùng tuyệt nhất…Những kiến thức trên là những lý thuyết đại cương về khái niệm, vai trò, lợi ích mà Cypress mang lại ở môi trường thử nghiệm. Để biết cách hoạt động và xây dựng một bài test đầu tiên thì chúng ta đến với phần tiếp theo ở blog sau, hướng dẫn setup và tạo dự án đầu tiên…!!!!!Cảm ơn các bạn đã đọc đến đây!!!!Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền.&nbsp;Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.Tài liệu tham khảo: https://docs.cypress.io/guides/overview/why-cypress &nbsp;

Cypress là một công cụ kiểm thử từ đầu đến cuối được thiết kế cho các ứng dụng web hiện đại. Có mã nguồn mở và được áp dụng rộng rãi trên cộng đồng phát triển web, Cypress hoạt động trực tiếp trên trình duyệt. 

Tuyền học Cypress - No.1 Tìm hiểu kiến thức đại cương về Cypress

Cypress được thiết kế để chạy các kịch bản kiểm thử nhanh chóng và hiệu quả giúp tạo ra các bộ kiểm thử tự động toàn diện, giảm thiểu công sức và thời gian của nhóm QA. Cùng theo chân mình để biết cách cài đặt và mở Cypress như thế nào nhé!<h2>1. Các phần mềm cần thiết</h2>Github<img class="image_resized" style="width:41.27%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_01_09_243449ba5a.png" alt="Screenshot 2023-05-16 at 15.01.09.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_01_09_243449ba5a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_01_09_243449ba5a.png 500w," sizes="100vw">Visual Studio Code<img class="image_resized" style="width:39.98%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_16_07_8488fd918f.png" alt="Screenshot 2023-05-16 at 15.16.07.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 221w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 750w," sizes="100vw"><h2>2. Cách clone code&nbsp;</h2>Mở Github → tìm Add → chọn Clone Repository<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_45_57_90405907b9.png" alt="Screenshot 2023-05-16 at 15.45.57.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 1000w," sizes="100vw">Gõ từ khóa và tìm đến đường dẫn dự án → bấm Clone<img class="image_resized" style="width:52.76%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_48_38_79da2f113f.png" alt="Screenshot 2023-05-16 at 15.48.38.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 158w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 1000w," sizes="100vw"><h2>3. Các câu lệnh đơn giản</h2>Vào package.json để định nghĩa câu lệnh<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_16_09_04_6376c32681.png" alt="Screenshot 2023-05-16 at 16.09.04.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 231w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 1000w," sizes="100vw">Gõ cd + tên thư mục → để dẫn tới thư mục đó<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_16_12_03_f37636c78f.png" alt="Screenshot 2023-05-16 at 16.12.03.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 213w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 1000w," sizes="100vw">- Câu lệnh yarn cypress:open để mở cypress<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_52_33_714e3032d2.png" alt="Screenshot 2023-05-17 at 13.52.33.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 214w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 1000w," sizes="100vw">- Cửa sổ Cypress mở ra → chọn thư mục E2E Testing là thư mục chưa file đã tạo<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png" alt="Screenshot 2023-05-17 at 13.57.05.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 1000w," sizes="100vw">- Chọn 1 trình duyệt để chạy<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png" alt="Screenshot 2023-05-17 at 13.59.56.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 1000w," sizes="100vw">- Cửa sổ trình duyệt mở ra → chọn Specs → home.cyts<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png" alt="Screenshot 2023-05-17 at 14.01.37.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 1000w," sizes="100vw">- Cửa sổ tự động chạy, pass là màu xanh, fail là đỏ<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_14_28_31_827a01d503.png" alt="Screenshot 2023-05-17 at 14.28.31.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 1000w," sizes="100vw">Trên đây là toàn bộ quá trình cài đặt và câu lệnh để chạy Cypress, cùng đón chờ những bài viết tiếp theo của mình về Cypress nhé!&nbsp;

Cypress được thiết kế để chạy các kịch bản kiểm thử nhanh chóng và hiệu quả giúp tạo ra các bộ kiểm thử tự động toàn diện, giảm thiểu công sức và thời gian của nhóm QA. Cùng theo chân mình để biết cách cài đặt và mở Cypress như thế nào nhé!

Cách cài đặt và chạy được Cypress cơ bản

Bài viết hôm nay chúng ta cùng tìm hiểu mô hình Agile và phương pháp kiểm thử phần mềm dựa theo mô hình Agile sẽ hiêu quả như thế nào&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_4dd7dc6f37.png"><h2>1. Agile là gì&nbsp;</h2><ul><li>Agile là một phương pháp phát triển phần mềm linh hoạt, tập trung vào việc phát triển sản phẩm theo từng chu kỳ thời gian ngắn gọi là "sprints". Agile hướng đến việc tối đa hóa giá trị sản phẩm và hạn chế rủi ro bằng cách tập trung vào khả năng thích ứng với sự điều chỉnh các yêu cầu nghiệp vụ và sự phản hồi thường xuyên của khách hàng</li><li>Agile thường được áp dụng trong các dự án phần mềm nhưng cũng có thể được áp dụng trong nhiều lĩnh vực khác nhau, từ sản xuất đến marketing và quản lý dự án.</li></ul><h2>2. Các tiêu chí agile&nbsp;</h2><ul><li>Ưu tiên vào sự tương tác giữa người với người hơn là việc mà tập trung vào công cụ để phát triển phần mềm: Agile đặt sự tương tác, trao đổi giữa các thành viên trong nhóm lên hàng đầu. Việc trao đổi, giao tiếp thường xuyên với khách hàng, sẽ giúp việc quản lý sản phẩm tốt hơn, cũng như hỗ trợ nhóm phát triển phần mềm hiểu rõ hơn về các yêu cầu nghiệp vụ và nằm bắt kịp thời những nhu cầu mà khách hàng phản hồi. Từ đó đưa ra các quyết định phát triển phần mềm nhanh chóng và hiệu quả hơn.</li><li>Tập trung vào phần mềm hơn là viết tài liệu chi tiết cho phần mềm. Mặc dù việc viết tài liệu chi tiết cho phần mềm cũng là điều quan trọng không kém, nhưng mà theo Agile, việc tạo ra các phiên bản phần mềm hoạt động sớm, giúp khách hàng có thể dùng thử phần mềm để đánh giá và đưa ra phản hồi sớm. Giúp tối ưu hoá giá trị sản phẩm</li><li>Hợp tác với khách hàng hơn là đàm phán hợp đồng: Agile coi khách hàng là một phần của quá trình phát triển sản phẩm. Việc hợp tác với khách hàng giúp đảm bảo rằng sản phẩm được phát triển đáp ứng được yêu cầu thực tế và đáp ứng được nhu cầu thay đổi của khách hàng.</li><li>Khả năng thích ứng với thay đổi hơn là theo kế hoạch chi tiết: Agile cho phép các thay đổi và điều chỉnh trong quá trình phát triển sản phẩm. Sự thích ứng nhanh chóng giúp đảm bảo rằng sản phẩm có thể đáp ứng được các yêu cầu mới và giải quyết được các vấn đề phát sinh trong quá trình phát triển</li></ul><h2>3. 12 quy tắc trong agile&nbsp;</h2><ul><li>Ưu tiên hàng đầu là tạo ra sự hài lòng của khách hàng bằng cách cung cấp các sản phẩm có giá trị.</li><li>Chấp nhận thay đổi, thậm chí ở giai đoạn muộn trong quá trình phát triển. Agile giúp cho quá trình phát triển phần mềm trở nên linh hoạt hơn trong việc thay đổi yêu cầu của khách hàng.</li><li>Cung cấp các sản phẩm phần mềm có tính hoạt động và có giá trị cho khách hàng trong một thời gian ngắn, thông qua việc chia nhỏ các sản phẩm phần mềm thành các phần nhỏ và phát triển chúng đồng thời.</li><li>Các thành viên trong nhóm phát triển phần mềm nên hợp tác một cách chặt chẽ để đạt được mục tiêu chung của dự án.</li><li>Xây dựng các dự án quanh những người đóng góp trực tiếp vào dự án.</li><li>Tạo ra môi trường làm việc tích cực, hỗ trợ sự sáng tạo và cải thiện liên tục.</li><li>Chú trọng vào việc cung cấp các sản phẩm phần mềm hoạt động đúng như yêu cầu của khách hàng.</li><li>Đảm bảo rằng các thành viên trong nhóm phát triển phần mềm đều đóng góp vào quá trình phát triển và có trách nhiệm đối với kết quả.</li><li>Điều chỉnh quá trình phát triển phần mềm liên tục, thông qua việc đánh giá và cải thiện định kỳ.</li><li>Sử dụng các phương pháp đơn giản và hiệu quả để phát triển phần mềm.</li><li>Khuyến khích sự tương tác trực tiếp giữa các thành viên trong nhóm phát triển phần mềm.</li><li>Tạo ra các sản phẩm phần mềm bền vững và có thể thích nghi với các thay đổi trong tương lai.</li></ul><h2>4. Quy trình kiểm thử phần mềm trong mô hình Agile&nbsp;</h2>a. Các giai đoạn kiểm thử phần mềm tương ứng với các giai đoạn phát triển phần mềm trong trong mô hình Agile.<ul><li>Giai đoạn lên kế hoạch (Planning phase): Các kế hoạch kiểm thử được lập trình để đảm bảo rằng các yêu cầu của khách hàng được đáp ứng đầy đủ. Các kế hoạch kiểm thử bao gồm các kế hoạch kiểm thử chức năng, kiểm thử hiệu năng và kiểm thử tích hợp.&nbsp;</li><li>Giai đoạn thiết kế (Design phase): Các kịch bản kiểm thử được tạo ra và các ca kiểm thử được thiết kế. Những kịch bản này được sử dụng để đảm bảo rằng các yêu cầu của khách hàng được đáp ứng đầy đủ và các chức năng của phần mềm được thử nghiệm.&nbsp;</li><li>Giai đoạn phát triển (Development phase): Các ca kiểm thử được thực hiện song song với các bước phát triển khác của phần mềm. Các ca kiểm thử được sử dụng để đảm bảo rằng phần mềm hoạt động đúng và đầy đủ.</li><li>Giai đoạn kiểm thử tích hợp (Integration testing phase): Các ca kiểm thử được thực hiện để đảm bảo rằng phần mềm hoạt động đúng khi được tích hợp với các thành phần khác của hệ thống.</li><li>Giai đoạn kiểm thử chấp nhận (Acceptance testing phase): Khách hàng hoặc người dùng cuối được yêu cầu kiểm tra sản phẩm để đảm bảo rằng nó đáp ứng các yêu cầu của họ. Các ca kiểm thử chấp nhận được thực hiện để đảm bảo rằng phần mềm được chấp nhận bởi khách hàng.</li></ul>b. Các họat động đảm bảo chất lượng trong các phân đoạn<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_82b30d480a.png"></figure><ul><li>Phân đoạn xác định yêu cầu: Các yêu cầu của khách hàng được xác định và đảm bảo rằng chúng có thể được đo lường và đạt được. QA cần liên tục tương tác với khách hàng để hiểu rõ yêu cầu của họ và đảm bảo rằng phần mềm được phát triển đáp ứng đầy đủ các yêu cầu này.</li><li>Phân đoạn thiết kế: QA tham gia vào thiết kế kiến trúc của phần mềm. QA sẽ kiểm tra xem thiết kế có đáp ứng được các yêu cầu chất lượng và các tiêu chuẩn của công ty hay không. Nếu cần, QA sẽ đưa ra các đề xuất để cải thiện thiết kế.</li><li>Phân đoạn phát triển: QA tham gia vào quá trình phát triển phần mềm. QA đảm bảo rằng phần mềm được phát triển đáp ứng được các yêu cầu và các tiêu chuẩn chất lượng được đặt ra. QA sẽ tiến hành kiểm thử sản phẩm để đảm bảo rằng phần mềm được phát triển đáp ứng được các yêu cầu chất lượng.</li><li>Phân đoạn kiểm thử: QA thực hiện kiểm thử phần mềm. Các loại kiểm thử bao gồm kiểm thử đơn vị, kiểm thử tích hợp, kiểm thử hệ thống, và kiểm thử chấp nhận. Kết quả của các hoạt động kiểm thử sẽ được sử dụng để cải thiện phần mềm.</li><li>Phân đoạn triển khai: QA đảm bảo rằng phần mềm được triển khai đúng cách và đáp ứng được các tiêu chuẩn chất lượng. QA sẽ kiểm tra xem hệ thống triển khai đã đáp ứng được các yêu cầu chất lượng và sẽ đưa ra các đề xuất để cải thiện sản phẩm trong tương lai.</li></ul>

Agile là một phương pháp phát triển phần mềm linh hoạt, tập trung vào việc phát triển sản phẩm theo từng chu kỳ thời gian ngắn gọi là "sprints". Agile hướng đến việc tối đa hóa giá trị sản phẩm và hạn chế rủi ro bằng cách tập trung vào khả năng thích ứng với sự điều chỉnh các yêu cầu nghiệp vụ và sự phản hồi thường xuyên của khách hàng.

Phương Pháp Kiểm Thử Phần Mềm Agile

Xin chào các bạn, mình là Linh đây. Như chúng ta đã biết, những người làm tester thưở ban đầu thường hay test các chức năng của một web app một cách thủ công, gọi là manual test. Nhưng mà việc test thủ công hay bị lặp đi lặp lại các thao tác quen thuộc như đăng nhập đăng ký, bấm nút bất kì, ... Và việc đó sẽ tiếp tục diễn ra mỗi khi developer cập nhật tính năng mới, tester phải chịu khó test lại từ đầu toàn bộ chức năng, thành ra manual test sẽ không mang lại nhiều hiệu quả cho quy trình làm việc. Từ đó đã có nhiều loại hình thức test tự động như unit test, E2E cùng với các công cụ test như Selenium, Cypress, Playwright. Một trong những công cụ phổ biến mà chúng ta hay dùng chính là Cypress. Chúng ta cùng nhau tìm hiểu nó.<h1>1. Các hình thức test phổ biến:</h1><h2>E2E</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/e2e_730147bad1.png" alt="e2e.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_e2e_730147bad1.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_e2e_730147bad1.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_e2e_730147bad1.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_e2e_730147bad1.png 1000w," sizes="100vw">Kiểm thử End to End (E2E) là một phương pháp kiểm thử để kiểm tra luồng hoạt động của ứng dụng từ đầu đến cuối. Mục đích của thử nghiệm E2E là mô phỏng kịch bản của người dùng thực, xác nhận hệ thống đang được thử nghiệm và các thành phần của nó để tích hợp và toàn vẹn dữ liệu.<h1>Unit test:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unit_test_324a838acd.png" alt="unit-test.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unit_test_324a838acd.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unit_test_324a838acd.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unit_test_324a838acd.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unit_test_324a838acd.png 1000w," sizes="100vw"></h1>Unit test là mức độ kiểm thử nhỏ nhất trong quy trình kiểm thử phần mềm. Unit test kiểm thử các đơn vị nhỏ nhất trong mã nguồn như method, class, module...Do đó Unit test nhằm kiểm tra mã nguồn của các chương trình, các chức năng riêng rẽ hoạt động đúng hay không.Unit testing được thực hiện bởi lập trình viên.<h1>2. Cypress là gì:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cy_logo_f5b96f6abc.jpeg"></figure>Cypress là front end testing tool được xây dựng cho các ứng dụng Web hiện đại. Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong kiểm thử ứng dụng Web hiện đại. Cypress khá giống với selenium, nhưng mạnh mẽ hơn, dễ sử dụng vì được viết bằng Javascript, hỗ trợ nhiều hình thức test khác nhauCypress hỗ trợ chúng ta:<ul><li>Viết unit test, e2e,…</li><li>Chạy nhiều testcase.</li><li>Xem lại kết quả của từng bước test</li></ul>&nbsp;<h1>3. Setup và chạy giao diện điều khiển của Cypress:</h1><ul><li>Cần có Node.JS phiên bản 16 trở lên</li><li>Khuyến khích sử dụng package manger là yarn thay vì npm</li><li>Mở terminal và chạy lệnh sau để cài đặt cypress:</li></ul><pre><code class="language-plaintext">mkdir cypress-tool &amp;&amp; cd cypress-tool
yarn add cypress -dev</code></pre><ul><li>Mở giao diện cypress lên bằng lệnh sau:</li></ul><pre><code class="language-plaintext">npx cypress open</code></pre><ul><li>Giao diện cypress hiện lên, màn hình chọn loại hình thức test xuất hiện, ở đây sẽ có sẵn hai kiểu hình thức test là unit test và component test. Chúng ta sẽ chọn hình thức test là Unit Test, và chọn trình duyệt để test là Chrome.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_gui_select_e2e_99f5904ae1.gif" alt="cypress-gui-select-e2e.gif"><ul><li>Giao diện quản lý các test case sẽ mở ra trong cửa sổ chrome mới với địa chỉ là <a target="_blank" rel="noopener noreferrer" href="http://localhost:64478/__/#/specs">http://localhost:64478/__/#/specs</a>&nbsp;</li><li>Thanh công cụ bên trái sẽ bao gồm:<ul><li>Specs: Quản lý các file testcase, có thể lưu các test case theo từng thư mục cụ thể để dễ dàng quản lý và chạy code. Ngoài ra, ta cũng có thể tạo test case mẫu từ Scaffold example specs.</li></ul></li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_specs_344e7a7b4e.gif" alt="cypress-specs.gif"><ul><li>Runs: Là nơi ta xem các bản ghi testcase có sẵn từ dịch vụ đám mây của Cypress, theo dõi và debug các testcase bị thất bại với biểu đồ trực quan cùng với các công cụ phân tích mạnh mẽ<img class="image_resized" style="width:84.78%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_baec815dfc.png"></li><li>Settings: Là nơi cấu hình project như: Cấu hình các đuôi file testcase mà cypress có thể đọc ('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'). Thử nghiệm các tính năng nâng cao như quản lý bộ nhớ, hỗ trợ webkit,… &nbsp;Cấu hình proxy, cấu hình cypress cloud.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_settings_ed2dacd687.gif" alt="cypress-settings.gif"><h1>4. Tạo 1 testcase đơn giản:</h1>Trước khi bắt đầu tạo testcase, chúng ta hãy cùng nhau xem qua cấu trúc thư mục của project demo mà ta đã tạo ở bước 1:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d2035cadae.png"></figure>Các testcase có đuôi .cy.js sẽ được lưu trong thư mục e2e.Chúng ta hãy tạo 1 file test cypress/e2e/1-getting-started/todo.cy.js:<pre><code class="language-javascript">/// &lt;reference types="cypress" /&gt;


describe('example to-do app', () =&gt; {
 beforeEach(() =&gt; {
 cy.visit('https://example.cypress.io/todo')
 })

 it('displays two todo items by default', () =&gt; {
 cy.get('.todo-list li').should('have.length', 2)
 cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
 cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
 })

 it('can add new todo items', () =&gt; {

 const newItem = 'Feed the cat'
 cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)

 cy.get('.todo-list li')
 .should('have.length', 3)
 .last()
 .should('have.text', newItem)
 })

 it('can check off an item as completed', () =&gt; {

 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()


 cy.contains('Pay electric bill')
 .parents('li')
 .should('have.class', 'completed')
 })

 context('with a checked task', () =&gt; {
 beforeEach(() =&gt; {
 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()
 })

 it('can filter for uncompleted tasks', () =&gt; {

 cy.contains('Active').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Walk the dog')

 cy.contains('Pay electric bill').should('not.exist')
 })

 it('can filter for completed tasks', () =&gt; {

 cy.contains('Completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Pay electric bill')

 cy.contains('Walk the dog').should('not.exist')
 })

 it('can delete all completed tasks', () =&gt; {
 cy.contains('Clear completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .should('not.have.text', 'Pay electric bill')

 cy.contains('Clear completed').should('not.exist')
 })
 })
})
</code></pre>Nhìn qua những dòng code trên ta có thể thấy, các code cho từng bước thực hiện testcase thường bắt đầu bằng cy. Vì thế ta sẽ có danh sách các hàm để thực hiện các hành vi tương tác với trang web như:<ul><li>cy.visit ('URL'): Phương thức này là phương thức điều hướng cho Cypress. Nó gọi URL đã cho</li><li>cy.get ('locator'): Phương thức này lấy một đối số là trình</li><li>cy.get('locator').should('attribute or data', value): Phương thức này cho phép ta kiểm tra một hoặc nhiều đối tượng element mà mình truy vấn được có chứa thuộc tính hoặc giá trí thoả mãn kết quả mình mong muốn.</li><li>cy.find('locator'): Phương thức này gần giống với document.querySelector, cho phép ta thực hiện truy vấn đến một phần tử element nào đó thông qua id, class name hoặc xpath.</li></ul>Để chạy đoạn code trên, ta chỉ cần vào menu Specs trong sidebar và chọn file test vừa rồi, quá trình test sẽ chạy theo từng bước với các thông tin về quá trình chạy test một cách chi tiết nhất.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_run_test_8d337f1c37.gif" alt="cypress-run-test.gif"><h1>4. Tạo testcase tự động với Chrome Recorder:</h1>Nếu chúng ta từng dùng qua Selenium IDE, chúng ta sẽ quen thuộc với chức năng recorder để tự động ghi lại các thao tác chuột, bàn phím khi mình tương tác với website bất kì để tự động sinh ra file code test cho các ngôn ngữ lập trình khác nhau như python, C#, Javascript. Thì bên Cypress GUI mặc dù không có tính năng ấy, nhưng ta vẫn có thể sinh code test cho cypress tự động bằng tool Chrome Recorder. Chi tiết thêm các bạn có thể xem thêm video hướng dẫn từ document dưới đây:<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=-RJuZrq-wOk">https://www.youtube.com/watch?v=-RJuZrq-wOk</a><h1>5. Kết luận:</h1>Cypress là một công cụ hữu ích giúp cho việc kiểm thử trở nên dễ dàng hơn cho developers và QA đặc biệt là trong Integration Testing. Nó không chỉ giúp tiết kiệm thời gian, mà còn tiết kiệm chi phí trong quá trình kiểm tra chất lượng sản phẩm. Nhanh chóng mang đến sự hài lòng cho khách hàng.

Như chúng ta đã biết, những người làm tester thưở ban đầu thường hay test các chức năng của 1 web app một cách thủ công, gọi là manual test. Nhưng mà việc test thủ công hay bị lặp đi lặp lại các thao tác quen thuộc như đăng nhập đăng ký, bấm nút bất kì,... Và việc đó sẽ tiếp tục diễn ra mỗi khi developer cập nhật tính năng mới, testẻ phải chịu khó test lại từ đầu toàn bộ chức năng, thành ra manual test sẽ không mang lại nhiều hiệu quả cho quy trình làm việc. Từ đó đã có nhiều loại hình thức test tự động như unit test, E2E cùng với các công cụ test như Selenium, Cypress, Playwright. Một trong những công cụ phổ biến mà chúng ta hay dùng chính là Cypress. Chúng ta cùng nhau tìm hiểu nó.

Hướng dẫn cypress căn bản cho người mới bắt đầu

Hé lô các bạn, mình là Linh đây.&nbsp; &nbsp;Trong công việc liên quan đến kiểm phần mềm, chúng ta thường bắt gặp rất nhiều hình thức kiểm thử khác nhau như là E2E Test, Test coverage, Logic Test, Manual Test… Nhưng đối với một người mới bắt đầu như chúng ta thì thường bắt đầu với Manual Test để Test một website đầu tiên. Sau đây mình sẽ chia sẻ những kinh nghiệm Tester mà mình học hỏi được từ một người chị. Tên chị là Hòa với kinh nghiệm 10 năm Tester đã chỉ dạy cho mình về lĩnh vực Manual Testing.&nbsp; &nbsp;Trước hết để chúng ta phải tìm hiểu như thế nào là Manual Testing?Manual Testing là một phương thức kiểm thử phần mềm, hoặc là một chương trình được thực hiện thủ công bởi các tester mà không thông qua bất kỳ công cụ tự động kiểm thử nào.Nó hoạt động dựa vào mục đích phát hiện các lỗi bug từ nhỏ cho đến lớn trong phần mềm.Từ đó, đưa ra những định hướng giải quyết để có thể đảm bảo cho phần mềm hoạt động ổn định nhất khi giao cho khách hàng.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/software_testing_26d40f9de9.png" alt="software-testing.png"><h6>Như chúng ta cũng biết công việc gì thì cũng có ưu và nhược điểm của nó và Manual Testing nó cũng vậy.</h6>Về ưu điểm:<ul><li>Manual Testing giúp tiết kiệm chi phí.</li><li>Có được những phản hồi nhanh chóng, trực quan về giao diện thiết kế của phần mềm.</li><li>Khi có thay đổi nhỏ sẽ giúp tiết kiệm thời gian cho việc kiểm tra phần mềm.</li><li>Có nhiều cơ hội chạy thử nghiệm để tìm kiếm lỗi phức tạp, giúp tester nâng cao tay nghề.</li></ul>Về nhược điểm:<ul><li>Tester mất khá nhiều thời gian và công sức để tìm kiếm lỗi.</li><li>Độ tin cậy, tiện lợi của kỹ thuật Test Manual kém hơn so với Automation Test.</li><li>Chỉ hữu ích khi các case kiểm thử chạy một hoặc hai lần, không lặp lại thường xuyên.</li><li>Quá trình Manual Testing không được ghi lại, do đó không có tính tái sử dụng các trường hợp kiểm thử.</li></ul><h3>Một số kỹ thuật Manual Testing cần biết:</h3><ul><li>Kiểm tra giao diện phải đúng design (desktop/mobile, responsive co kéo layout ổn).</li><li>Kiểm tra đúng font-size, color, font-family, font-weight, line-height so với design bằng công cụ <a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont</a></li><li>Link/button phải có trạng thái hover + biểu tượng bàn tay khi hover vào. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cursor_pointer_25461c9376.png" alt="cursor-pointer.png"></li><li>Padding left/right top/bottom đều nhau (trừ 1 số trường hợp đặc biệt).</li><li>Add icon loading site.</li><li>Space giữa các module không được rộng/hẹp quá (desktop/responsive/mobile).</li><li>Không có scroll ngang.</li><li>Có favicon site. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/favicon_site_16696d171e.jpg" alt="favicon-site.jpg"></li></ul><h4>1. Về Logo, Menu, Breadcrumb.</h4><h5>a. Logo + Menu:</h5><ul><li>Logo phải gắn link đến home. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/logo_link_a9a244474a.png" alt="logo-link.png"></li><li>Logo không bị scale hình.</li><li>Có biểu tượng bàn tay đối với menu có link, đích đến đúng link.</li><li>Có trạng thái hover/active.</li><li>Vào menu con phải active menu cha. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/menu_abcc2126a8.png" alt="menu.png"></li><li>Không active 1 lúc 2 menu.</li><li>Scroll xuống dưới pin menu (thay đổi tùy ý, nhưng cần có để tiện cho user).</li><li>Có số phone hoặc email: click vào phải có action đúng. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/phone_bd2fb87ab6.jpg" alt="phone.jpg"></li></ul><h5>b. Breadcrumb:</h5><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/breadcrumb_c190633d5e.png" alt="breadcrumb.png"><ul><li>Đúng cấp menu Home/menu con/Detail.</li><li>Breadcrumb cấp cuối không có link.</li><li>Breadcrumb cấp cha phải về đúng link.</li></ul><h4>2. Search</h4><ul><li>Đối với search ẩn, khi click vào -&gt; hiển thị box search ra.</li><li>Click vào icon search khi chưa điền gì -&gt; hiển thị con trỏ nhấp nháy trong box search.</li><li>Điền text vào box search rồi -&gt; enter hoặc click icon search đều phải có action.</li><li>Search với kí tự đặc biệt trên bàn phím: !@#$%^&amp;*(){}[]&lt;&gt;?/:’” -&gt; xem có lỗi không.</li><li>Page search có định dạng /search?từ khóa /search?q=test hoặc có thể khác tùy theo ngôn ngữ.</li><li>Test kết quả page search: kết quả search dựa theo theo title + detail, ví dụ search “test” sẽ lọc ra tất cả các page có chưa chữ test.</li><li>Page search nhiều kết quả sẽ hiển thị theo paging/Load more hoặc load khi scroll.</li><li>Click kết quả search phải vào đúng page.</li><li>Không lập lại kết quả search.</li></ul><h4>3. Image</h4><ul><li>Một image phải có alt (background thì không cần). <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/alt_image_4c100345e3.png" alt="alt-image.png"></li><li>Alt image hiện đúng như đã nhập, dùng công cụ này để kiểm tra: <a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer Chrome Extension</a></li><li>Image không bị scale.</li><li>Dung lượng image không được to quá (optimize ở https://tinypng.com/) kích thước chuẩn dưới 200kb, đối với hình banner hoặc hình ảnh chất lượng cao thì có thể hơn.</li><li>Kích thước image resize về đúng chuẩn, vd hình đó width height chỉ cần 400x400px nhưng hình ảnh gốc tận 1500x1500 thì resize về đúng hoặc tối đa là gấp đôi là 800x800px.</li></ul><h4>4. Form</h4><ul><li>Form gồm field bắt buộc nhập ( là những field có dấu *) và field không bắt buộc nhập ( là những field không có dấu *). <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/form_9797de383a.png" alt="form.png"></li></ul><h1>&nbsp;</h1><ul><li>Submit khi chưa điền info -&gt; những field bắt buộc phải có border đỏ và dòng text thông báo yêu cầu nhập thông tin (ngược lại những field không bắt buộc thì không cần).</li><li>Email, phone phải điền đúng định dạng mới pass, email có đuôi @, phone gồm số và dấu +.</li><li>Test submit form nhiều lần.</li><li>Điền full thông tin form rồi chờ vài phút sau mới submit (xem có bị timeout).</li><li>Submit form xong phải clear hết info trước đó, hoặc đá đến page thank you. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/submit_form_be3a322a9c.png" alt="submit-form.png"></li></ul><h4>5. Quy tắc thẻ H</h4><ul><li>Đọc bài này để hiểu thêm về thẻ H (https://seotongthe.vn/the-heading/ ).</li><li>1 page phải có 1 thẻ H1.</li><li>Xác định content của 1 page để đặt H cho đúng.</li><li>2 nội dung giống nhau không được để 2 thẻ H khác nhau. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/heading_h_dbcd7990ad.png" alt="heading-h.png"></li></ul><h3>Dưới đây là 1 số tool để chúng ta test:</h3><ul><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">What font</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web developer</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/social-share-preview/ggnikicjfklimmffbkhknndafpdlabib?hl=en">Social Share Preview</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en">ColorPick Eyedropper</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/h-tag/fjigfcghoooegmndmejpoeoodplfmoca?hl=en">H-tag</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp">Screenshot</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp">Responsive</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=vi">Window resize</a> &nbsp;</li></ul><h6>Và cuối cùng, để trở thành một Manual Testing chuyên nghiệp trong tương lai chúng ta cần: bạn phải xác định được hướng đi của bản thân sao cho chính xác nhất như: nên đầu tư cái nào, học hỏi cái nào, rèn luyện kỹ năng như nào, thực hành và vận dụng chúng như thế nào,… Những điều đó sẽ giúp chính bản thân của các bạn quyết tâm hơn nữa, để thắp sáng ngọn lửa đam mê bùng cháy trong lòng các bạn và đưa các bạn đến gần hơn với con đường mơ ước mà mình chọn nha.</h6><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/test_d7a4b6f418.jpg" alt="test.jpg"><h6>Hy vọng rằng, với những thông tin mà mình chia sẻ, bạn đã biết được Manual Testing là gì; cũng như nắm được cách để trở thành một Manual Testing là như thế nào… Chúc các bạn sớm thành công với hoài bão và ước mơ của mình nhé! Và Blog của mình đến đây là hết rồi. Cảm ơn bạn đã đọc đến đây.</h6>

Dưới đây là những chia sẻ về kinh nghiệm Manual Testing của mình đã học hỏi được sau quá trình làm việc tại công ty ABC Software Solution.

Hướng dẫn Manual Testing cơ bản

ADA viết tắt của Americans Disabilities Act là Đạo luật người khuyết tật tại Mỹ, nhằm mục đích giúp người khuyết tật có cơ hội việc làm, có thể mua bán hàng hóa và dịch vụ như người bình thường. Những tiêu chuẩn ADA dần được đưa vào website nhằm giúp người khuyết tật dễ dàng sử dụng hơn, và cũng phù hợp với các tiêu chuẩn WCAG (Web Content Accessibility Guidelines) cấp A, AA và AAA là một bộ tiêu chuẩn trong xây dựng website, được tổ chức W3C đưa ra nhằm xác định cách làm cho nội dung Web dễ tiếp cận hơn với người khuyết tật.Mình làm việc kiểm thử đã nhiều năm nhưng tới khi gặp ADA mình thấy yêu thích hơn bình thường, mình đã tìm hiểu và dành thời gian cho nó rất nhiều, có khoảng thời gian cả cả tháng liền hầu hết thời gian công việc trong ngày của mình đều xoay quanh nó mà không thấy chán (mình xạo đó do đợt đó mình được chia mấy project toàn ADA thôi :))). Sau đây mình xin chia sẻ những kiến thức cơ bản nhất đối với kiểm thử ADA mà mình đã học được:<ul><li>1 site có ADA là sử dụng được bàn phím (cụ thể là nút Tab, Shift+Tab, Enter, Space, Mũi tên lên/xuống/trái/phải…) đối với những element có action như: menu, h1, link, button, form, dropdown… nghĩa là nó thay thế được hành động dùng chuột.</li><li>site có ADA khi sử dụng bàn phím sẽ đi từ trái sang phải, trên xuống dưới, không bỏ sót 1 element có action nào.</li><li>Có nhiều cách để check ADA, cách phổ biến nhất là manual bàn phím, dùng tool (tool đọc và extension check lỗi), view source code.</li></ul>A. ADA manual:1. Border focus:<ul><li>Là trạng thái cho thấy trỏ chuột của bạn đang đứng tại vị trí đó của website, nó là 1 border bao quanh element.</li><li>Đôi lúc mặc định của nó là border mảnh và khó nhìn nhưng dev có thể chỉnh màu sáng và hợp lý với layout của site hơn.</li><li>Khi dùng bàn phím thì border sẽ nhảy đúng theo thứ tự mọi action của bạn: ví dụ tab thì nhảy sang phải, shift+tab thì nhảy sang trái.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_11_31_07_78f90573b1.png" alt="Screenshot 2022-08-19 at 11.31.07.png">2. Keyboard:<ul><li>Tab/Shift+Tab: dùng tab để đi đến 1 element từ trái sang phải và shift+tab là trở về action trước.</li><li>Enter/Space: action đi tới đích, space = enter ở những trường hợp sau:<ul><li>Đóng mở menu</li><li>Open/close popup image/video.</li><li>Play/pause video/gift image.</li><li>Button slide &lt;&gt;, slide dot.</li><li>Content dạng tab.</li><li>Mũi tên expand/collage.</li></ul></li><li>Mũi tên lên/xuống trái/phải: mũi tên trái phải = tab/shift+tab, mũi tên lên/xuống để rút ngắn thời gian đi (ví dụ 1 menu có 8 submenu con chia là 3 hàng 3/3/2 từ vị trí số 2 hàng thứ nhất đi xuống số 2 của hàng thứ 2 nếu dùng tab sẽ đi hết hàng đầu mới xuống hàng 2, nhưng dùng mũi tên lên xuống sẽ di chuyển nhanh hơn).</li><li>Phím Home: focus item đầu tiên menu chính cùng cấp.</li><li>Phím End: focus item cuối cùng menu chính cùng cấp.</li><li>ESC = close action (tắt popup, tắt submenu…)</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_y_K_Zd_S_Vvq_Oty5c1_C_Io4_Diw_8ff4c47939.png" alt="1_yKZd-SVvqOty5c1CIo4Diw.png">3. Skip to content<ul><li>1 site&nbsp;phải có Skip to content.</li><li>Dùng&nbsp;enter/space đều Skip to content được.</li><li>Khi enter/space phải skip qua menu và&nbsp;focus vào element tiếp theo (thường là H1).</li><li>Đối với banner có video check xem sau khi Skip to content có bị&nbsp;pass qua Play/Pauser video không (vì vị trí tab của&nbsp;play/pause&nbsp;video đang trước H1).</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_15_06_13_81e0c56c0a.png" alt="Screenshot 2022-08-19 at 15.06.13.png">4. Menu header<ul><li>Tab tới menu tự mở (tùy yêuầu, có site yêu cầu tự mở, site không).</li><li>Đối với submenu tự mở, nếu menu cha có link thì chủ động thêm submenu overview cho nó, không thì thôi (t yêu cầu).</li><li>Submenu phải enter/space= open/collape menu được, khi mở menu này thì menu khác phải đóng lại.</li><li>Sử dụng được phím&nbsp;mũi tên lên/xuống di chuyển&nbsp;menu cha với submenu.</li><li>Sử dụng được phím&nbsp;mũi&nbsp;tên trái/phải di chuyển&nbsp;giữa các menu.</li><li>Sau khi tab hết menu đến element tiếp theo thì submenu phải đóng lại. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/top_navigation_bar_2d546b4841.png" alt="top-navigation-bar.png"></li></ul>5. Logo&nbsp;Header/Footer<ul><li>Logo bắt buộc phải có alt.</li><li>Thứ tự đọc: ưu tiên đọc title -&gt; không có title thì đọc alt.</li></ul>6. Search<ul><li>Enter/space&nbsp;open được box.</li><li>Focus trỏ chuột vào box.</li><li>Shift+tab&nbsp;focus&nbsp;chọn hết&nbsp;từ khóa.</li></ul>7. Image<ul><li>Image phải có alt (trừ background và những image icon không có nghĩa/chức năng).</li><li>Alt phải có nghĩa và liên quan đến image/content.</li><li>Alt lấy đúng (có trường hợp có nhập alt image nhưng lúc hiển thị ra là tên file image).</li></ul>B. ADA Tool test1 số tool cơ bản như: Screen Reader&nbsp;extension, NVDA tool (phần mềm cài vào máy), Mac Voice over (mặc định có trên Mac), Axe&nbsp;extension, Wave extension…Thao tác y như test manual nhưng bật tool (Window: (Screen Reader/ NVDA), Mac: Voice over) lên, lưu ý mỗi lần nên mở 1 tool để không bị xung đột tiếng.C. Check ADA trên trình duyệtCùng 1 thao tác tương tự nhưng check trên:<ul><li>Manual trên&nbsp;Firefox</li><li>NVDA trên Firefox</li><li>Manual trên Mac:&nbsp;Chrome/Safari/Firefox</li><li>Mac over trên Chrome/Safari/Firefox</li></ul>D. ADA thuộc tính (view element)1. Tính năng phóng to thu nhỏ<ul><li>Xóa&nbsp;user-scalable="no"&nbsp;ra&nbsp;khỏi&nbsp;thuộc&nbsp; tính&nbsp; của&nbsp;&nbsp;để&nbsp;cho&nbsp;phép&nbsp; phóng&nbsp;to&nbsp;và&nbsp;đảm&nbsp;bảo&nbsp;maximum-scale&nbsp;tham&nbsp;số&nbsp;không&nbsp;nhỏ&nbsp;hơn&nbsp;2. (search trong code, nếu có&nbsp;thuộc tính này&nbsp;trong iframe thì pass vì không can thiệp được).</li><li>Phóng&nbsp;to/thu&nbsp;nhỏ&nbsp;màn&nbsp;hình&nbsp;xem&nbsp;layout&nbsp;có&nbsp;vỡ&nbsp;không&nbsp;(ở&nbsp;mức&nbsp;tương&nbsp;đối),&nbsp;zoom&nbsp;đến&nbsp;150%.</li></ul>2. External link<ul><li>arial-label="title+open new tab/window".</li><li>Nghĩa là&nbsp;link&nbsp;External thì thêm đọc open new tab/window.</li><li>Trừ trường hợp link external trong content thì không cần quan tâm.</li></ul>3. Thuộc tính lang="language”Đảm&nbsp;bảo&nbsp;rằng HTML&nbsp;đều&nbsp;có&nbsp;thuộc&nbsp;tính&nbsp;lang&nbsp;hoặc&nbsp;xml: lang&nbsp; và&nbsp;giá trị&nbsp;của&nbsp;thuộc&nbsp;tính&nbsp;là&nbsp;giá&nbsp;trị&nbsp; hợp&nbsp;lệ. (chỉ cần check có&nbsp;lang ="language" không thôi) <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_06_53_3520bca85f.png" alt="Screenshot 2022-08-19 at 17.06.53.png">4. Menu Navigation<ul><li>role="menubar" bọc&nbsp;role="menuitem"</li><li>aria-expanded="false" khi chưa mở&nbsp;sub-menu,</li><li>aria-expanded="true" khi mở sub-menu</li><li>role="button" vì menu cha không link</li><li>aria-controls="idnguyensub_menu" <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_08_11_5cf04321bc.png" alt="Screenshot 2022-08-19 at 17.08.11.png"></li></ul>5. Image popupChưa bật popup<ul><li>aria-label="open image popup"</li><li>aria-haspopup="dialog"</li></ul>6. Popup<ul><li>role="dialog"</li><li>aria-label="nội dung text trên popup"</li><li>Aria-hidden="false" Chú ý: khi bật popup tab thì vẫn phải nằm trong vùng control nghĩa là tab không được xuống vùng content bên dưới popup.</li></ul>7. sr-only: Nếu sr-only trùng với aria-label thì sẽ xóa bớt sr-only <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_09_01_cf23eacb5a.png" alt="Screenshot 2022-08-19 at 17.09.01.png">8. Blog Post/Related<ul><li>Bọc&nbsp;</li></ul>trong 1 thẻ&nbsp;.9. Tab<ul><li>role="tablist" đối với list tab</li><li>role="tab" đối với từng tab</li><li>aria-selected="true" khi select tab</li><li>aria-selected="false" đối với tab không chọn</li><li>aria-hidden="false"&nbsp;đối&nbsp;với&nbsp;tab&nbsp;hiển thị</li><li>aria-hidden="true"&nbsp;đối&nbsp;với&nbsp;tab&nbsp;ẩn</li><li>id="tab-0" (1,2,3,4)</li><li>aria-controls="content-1" (content&nbsp;của tab đó) <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_10_13_b33d86daae.png" alt="Screenshot 2022-08-19 at 17.10.13.png"></li></ul>10. Iframe: iframe phải có title11. Tabindex<ul><li>Fom, button, : default có tabindex rồi nên chúng ta không cần thêm nhé.</li></ul>

ADA viết tắt của Americans Disabilities Act là Đạo luật người khuyết tật tại Mỹ, nhằm mục đích giúp người khuyết tật có cơ hội việc làm, có thể mua bán hàng hóa và dịch vụ như người bình thường.

Kiểm thử

Categories

Liên hệ