Công cụ hồi quy CSS?

Question

Tôi đang tìm một công cụ kiểm tra hồi quy trực quan để tái cấu trúc CSS và xem liệu có bất kỳ hành vi xếp tầng không mong muốn nào trong một trang web hay không.

Lý tưởng nhất, công cụ có thể thu thập dữ liệu trang web (thậm chí tại địa phương) và lấy ảnh chụp nhanh của từng trang và lưu trữ nó trong một kho lưu trữ duy nhất.

Khi chạy lần thứ hai, nó sẽ hiển thị các trang khác biệt về hình ảnh kể từ lần cuối cùng nó chạy.

Thậm chí tốt hơn:

1. nếu nó có thể hiển thị xem XOR overlapper của phiên bản 2 của trang.
2. so sánh kết quả hiển thị của các trình duyệt khác nhau (gần giống như tính năng so sánh Web Microsoft Expression tự động).

Answer 1

Kiểm tra Litmus.

Nó sẽ thu thập dữ liệu trang web của bạn và chụp ảnh màn hình đã chết gần mọi trình duyệt bạn muốn.

Ngoài chức năng cốt lõi Litmus cũng cho phép bạn theo dõi lỗi, đăng nhập vào các trang web riêng tư và cho phép bạn xuất bản báo cáo tương thích từ các thử nghiệm của mình.

Answer 2

Kiểm tra Browser Shots. Đây là một dịch vụ miễn phí.

Có một số hạn chế về số lượng kiểm tra bạn có thể chạy mỗi ngày với tư cách là người dùng miễn phí. Nhưng không giống như Litmus; bạn có thể chạy thử nghiệm trên tất cả các trình duyệt được hỗ trợ - Litmus chỉ cho phép người dùng miễn phí kiểm tra trang web của họ trên Internet Explorer 7 và Mozilla Firefox 2.

Answer 3

Điều bạn mô tả chính xác là những gì Mogotest thực hiện. Chúng tôi có thể đăng nhập vào trang web của bạn, chụp ảnh màn hình cho tất cả các trang bạn đã định cấu hình và thực hiện so sánh tự động bằng nguyên tắc Web Consistency Testing.

Chúng tôi cũng theo dõi lịch sử để chúng tôi có thể cho bạn biết chính xác khi nào một thứ gì đó bị hỏng (và trang web của bạn nhìn vào thời điểm đó) và thậm chí còn lạnh hơn nữa. Và cuối cùng, chúng tôi chụp nhanh mã của bạn ở mỗi lần chạy thử để chúng tôi có thể cho bạn biết chính xác những gì đã thay đổi cho từng vấn đề.

Xin lỗi vì tính chất tự quảng cáo của câu trả lời này. Tôi chỉ muốn được triệt để trong việc giải quyết những gì bạn đang tìm kiếm.

Answer 4

Yêu thích hiện tại của tôi là WebDriverCSS kết hợp với BrowserStack Automate API. Cặp công cụ này cho phép thử nghiệm hồi quy đa nền tảng, đa trình duyệt trên phạm vi rất rộng các thiết bị mà BrowserStack hỗ trợ. Nó đòi hỏi phải viết mã nhưng là nhiều hơn toàn diện hơn bất kỳ giải pháp nào ràng buộc với Phantom hoặc Slimer.

Nếu bạn đồng ý với WebKit cũ là UA kiểm tra duy nhất của bạn, đây là ghi chú tuyệt vời trên CSS regression testing sử dụng PhantomCSS. Ví dụ cơ bản của họ cung cấp chính xác những gì câu hỏi ban đầu mong muốn: sự khác biệt trực quan giữa hai cam kết.

Đối với một công cụ đơn giản hơn không yêu cầu mã hóa (chỉ cấu hình YAML), tôi hướng mọi người đến với Wraith thường xuyên hơn PhantomCSS. Cho câu trả lời của @ ericcraio nếu bạn thích Wraith và không muốn viết mã Casper.

Answer 5

Tôi biết câu hỏi này đã được đăng trong một thời gian nhưng tôi muốn đề cập đến một công cụ hồi quy CSS mới được gọi là wraith bởi bbc-news.

http://github.com/bbc-news/wraith

Nó sử dụng các công cụ như phantomJS và ImageMagick.

http://responsivenews.co.uk/post/56884056177/wraith

Answer 6

Tôi đang phát triển một công cụ kiểm tra hồi quy CSS được gọi là SUCCSS, nó là một NPM toàn cầu, mã nguồn mở: https://github.com/B2F/Succss. Atm, bạn có thể đọc tài liệu đầy đủ của nó tại đó: http://succss.ifzenelse.net