Kiểm thử biểu mẫu

Trong các mô-đun trước, bạn đã tìm hiểu cách tạo biểu mẫu, giúp người dùng tránh nhập lại dữ liệu và cách xác thực dữ liệu biểu mẫu. Làm cách nào để đảm bảo biểu mẫu dùng được? Bạn có thể kiểm tra và phân tích biểu mẫu để trả lời câu hỏi này.

Biểu mẫu của bạn có hoạt động trên các thiết bị khác không?

Bạn bắt đầu bằng cách xác nhận rằng biểu mẫu đang hoạt động trên thiết bị của bạn. Tuy nhiên, có nhiều loại thiết bị mà người dùng có thể sử dụng. Làm cách nào để kiểm tra xem biểu mẫu có hoạt động với các thiết bị khác hay không?

Trước tiên, hãy kiểm tra biểu mẫu của bạn trên máy tính. Sau đó, chỉ thử sử dụng bàn phím. Tiếp theo, hãy kiểm thử tính năng này trên điện thoại. Giờ đây, bạn đã kiểm thử biểu mẫu với nhiều phương thức nhập (bàn phím, thao tác chạm và chuột), kích thước màn hình, trình duyệt và hệ điều hành khác nhau.

Bạn có thể thử nghiệm trên nhiều thiết bị khác không? Hãy kiểm tra biểu mẫu trên tất cả các miền đó. Bạn càng có thể thử nghiệm càng nhiều thiết bị, trình duyệt, phiên bản trình duyệt và hệ điều hành thì càng tốt!

Bạn cũng có thể sử dụng dịch vụ kiểm thử để kiểm thử biểu mẫu trên nhiều trình duyệt, phiên bản trình duyệt, thiết bị và hệ điều hành. BrowserStack cung cấp các tài khoản kiểm thử miễn phí cho các dự án nguồn mở, để cho phép kiểm thử trên nhiều trình duyệt, thiết bị và hệ điều hành.

Làm cách nào để kiểm tra xem biểu mẫu của bạn có phù hợp với người khác không?

Biểu mẫu đầu tiên của bạn đã sẵn sàng. Bạn dành nhiều thời gian để đảm bảo ứng dụng hoạt động tốt. Làm cách nào để xác nhận rằng biểu mẫu của bạn phù hợp với mọi người? Bước đầu tiên, bạn có thể nhờ bạn bè và đồng nghiệp điền vào biểu mẫu của mình.

Ngồi cạnh nhau hoặc chia sẻ màn hình. Bằng cách này, bạn có thể xem cách họ tương tác với biểu mẫu của mình. Xem trẻ điền vào biểu mẫu. Đề nghị trẻ nói to những việc trẻ đang làm và xem trẻ có gặp vấn đề nào không. Sau khi học viên hoàn thành việc cần làm, hãy đặt câu hỏi cho học viên. Bạn có biết rõ họ cần điền thông tin gì không? Họ có gặp vấn đề nào khi điền vào biểu mẫu không? Có điều gì không rõ ràng không? Những câu hỏi này sẽ giúp bạn tạo biểu mẫu tốt hơn nữa.

Làm cách nào để đo lường hiệu suất của biểu mẫu?

Bạn đã xác nhận rằng người khác có thể sử dụng biểu mẫu của bạn. Bước tiếp theo, bạn nên đo lường hiệu suất của biểu mẫu. Chúng tôi có các công cụ miễn phí để bạn thực hiện việc này. Hãy cùng khám phá một số giải pháp.

Thông tin chi tiết về tốc độ trang (PSI)

PSI đo lường hiệu suất của trang web và đưa ra gợi ý về cách cải thiện hiệu suất trang web.

Hãy dùng thử: PageSpeed cung cấp báo cáo hiệu suất bằng dữ liệu thực tế và phòng thí nghiệm. Trang web tải nhanh là dấu hiệu đầu tiên cho thấy biểu mẫu của bạn hữu dụng được. Trang web của bạn chưa tải nhanh? PSI hiển thị cho bạn các đề xuất về cách cải thiện hiệu suất.

Xem lại báo cáo về trang web mà bạn từng kiểm tra bằng PSI. Bạn xem thông tin về Các chỉ số quan trọng về trang web? Đây là phần tóm tắt nếu trang web của bạn đáp ứng tiêu chí Các chỉ số quan trọng về trang web. Các chỉ số quan trọng về trang web giúp bạn hiểu cách người dùng trải nghiệm một trang web.

Ngọn hải đăng

Lighthouse giúp bạn xác định hiệu suất, tối ưu hoá cho công cụ tìm kiếm (SEO), các phương pháp hay nhất và vấn đề về hỗ trợ tiếp cận.

Có nhiều cách để sử dụng Lighthouse. Một lựa chọn là chạy trực tiếp trong DevTools. Mở URL có biểu mẫu của bạn trong Chrome, mở Công cụ cho nhà phát triển, chuyển sang thẻ Lighthouse và chạy quy trình kiểm tra.

Chỉ số hiệu suất từ PSI sẽ xuất hiện. Ngoài ra, Lighthouse sẽ kiểm tra trang web của bạn theo các vấn đề về SEO, các phương pháp hay nhất và khả năng hỗ trợ tiếp cận. Bạn quên kết nối nhãn với tùy chọn kiểm soát biểu mẫu? Lighthouse sẽ cảnh báo và cung cấp cho bạn hướng dẫn để khắc phục vấn đề.

Công cụ giúp xác định các vấn đề thường gặp

Có nhiều công cụ giúp bạn xác định các vấn đề thường gặp. Bạn có thể sử dụng tiện ích Trình khắc phục sự cố biểu mẫu. Trang này cảnh báo cho bạn về việc thiếu các thuộc tính autocomplete, các thuộc tính không chuẩn, bị thiếu hoặc không có nhãn, v.v.

Bạn cũng có thể sử dụng một công cụ đánh giá khả năng hỗ trợ tiếp cận như WAVE hoặc axe. Các công cụ này sẽ thông báo cho bạn về việc thiếu nhãn, thiếu kết nối giữa nhãn và các chế độ điều khiển biểu mẫu, độ tương phản không đủ màu và nhiều vấn đề khác về hỗ trợ tiếp cận.

Làm cách nào để giám sát trải nghiệm với biểu mẫu?

Việc theo dõi trải nghiệm người dùng thực tế trên biểu mẫu giúp bạn nhanh chóng xác định được các vấn đề mới. Hãy xem cách bạn có thể giám sát biểu mẫu của mình.

PSI

Một cách để giám sát trải nghiệm là sử dụng lại PSI. Bạn có thể sử dụng API PI để xây dựng công cụ theo dõi của riêng mình: API PageSpeed Insights giải thích cách thực hiện việc này.

PSI bao gồm dữ liệu từ tập dữ liệu Báo cáo trải nghiệm người dùng của Chrome (CrUX), nếu có cho URL đã cho. Bằng cách này, bạn cũng có thể xem dữ liệu thực địa ngay trong báo cáo.

Ngọn hải đăng

Bạn có thể dùng Lighthouse làm công cụ dòng lệnh, dưới dạng mô-đun nút hoặc với công cụ CI Lighthouse. Tính năng giám sát hiệu suất bằng Lighthouse CI giải thích việc thêm Lighthouse vào một hệ thống tích hợp liên tục, chẳng hạn như GitHub Actions.

Hiện có thêm nhiều tools khác để đo lường và theo dõi trang web của bạn. Một số có sẵn dưới dạng các công cụ web, một số cho phép bạn chạy kiểm tra trên dòng lệnh và một số cung cấp API để tích hợp vào các công cụ của bạn.

Cách phân tích biểu mẫu

Bạn đã thử nghiệm biểu mẫu của mình với người dùng thực tế và tìm hiểu cách đo lường cũng như theo dõi biểu mẫu. Làm cách nào để bạn thu thập số liệu thống kê về người dùng và cách họ tương tác với biểu mẫu của bạn? Bạn có thể sử dụng công cụ phân tích. Hãy cùng tìm hiểu về công cụ này và cách hoạt động của hệ thống này.

Số liệu phân tích

Một công cụ mà bạn có thể sử dụng là Google Analytics (GA). Sau khi thiết lập, bạn sẽ nhận được một đoạn mã JavaScript mà bạn đưa vào mỗi trang trên trang web của mình. Từ thời điểm này, bạn có thể tìm hiểu cách mọi người sử dụng trang web của bạn.

Có bao nhiêu người truy cập vào trang có biểu mẫu của bạn trên đó? Có bao nhiêu người điền thông tin vào biểu mẫu và chuyển sang trang tiếp theo? Bạn sẽ tìm được câu trả lời cho những câu hỏi này bằng cách sử dụng các công cụ phân tích.

Bạn cũng có thể thiết lập các báo cáo phân tích nâng cao hơn. Bạn muốn theo dõi có bao nhiêu người dùng nhấp vào nút Gửi? Bạn có thể xác định và tích hợp sự kiện để phân tích việc này.

Có rất nhiều công cụ phân tích. Một số phong cách tối giản, một số mang đến nhiều lựa chọn để cá nhân hoá. Hãy thử một loạt các công cụ để tìm ra công cụ phù hợp nhất với nhu cầu của bạn.

Kiểm tra kiến thức

Kiểm tra kiến thức về biểu mẫu kiểm thử

Dữ liệu thực địa là gì?

Dữ liệu được thu thập trên một hiện trường.
Hãy thử lại!
Dữ liệu từ người dùng thực.
🎉
Dữ liệu từ các điều kiện thực tế.
🎉
Dữ liệu được thu thập trong phòng thí nghiệm.
Hãy thử lại!

tròn thu thập chỉ số từ:

người dùng thực
🎉
người dùng được chọn trước
Thử lại
trình duyệt được xác định trước
Thử lại
trình duyệt của người dùng cuối
🎉

Tài nguyên