Giới thiệu về thử nghiệm giao diện người dùng

Cách bắt đầu thử nghiệm các ứng dụng giao diện người dùng bằng Mocha và Chai

Cảnh báo: bài đăng này đã cũ và có thể không phản ánh tình trạng hiện tại của nghệ thuật

Mocha là một công cụ kiểm tra tuyệt vời và linh hoạt. Có rất nhiều khuôn khổ thử nghiệm ngoài kia, và tôi chọn Mocha vì tính phổ biến và dễ sử dụng của nó.

Đầu tiên chúng ta hãy xem cách chạy các bài kiểm tra trong một trình duyệt. Tải xuống


Đặt các tệp mocha.js, chai.js, chai-jquery.js tương ứng trong một thử nghiệm / thư mục con trên trang web của bạn.

Chọn tệp index.html của bạn và tải chúng, sau đó chúng tôi sẽ thiết lập Mocha để sử dụng kiểu thử nghiệm BDD và chúng tôi sẽ tải trong tệp có tên test.web.js, tệp này sẽ lưu trữ các quy tắc thử nghiệm của chúng tôi.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

Bên trong cơ thể của bạn, hãy đặt một div # mocha:

<div id="mocha"></div>

tệp test / test.web.js là phần chính của trò chơi và nó sẽ lưu trữ các quy tắc thử nghiệm.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})

describe(‘After this’, function() { it(‘should be logged in’, function(done) { expect($(’#the-main-div’)).to.exist; done(); }); });

Các bài kiểm tra đó hiện có thể được chạy bên trong trình duyệt, bằng cách mở bảng điều khiển trình duyệt và gõmocha.run().

Điều này thật tuyệt vì trong khi chạy thử nghiệm, bạn có thể xem sự thay đổi của màn hình và đọc các thông báo trên bảng điều khiển.

Sử dụngPhantomJS- một triển khai WebKit không đầu - bạn có thể chạy các bài kiểm tra trong thiết bị đầu cuối. Nhược điểm là PhantomJS không phải là môi trường thực nơi mã của bạn sẽ thực thi, nhưng nó tốt hơn để tự động phát hiện các vấn đề.

Làm thế nào để làm nó? Tải xuống và cài đặt PhantomJS. Cài đặt Mocha bằng cách sử dụng toàn cầunpmcài đặt:npm install -g mocha. Tải xuống gói nàyhttps://github.com/Backbonist/front-testsvà đặt nó vào thư mục dự án của bạn, trong phần kiểm tra / ví dụ.

Sau đó, bạn có thể chạy các bài kiểm tra của mình bằng cách gọiphantomjs run-mocha.js http://test-site.com

Vấn đề với cách tiếp cận này là bạn không thể thực hiện theo chương trình các bài kiểm tra chạy trong môi trường thực nơi chúng sẽ chạy. Đó thực sự không phải là vấn đề khi vẫn xây dựng các nguyên mẫu và phát triển trước khi mở ra công chúng, nhưng khi trong quá trình sản xuất, bạn không muốn chạy bộ thử nghiệm từ trình duyệt mỗi khi bạn muốn thử nghiệm. Trên mọi trình duyệt, phải không?Testemđược thực hiện cho điều này. Nó chỉ là một trình chạy thử nghiệm, khung thử nghiệm bất khả tri, vì vậy nó có thể chạy Mocha, Jasmine, QUnit hoặc những gì bạn sử dụng.

  1. $ npm install testem -g

  2. vào thư mục thử nghiệm của ứng dụng của bạn, nhập$ testem

  3. mở trình duyệt đến vị trí được chỉ định để chạy thử nghiệm.

Bạn có thể chạy thử nghiệm trên bất kỳ trình duyệt nào bạn muốn bằng cách khởi chạy chúng hoặc yêu cầu testem chạy thử nghiệm cho bạn bằng cách khởi chạy

$ testem -l Chrome,Safari

Bạn cũng có thể sử dụng testem ở chế độ CI (Tích hợp liên tục).

$ testem ci

điều này sẽ tự động khởi chạy các bài kiểm tra mà trình duyệt đã chỉ định và xuất ra ở định dạng có tên là TAP, con người có thể đọc được và có thể được nhập vào một máy chủ tích hợp liên tục để tự động hóa quá trình.

Kiểm tra trình duyệt

Có thể bạn sẽ phát triển trang web của mình trên Chrome hoặc Firefox: các công cụ dành cho nhà phát triển của họ thật tuyệt vời và chúng giúp bạn tăng tốc quá trình.

Google Chrome có các phiên bản riêng biệt mà bạn có thể sử dụng để kiểm tra trang web của mình. Phiên bản ổn định và bình thường và Chrome Canary.

Canary là một trình duyệt bạn có thể chạy song song với Google Chrome thông thường. Ưu điểm của nó là bạn nhận được bản cập nhật hàng ngày về những gì đã cam kết với các nguồn Chromium và bạn có thể có quyền truy cập vào các tính năng mới 11 tuần trước khi chúng được gửi đến kênh Chrome ổn định chính vàlỗi tập tinnếu bạn cần. Bạn thậm chí có thể đặt nó làm trình duyệt mặc định của mình.

Mozilla có riêngFirefox Nightlyhoạt động tương tự như Chrome canary: các bản cập nhật hàng ngày sẽ đến với trình duyệt của bạn.

Bạn có thể muốn sử dụngKênh Chrome Dev, vàFirefox Aurorađại diện cho phiên bản 'ít hiện đại hơn' sau đó là Canary / Nightly.

Để kiểm tra Safari, bạn có thể sử dụngCông trình xây dựng hàng đêm của WebKit. Khi bạn sử dụng WebKit, về cơ bản bạn đang chạy Safari với phiên bản cập nhật của công cụ cơ bản.


Các hướng dẫn khác dành cho devtools: