Một vài tìm kiếm nhanh chóng phát hiện thấy tôi rõ ràng là not thefirst person để có suy nghĩ "Tôi có thể kiểm tra đơn vị CSS của mình không?".Kiểm tra đơn vị CSS
Tôi tự hỏi liệu có ai ở đây đã thực hiện thử nghiệm đơn vị CSS thành công không? Nếu bạn đã cố gắng và thất bại, hoặc chỉ có lý thuyết của riêng bạn, xin vui lòng cho tôi biết lý do tại sao nó (dường như) chưa được thực hiện?
Bạn có thể sử dụng Selenium, một khung kiểm tra web. Bằng cách này bạn có thể khẳng định những gì phong cách đang được áp dụng cho các yếu tố trong DOM, vv
Nếu không, không chắc chắn những gì mục đích của bạn. Thử nghiệm đơn vị là, như tên cho thấy, thử nghiệm 'Đơn vị', và với tôi, điều này chỉ có ý nghĩa với mã, chứ không phải css.
, CSS là mã, ... loại. Dù sao, thay đổi đầu vào (tệp CSS) sẽ thay đổi đầu ra (hình ảnh) và tôi muốn xác nhận về đầu ra - kiểm tra kích thước phông chữ trong các đoạn không bao giờ khác nhau - kiểm tra xem văn bản có căn chỉnh với lưới không đúng, v.v. – nickf
Selen là những gì bạn cần cho điều đó. Và chỉ để rõ ràng. CSS không phải là mã :-), nó không phải là một ngôn ngữ lập trình, và không có cách nào Turing Complete, nó là một ngôn ngữ mô tả cho các tài liệu XML theo phong cách trực quan. – RekrowYnapmoc
Nó không phải là một ngôn ngữ lập trình. Nhưng đó là mã. Cũng giống như HTML là mã. – slim
Không có ý nghĩa khi thực hiện IMO. CSS là ngôn ngữ để kiểm soát bố cục trang; cố gắng để đơn vị kiểm tra nó sẽ giống như cố gắng để đơn vị kiểm tra Postscript.
Chỉ sử dụng rõ ràng để thử nghiệm đơn vị tôi có thể nghĩ là so sánh ảnh chụp màn hình để xem trình duyệt nào bị ảnh hưởng bởi thay đổi trong mã. Ngoài ra, bạn không thể nói mã là đúng trừ khi bạn so sánh thủ công mọi thứ trong đầu ra được hiển thị với thông số mà nó nói. Đối với tôi, việc nhận CSS đúng là luôn luôn được thử và lỗi.
Đây không phải là thử nghiệm "đơn vị". Tôi không nói rằng bạn không nên kiểm tra bằng cách kiểm tra trực quan, nhưng nó không phải là cùng một loại thử nghiệm như kiểm tra đơn vị. Thử nghiệm đơn vị có ý nghĩa xác định đơn vị kiểm thử thực hiện. CSS là trang trí, không thực thi. – tvanfosson
Vâng Postscript thực sự là một ngôn ngữ lập trình với các chức năng và mọi thứ. Vì vậy, bạn chắc chắn có thể kiểm tra đơn vị đó. – slim
CSS là công cụ quy tắc nên không khó dự đoán các thử nghiệm đơn vị nơi bạn cho ăn một số trường hợp nhất định (ví dụ: phần tử có id cụ thể hoặc INPUT bên trong div với một lớp) và mong đợi một số kết quả đầu ra nhất định. Làm thế nào đến nay tôi nên đi với các bài kiểm tra được mở cho cuộc tranh luận nhưng sẽ có trường hợp nó dừng lại sai lầm tổng trước khi chúng xảy ra. – locka
Hiện tại, việc hiểu liệu CSS có đang hoạt động đúng hay không được xác định bằng mắt. Cho đến nay, cách tốt nhất để kiểm tra nó là thông qua việc cài đặt nhiều trình duyệt trên máy tính của bạn. Bắt đầu sử dụng các công cụ như Firebug và Nhà phát triển Web trên Firefox và quên về Kiểm tra đơn vị CSS cho đến khi nó trở thành Turing hoàn tất. :-)
Và khi bạn đã cài đặt nhiều trình duyệt trên máy tính của mình, bạn có thể xác định _ nếu CSS hoạt động đúng ... Selen là một cách để tự động xác định trực quan này. – Greg
Bạn có thể sử dụng PhantomCSS để so sánh trực quan tự động. Và sau đó bạn có thể tạo trang kiểm tra đơn vị mô-đun CSS chỉ tải các kiểu CSS cơ bản và hiển thị thành phần trong tất cả các trạng thái của nó, nhưng không tải CSS từ các thành phần khác. Và sau đó bạn có thể so sánh nó với tệp CSS đầy đủ với tất cả các mô-đun được tải.
Tôi không hiểu tại sao chúng tôi không thể hoặc không nên kiểm tra đơn vị CSS. Đây là kịch bản tôi có trong đầu:
Tôi có một khung CSS được tạo từ nhiều tệp CSS mô-đun và điều khiển 5 trang web của tôi.
Ex : base.css/form.css/article.css etc.
Hãy tưởng tượng tôi thực hiện thay đổi đối với base.css cho yêu cầu áp dụng cho trang web # 1 only => Tôi có thể phá vỡ kiểu trang web 2 mà không có.
Kiểm tra đơn vị CSS sẽ còn phù hợp hơn nếu khung CSS của tôi được xây dựng trên đầu trang LESS hoặc SASS: thay đổi trong macro có thể phá vỡ tất cả kiểu. .
Có, tôi cũng có một số tệp định kiểu CSS cơ sở cho nhiều trang web. Nhưng mỗi người đều có các tệp CSS tùy chỉnh để làm cho chúng độc đáo. Với các tệp CSS tùy chỉnh, bạn có thể ghi đè kiểu dáng mặc định và cũng có thể bật/tắt chúng. – Heroselohim
Tôi nghĩ có thể trong trình duyệt (phía máy khách) đến CSS "thử nghiệm đơn vị". Nó sẽ giống như một trình kiểm tra tự động hơn là kiểm tra đơn vị:
Đơn vị:
DOM selectors:
.test1
.test2
#test3
này nên luôn luôn có các thuộc tính cuối cùng:
CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3
Một chức năng để thiết lập quy tắc kiểm tra trong JS có thể là:
addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");
Sau đó, chúng tôi kiểm tra xem các phần tử DOM có thuộc tính cuối cùng này hay không.
Tất cả được thực hiện trong javascript sau khi hiển thị. Nhưng dù sao điều này là không thực tế bởi vì bạn sẽ phải xây dựng nhiều trường hợp thử nghiệm đơn vị sẽ làm tăng đáng kể mã của bạn.
Ngoài ra, bạn phải luôn có một tệp reset.css để "tương thích" trên trình duyệt chéo.
An thay thế sẽ chỉ định các lớp CSS mà bạn biết nên giữ nguyên toàn bộ thuộc tính của chúng. Tạo danh sách bộ chọn DOM. Sử dụng jQuery để lấy các thuộc tính lớp CSS (trực tiếp từ lớp CSS) và kiểm tra xem chúng có được bảo toàn trong các phần tử DOM đích hay không. Phương pháp cuối cùng này có thể gần như hoàn toàn tự động, nhưng sẽ yêu cầu trình kiểm tra javascript phức tạp hơn. người cuối cùng này sẽ không kiểm tra CSS cho selectors ID (ví dụ: "# Test3"), chỉ có các lớp học (ví dụ:" .test1")
Có một cách tiếp cận thú vị mà tôi chưa bao giờ cố gắng, nhưng có thể làm việc:
Et thì đấy :)
có một mới thư viện kiểm tra đơn vị css được gọi là Quixote. Thay vì so sánh hình ảnh trực quan, nó nhìn vào mã. Không giống như Selenium, bạn không cần phải xác nhận các phong cách cụ thể, thay vào đó bạn có thể nói một cái gì đó như "nó phải được làm trung tâm" hoặc "phía bên trái nên được xa hơn 10px bên phải của phần tử khác này".
Chúng tôi đã thiết lập các bài kiểm tra đơn vị cho một dự án lớn, giao diện người dùng và nó hoạt động tuyệt vời! Nó cũng dễ nhìn hơn.
Sử dụng các công cụ đơn giản như getBoundingClientRect hoặc getComputedStyle, ghép nối với hyperscript để tạo cây DOM tạm thời nhanh và bạn sẵn sàng sử dụng. Chúng tôi đã viết tape-css để giảm bớt bản mẫu khi thử nghiệm với tape, nhưng ngăn xếp sẽ giống nhau trong bất kỳ thiết lập thử nghiệm nào.
Hôm qua tôi đã xuất bản một bài đăng blog chi tiết với một hướng dẫn đơn giản và các ví dụ trực tiếp về quy trình làm việc mới của chúng tôi và cách làm tăng năng suất của chúng tôi: How CSS unit tests helped us move fast.
Kiểm tra đơn vị CSS, tùy thuộc vào khung của bạn và cách tiếp cận của bạn với CSS.
Câu hỏi để hỏi:
kiểm tra cho một lớp học được đưa ra trong CSS của bạn ví dụ, Assert.IsNotNull
tài sản Nhận CSS và xác minh thuộc tính của nó.
Thứ nhất, tôi chắc chắn rằng, nếu tệp CSS tồn tại, hãy tìm lớp cụ thể rồi tìm các thuộc tính bên trong lớp được chỉ định.
Tôi đã trải qua một lớp bị thiếu trong quá trình kiểm tra hồi quy của mình và đã cố gắng khắc phục ngay lập tức từ những phát hiện trước đó.
Các ý kiến về nó không được turing hoàn chỉnh, không đơn vị kiểm tra, vv .. chỉ là lame. Ví dụ, kế thừa (xếp tầng) trong css là cái gì đó sẽ rất thú vị để kiểm tra. Tinh chỉnh trên nhiều trình duyệt cũng rất thú vị để xác minh. Và selen, hoặc bất kỳ giải pháp nào khác trong trình duyệt không có vẻ như nó có thể hoạt động. Trừ khi có thể nó dựa trên một cái gì đó như qunit/jquery và thực sự chọc DOM để xem liệu CSS có áp dụng như tác giả dự định (và có thể chạy/thử nghiệm trong các trình duyệt khác nhau để xác nhận nó hoạt động). – Evgeny
Bao gồm kiểm tra CSS trong các thử nghiệm có thể giúp chứng minh một số yêu cầu kinh doanh trong BDD (chẳng hạn như kích thước của một cái gì đó là NxN và màu xanh dương). Những loại điều này chắc chắn có thể kiểm chứng, ngay cả khi sự xuất hiện của chúng trong tác nhân người dùng X không đáp ứng các yêu cầu đã nói (đó là nơi mà selen có thể lấp đầy khoảng trống) –