Giới thiệu về Thử nghiệm Frontend

Kiểm tra mã frontend vẫn là một thực hành khó hiểu cho nhiều nhà phát triển. Nhưng với sự phát triển frontend trở nên phức tạp hơn và với các nhà phát triển chịu trách nhiệm về sự ổn định và nhất quán hơn bao giờ hết, thử nghiệm frontend phải được chấp nhận như một công dân bằng nhau trong cơ sở mã của bạn. Chúng tôi phá vỡ các tùy chọn thử nghiệm khác nhau của bạn và giải thích những tình huống nào chúng được sử dụng tốt nhất cho.

Thử nghiệm frontend là một thuật ngữ chăn bao gồm nhiều chiến lược thử nghiệm tự động. Một số trong số này, như thử nghiệm đơn vị và tích hợp, đã được thực hành tốt nhất được chấp nhận trong cộng đồng phát triển phụ trợ trong nhiều năm. Các chiến lược khác là mới hơn và xuất phát từ những thay đổi trong phần phát triển phụ trợ và giao diện trước được sử dụng cho bây giờ.

Đến cuối bài viết này, bạn sẽ cảm thấy thoải mái khi đánh giá các chiến lược thử nghiệm nào phù hợp nhất với nhóm và codebase của bạn. Các ví dụ mã sau đây sẽ được viết bằng cách sử dụng khung Jasmine, nhưng các quy tắc và quy trình tương tự trên hầu hết các khung thử nghiệm.

• Phần mềm kiểm tra người dùng tốt nhất

01. Thử nghiệm đơn vị

Kiểm tra đơn vị, một trong những cựu chiến binh thử nghiệm, ở mức thấp nhất của tất cả các loại thử nghiệm. Mục đích của nó là để đảm bảo các bit nhỏ nhất mã của bạn (được gọi là đơn vị) hoạt động độc lập như mong đợi.

Hãy tưởng tượng bạn có một lego đặt cho một ngôi nhà. Trước khi bạn bắt đầu xây dựng, bạn muốn đảm bảo mỗi mảnh riêng lẻ được tính cho (năm ô vuông màu đỏ, ba hình chữ nhật màu vàng). Kiểm tra đơn vị là đảm bảo rằng các bộ mã riêng lẻ - những thứ như xác thực và tính toán đầu vào - đang hoạt động như dự định trước khi xây dựng tính năng lớn hơn.

Nó giúp suy nghĩ về các bài kiểm tra đơn vị song song với câu thần chú 'làm một điều tốt'. Nếu bạn có một đoạn mã với một trách nhiệm duy nhất, bạn có thể muốn viết một bài kiểm tra đơn vị cho nó.

Hãy xem đoạn mã mã sau, trong đó chúng tôi đang viết một bài kiểm tra đơn vị cho một máy tính đơn giản:

 Mô tả ("Hoạt động tính toán", hàm () {
  nó ("nên thêm hai số", hàm () {
    Máy tính.init ();
    kết quả var = máy tính.addnumbers (7,3);
    mong đợi (kết quả) .tobe (10);
  });
}); 

Trong chúng ta Máy tính Ứng dụng, chúng tôi muốn đảm bảo rằng các tính toán luôn hoạt động độc lập theo cách mà chúng tôi mong đợi. Trong ví dụ, chúng tôi muốn đảm bảo rằng chúng tôi luôn có thể thêm chính xác hai số với nhau.

Điều đầu tiên chúng tôi làm là mô tả một loạt các bài kiểm tra chúng tôi sẽ chạy bằng cách sử dụng Jasmine diễn tả . Điều này tạo ra một bộ kiểm tra - một nhóm các thử nghiệm liên quan đến một khu vực cụ thể của ứng dụng. Đối với máy tính của chúng tôi, chúng tôi sẽ nhóm từng bài kiểm tra tính toán trong bộ riêng của nó.

Suites là tuyệt vời không chỉ cho tổ chức mã, mà vì chúng cho phép bạn tự chạy Suites. Nếu bạn đang làm việc trên một tính năng mới cho một ứng dụng, bạn không muốn chạy mọi thử nghiệm trong quá trình phát triển tích cực, vì điều đó sẽ rất tốn thời gian. Thử nghiệm Suites riêng cho phép bạn phát triển nhanh hơn.

Tiếp theo, chúng tôi viết các bài kiểm tra thực tế của chúng tôi. Sử dụng nó Chức năng, chúng tôi viết tính năng hoặc phần chức năng mà chúng tôi đang thử nghiệm. Ví dụ của chúng tôi kiểm tra chức năng bổ sung, vì vậy chúng tôi sẽ chạy các kịch bản xác nhận rằng nó hoạt động chính xác.

Sau đó, chúng tôi viết khẳng định kiểm tra của chúng tôi, đó là nơi chúng tôi kiểm tra nếu mã của chúng tôi có chức năng như chúng tôi mong đợi. Chúng tôi khởi tạo máy tính của chúng tôi và chạy addnumbers. Chức năng với hai số chúng tôi muốn thêm. Chúng tôi lưu trữ số là kết quả, và sau đó khẳng định rằng điều này bằng số chúng tôi mong đợi (trong trường hợp của chúng tôi, 10).

Nếu addnumbers. Không trả lại các số liệu chính xác, bài kiểm tra của chúng tôi sẽ thất bại. Chúng tôi sẽ viết các bài kiểm tra tương tự cho các phép tính khác của chúng tôi - trừ, nhân, v.v.

02. Thử nghiệm chấp nhận

Nếu các bài kiểm tra đơn vị giống như kiểm tra từng mảnh lego, các thử nghiệm chấp nhận đang kiểm tra xem mỗi giai đoạn của tòa nhà có thể được hoàn thành hay không. Chỉ vì tất cả các mảnh được hạch toán không có nghĩa là các hướng dẫn được thực thi đúng và sẽ cho phép bạn xây dựng mô hình cuối cùng.

Các thử nghiệm chấp nhận Đi qua ứng dụng đang chạy của bạn và đảm bảo các hành động được chỉ định, đầu vào của người dùng và luồng người dùng là đủ khả năng và hoạt động.

Chỉ vì ứng dụng của chúng tôi addnumbers. Hàm trả về đúng số, không có nghĩa là giao diện máy tính chắc chắn sẽ hoạt động như mong đợi để cung cấp kết quả phù hợp. Điều gì sẽ xảy ra nếu các nút của chúng tôi bị vô hiệu hóa, hoặc kết quả tính toán không được hiển thị? Kiểm tra chấp nhận giúp chúng tôi trả lời những câu hỏi này.

 Mô tả ("Đăng ký Trạng thái thất bại", hàm () {
  nó ("không nên cho phép đăng ký với thông tin không hợp lệ", hàm () {
    var trang = truy cập ("/ home");
    page.fill_in ("đầu vào [tên = 'email']", "không phải là email");
    Trang. Nhấp vào (nút Nút [Type = Gửi] ");
    Trang. Nhấp vào (nút Nút [Type = Gửi] ");
    mong đợi (trang.find ("# signuperror"). HasClass ("ẩn")). tobefalsy ();
  });
}); 

Cấu trúc trông rất giống với bài kiểm tra đơn vị của chúng tôi: Chúng tôi xác định một bộ với diễn tả , sau đó viết bài kiểm tra của chúng tôi trong nó Chức năng, sau đó thực hiện một số mã và kiểm tra kết quả của nó.

Tuy nhiên, thay vì thử nghiệm xung quanh các chức năng và giá trị cụ thể, tuy nhiên, ở đây chúng ta đang thử nghiệm để xem một quy trình làm việc cụ thể nào (luồng đăng ký) hoạt động như mong đợi khi chúng ta điền vào một số thông tin xấu. Có nhiều hành động phút xảy ra ở đây, chẳng hạn như xác nhận biểu mẫu có thể được kiểm tra đơn vị, cũng như bất kỳ xử lý nào cho những gì hiển thị trạng thái lỗi của chúng tôi, được chứng minh bởi một phần tử có ID Signuperror. .

Các bài kiểm tra chấp nhận là một cách tuyệt vời để đảm bảo các luồng kinh nghiệm chính luôn hoạt động chính xác. Nó cũng dễ dàng thêm các thử nghiệm xung quanh các trường hợp cạnh, và để giúp các nhóm QA của bạn tìm thấy chúng trong ứng dụng của bạn.

Khi xem xét những gì để viết các bài kiểm tra chấp nhận cho, những câu chuyện người dùng của bạn là một nơi tuyệt vời để bắt đầu. Làm thế nào để người dùng của bạn tương tác với trang web của bạn, và kết quả mong đợi của sự tương tác đó là gì? Nó khác nhau để kiểm tra đơn vị, phù hợp hơn với một cái gì đó như các yêu cầu chức năng, chẳng hạn như các yêu cầu xung quanh một trường xác thực.

03. Kiểm tra hồi quy trực quan

Như đã đề cập trong phần giới thiệu, một số loại thử nghiệm là duy nhất cho thế giới frontend. Đầu tiên trong số này là thử nghiệm hồi quy trực quan. Điều này không kiểm tra mã của bạn, nhưng thay vì so sánh kết quả được hiển thị mã của bạn - giao diện của bạn - với phiên bản kết xuất của ứng dụng của bạn trong sản xuất, dàn dựng hoặc môi trường địa phương đã thay đổi trước.

Điều này thường được thực hiện bằng cách so sánh các ảnh chụp màn hình được thực hiện trong trình duyệt không đầu (một trình duyệt chạy trên máy chủ). Các công cụ so sánh hình ảnh sau đó phát hiện bất kỳ sự khác biệt nào giữa hai bức ảnh.

Sử dụng một công cụ như Phantomcss, các thử nghiệm của bạn chỉ định nơi người chạy kiểm tra sẽ điều hướng đến, chụp ảnh màn hình và khung công tác cho bạn thấy sự khác biệt xuất hiện trong các chế độ xem đó.

 casper.start ("/ home"). Sau đó (hàm () {

  // trạng thái ban đầu của mẫu
  Phantomcss.screenShot ("# đăng ký", "Đăng ký mẫu");

  // nhấn nút đăng ký (nên kích hoạt lỗi)
  Casper.Click ("Nút # Đăng ký");

  // chụp ảnh màn hình của thành phần UI
  Phantomcss.screenShot ("# Đăng ký", "Lỗi biểu mẫu đăng ký");

  // điền vào mẫu theo thuộc tính & amp; Gửi đi
  Casper.fill ("# đăng ký", {
    Tên: "Alicia Sedlock",
    Email: "[email protected]"
  }, thật);

  // thực hiện một ảnh chụp màn hình thứ hai của trạng thái thành công
 Phantomcss.screenShot ("# Đăng ký", "Đăng ký thành công");
}); 

Không giống như sự chấp nhận và thử nghiệm đơn vị, kiểm tra hồi quy trực quan khó hưởng lợi từ nếu bạn đang xây dựng một cái gì đó mới. Khi giao diện người dùng của bạn sẽ thấy các thay đổi nhanh chóng và quyết liệt trong suốt quá trình phát triển tích cực, bạn có thể sẽ lưu các thử nghiệm này khi các phần của giao diện hoàn tất trực quan. Do đó, các bài kiểm tra hồi quy trực quan là các thử nghiệm cuối cùng bạn nên viết.

Hiện tại, nhiều công cụ hồi quy trực quan đòi hỏi một chút nỗ lực thủ công. Bạn có thể phải chạy ảnh chụp màn hình của mình trước khi bạn bắt đầu phát triển trên nhánh của mình hoặc cập nhật thủ công Ảnh chụp màn hình cơ sở khi bạn thực hiện các thay đổi đối với giao diện.

Điều này chỉ đơn giản là do bản chất của sự phát triển - thay đổi đối với UI. Có thể cố ý, nhưng các bài kiểm tra chỉ biết 'Có, điều này giống nhau' hoặc 'Không, điều này khác'. Tuy nhiên, nếu hồi quy trực quan là điểm đau trong ứng dụng của bạn, cách tiếp cận này có thể tiết kiệm thời gian và nỗ lực của nhóm, so với liên tục sửa chữa hồi quy.

04. Khả năng truy cập và kiểm tra hiệu suất

Khi văn hóa và nhận thức xung quanh thử nghiệm frontend phát triển, khả năng kiểm tra các khía cạnh khác nhau của hệ sinh thái. Với sự tập trung gia tăng vào khả năng tiếp cận Và hiệu suất trong văn hóa kỹ thuật của chúng tôi, tích hợp điều này vào bộ thử nghiệm của bạn giúp đảm bảo các khái niệm này vẫn là ưu tiên.

Nếu bạn gặp vấn đề về ngân sách hiệu suất hoặc tiêu chuẩn trợ năng, đây là cách để giữ những yêu cầu này đi đầu trong tâm trí của mọi người.

Cả hai kiểm tra này đều có thể được tích hợp vào quy trình làm việc của bạn với các công cụ xây dựng như Grunt và Gulp hoặc bán thủ công trong thiết bị đầu cuối của bạn. Đối với ngân sách hiệu suất, một công cụ như Grunt-PerfBudget cung cấp cho bạn khả năng tự động chạy trang web của mình thông qua Webpagetest trong một tác vụ được chỉ định.

Tuy nhiên, nếu bạn không sử dụng Trình chạy nhiệm vụ, bạn cũng có thể lấy PerfBudget dưới dạng mô-đun NPM độc lập và chạy các thử nghiệm theo cách thủ công.

Đây là những gì nó trông giống như chạy điều này thông qua thiết bị đầu cuối:

 Perfbudget --url http://www.alicilic.com - phím API [webpagetest] --Sped Index 2000 --Render 400

Và tương tự, thiết lập qua tiếng càu nhàu:

PERFBUDGET: {
  mặc định: {
    Tùy chọn: {
      URL: 'http://alicited.com.com,
      Khóa: 'Khóa API Webpagetest',
      Ngân sách: {
        Speed ​​Index: '2000',
        Render: '400'
      Không thể
    Không thể
  Không thể
Không thể

[...]

Grunt.RegisterTask ('Mặc định', ['jshint', 'perfbudget']); 

Các tùy chọn tương tự có sẵn để kiểm tra khả năng truy cập. Vì vậy, đối với PA11Y, bạn có thể chạy PA11Y. Lệnh trong trình duyệt của bạn để đầu ra hoặc thiết lập một tác vụ để tự động hóa bước này. Trong nhà ga:

 PA11Y CỨNG

// như một lệnh javascript sau khi cài đặt NPM

var pa11y = yêu cầu ('pa11y'); // yêu cầu PA11Y.
var test = pa11y (); // Nhận PA11Y sẵn sàng để thiết lập

Test.Run ('Ítmody.com', chức năng (lỗi, kết quả) {
  // Đăng nhập Parse kết quả của bạn
}); 

Hầu hết các công cụ trong các danh mục này đều khá cắm và chạy, nhưng cũng cung cấp cho bạn tùy chọn để tùy chỉnh cách các bài kiểm tra được chạy - ví dụ: bạn có thể đặt chúng để bỏ qua các tiêu chuẩn WCAG nhất định.

Trang tiếp theo: Cách giới thiệu thử nghiệm vào quy trình làm việc của bạn

• 1.
• 2.

Trang hiện tại: Các loại bài kiểm tra frontend khác nhau (và khi nào nên sử dụng chúng)