Thử nghiệm d3 (và các ứng dụng web khác dựa trên SVG)

Question

Tôi có một ứng dụng web sử dụng thư viện d3 cho một số hình ảnh hóa dựa trên SVG phức tạp.

Tôi có các kiểm tra tự động cho mã phía máy chủ và các mô hình JavaScript của tôi (tôi sử dụng MVC giống như kiến ​​trúc trong JavaScript của tôi). Chúng được chạy trên máy chủ Jenkins CI trên mọi cam kết. Bây giờ tôi cần phải tìm hiểu cách kiểm tra quan điểm của mình.

Làm cách nào để người khác giải quyết vấn đề này và bạn sử dụng công cụ nào?

Vài suy nghĩ tôi đã có ...

• Serialize các SVG tạo ra vào một tập tin và so sánh với phạm vi giới
• Tự động chụp một hình ảnh trình duyệt và thực hiện một hình ảnh khác
• Cái gì khác?

Cảm ơn!

Answer 1

Có vẻ như Selenium nên làm những gì bạn đang tìm kiếm. Nó thúc đẩy trình duyệt web và do đó cho phép bạn kiểm tra những gì thực sự xảy ra trong trình duyệt thay vì giả định rằng SVG sẽ được hiển thị chính xác. Nó cho phép bạn chỉ định các bài kiểm tra đơn vị dưới dạng một loạt các cú nhấp chuột/nét chính và nó tích hợp khá độc đáo với Jenkins.

Answer 2

Ví dụ bạn đưa ra là để kiểm tra đầu ra đồ họa. Đối với điều này, bạn có thể sử dụng một công cụ khác biệt chụp màn hình như PhantomCSS, Sikuli hoặc cuộn lên của riêng bạn với Resemble.js.

Nhưng nếu câu hỏi của bạn tập trung hơn vào việc thử nghiệm các ứng dụng dựa trên D3.js/SVG, như tiêu đề ngụ ý, bạn nên xem D3 test suite. Hầu hết các bài kiểm tra thậm chí không cần một lịch thi đấu html vì họ về cơ bản là thử nghiệm API. Nếu điều quan trọng nhất đối với bạn là tính nhất quán của kết quả trực quan, hãy sử dụng công cụ tìm khác biệt trên màn hình. Đối với luồng điều hướng và UX, bạn tốt hơn với tự động hóa trình duyệt như Selenium. Nhưng đối với thử nghiệm đơn vị, nơi bạn muốn đảm bảo có API nhất quán và mã mô-đun, hầu hết các khung kiểm tra có tính năng gián điệp, cố định và chế nhạo sẽ thực hiện (ví dụ: Jasmine, Vows, Mocha).

Answer 3

Giải pháp Tôi hiện đang dự tính là ...

1. Tạo một tập tin đơn giản (csv) với một danh sách các url để nắm bắt, cùng với một khu vực cây trồng (xem 3) mỗi
2. tải của các url và capture screenshots with Selenium
3. Crop hình dung ra khỏi ảnh chụp màn hình với ImageMagick (vì vậy chúng tôi chỉ kiểm tra trực quan và không đầy đủ ui)
4. Hãy so sánh những hình ảnh để sử dụng đường cơ sở ImageMagick
5. Tạo một báo cáo HTML với những hình ảnh cũ, mới và diff (đối với bất kỳ hình ảnh mà là khác nhau)
6. Tạo ra xml JUnit cho máy chủ CI

Answer 4

trình duyệt chụp và kiểm tra đồ thị là một thử nghiệm tốt. Nhưng tôi cảm thấy đây là trách nhiệm của chính D3 hơn là mã của chúng tôi.

Tôi cũng có câu hỏi tương tự. (My Question).Vui lòng kiểm tra câu trả lời tôi đã đăng ở đó.