Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
Kiểm tra trực quan (đôi khi được gọi là kiểm thử hồi quy trực quan hoặc kiểm tra giao diện user ) là quá trình xem xét phần mềm về tính toàn vẹn trực quan. Không giống như các công cụ bạn sử dụng đảm bảo ứng dụng của bạn đang hoạt động như dự định, kiểm tra trực quan là tất cả những gì user của bạn thực sự nhìn thấy và tương tác.
Nó hoạt động bằng cách so sánh ảnh chụp nhanh giao diện user của bạn với các đường cơ sở để xem liệu các pixel có thay đổi hay không. Bằng cách xem xét các pixel thay vì mã bên dưới, kiểm tra trực quan giúp bạn dễ dàng biết chính xác giao diện user của bạn trông như thế nào trước khi triển khai và để nắm bắt các hồi quy trực quan.
Kiểm tra trực quan không chỉ là kiểm tra ảnh chụp nhanh — có một quy trình làm việc xem xét trực quan để có được phạm vi hình ảnh liên tục là rất quan trọng. Với Percy, thật dễ dàng tích hợp kiểm tra trực quan vào ngăn xếp của bạn để song song với đường ống CI / CD của bạn trên mọi yêu cầu kéo.
Đến đây bạn đã có cái nhìn tổng quan về cách hoạt động của thử nghiệm trực quan, ta sẽ đi qua hướng dẫn 5 phút.
Đây là những gì ta sẽ đề cập:
- Tích hợp Percy với một ứng dụng web mẫu (hoặc của bạn )
- Chạy thử nghiệm hình ảnh đầu tiên của bạn
- Thực hiện và xem xét các thay đổi trực quan
- Thêm đánh giá trực quan vào quy trình làm việc hàng ngày của bạn
Bắt đầu nào!
Bước 1: Tích hợp Percy
Nếu bạn chưa có, hãy đăng ký một account Percy miễn phí , đặt tên cho tổ chức của bạn và tạo dự án đầu tiên của bạn.
Đăng ký account Percy là miễn phí và bao gồm 5.000 ảnh chụp nhanh mỗi tháng với các bản nâng cấp bắt đầu từ $ 29 có sẵn.
Các dự án Percy tương ứng với các ứng dụng, trang web hoặc thư viện thành phần mà bạn muốn kiểm tra. Với SDK của ta , bạn có thể thêm thử nghiệm trực quan cho hầu hết mọi thứ hiển thị trong trình duyệt.
Đây là một số SDK phổ biến của ta :
Đối với hướng dẫn này, ta sẽ sử dụng PercyScript — cách dễ nhất và nhanh nhất để bắt đầu thử nghiệm trực quan cho bất kỳ ứng dụng web nào. Ta sẽ sử dụng ứng dụng mẫu TodoMVC này, mặc dù bạn có thể dễ dàng điều chỉnh PercyScript bên dưới để hoạt động cho ứng dụng của bạn .
Đầu tiên, hãy cài đặt ứng dụng mẫu:
$ git clone https://github.com/percy/example-todomvc.git $ cd example-todomvc/ $ npm install $ npm run start Đến đây bạn có thể truy cập http: // localhost: 8000 và tự mình chơi với ứng dụng todos.
Tiếp theo, ta sẽ cài đặt PercyScript và viết các bài kiểm tra trực quan đầu tiên cho ứng dụng này.
Điều quan trọng là phải giữ cho server hoạt động và mở một terminal mới để chạy:
$ npm install -D @percy/script Thao tác này sẽ thêm @percy/script vào file package.json của bạn.
Tiếp theo, tạo một file có tên snapshots.js và thêm PercyScript đầu tiên của bạn:
// snapshots.js const PercyScript = require('@percy/script'); // A script to navigate our app and take snapshots with Percy. PercyScript.run(async (page, percySnapshot) => { await page.goto('http://localhost:8000'); await percySnapshot('TodoMVC home page'); // Enter a new to-do. await page.type('.new-todo', 'A really important todo'); await page.keyboard.press('Enter'); await percySnapshot('TodoMVC with a new todo', { widths: [768, 992, 1200] }); }); Đó là nó! Bước tiếp theo là bắt đầu chạy PercyScript này.
Bước 2: Chạy thử nghiệm trực quan
Để chạy PercyScript local , hãy sao chép biến môi trường PERCY_TOKEN từ màn hình dự án mới hoặc cài đặt dự án của bạn, sau đó chạy:
$ export PERCY_TOKEN=aaabbbcccdddeee $ npx percy exec -- node snapshots.js Thay thế mã thông báo bằng `PERCY_TOKEN` trong dự án của bạn.
Bạn sẽ thấy kết quả như:
$ npx percy exec -- node snapshots.js [percy] created build #1: https://percy.io/test/example-todomvc/builds/1738842 [percy] percy has started. [percy] snapshot taken: 'TodoMVC home page' [percy] snapshot taken: 'TodoMVC with a new todo' [percy] stopping percy... [percy] waiting for 2 snapshots to complete... [percy] done. [percy] finalized build #1: https://percy.io/test/example-todomvc/builds/1738842 Điều gì đang xảy ra đằng sau mức thấp ? Percy hoạt động bằng cách chụp nhanh DOM ở mọi nơi mà lệnh Percy snapshot được gọi. Sau đó, ta tạo lại trang hoặc thành phần trong môi trường kết xuất tùy chỉnh của ta . Ảnh chụp nhanh mới được so sánh với ảnh chụp nhanh cơ sở để xác định pixel nào đã thay đổi.
Nếu bạn đang theo dõi, bạn sẽ thấy rằng vì đây là bản dựng đầu tiên nên không có gì để so sánh với nó. Nó cũng đã được "tự động phê duyệt" vì commit là bản chính và ta giả định bản dựng chính đã sẵn sàng production .
Bước 3: Xem lại các Thay đổi Trực quan
Đến đây bạn đã được tích hợp và đã đẩy bản dựng đầu tiên cài đặt đường cơ sở của bạn, hãy tạo một nhánh tính năng mới và giới thiệu một thay đổi trực quan để xem xét trong Percy.
Sử dụng editor của bạn để chỉnh sửa index.html và làm cho văn bản h1 trên dòng 11 có màu tím:
<h1 style=”color:#9e66bf;”> Bây giờ chạy lại các ảnh chụp nhanh:
$ npx percy exec -- node snapshots.js Quay lại Percy hoặc nhấp vào liên kết xây dựng Percy để xem những thay đổi trực quan! Ở bên phải, bạn sẽ thấy ảnh chụp nhanh mới, được phủ bởi các pixel màu đỏ làm nổi bật các khu vực đã thay đổi.
Nhấp vào khu vực đó (hoặc nhấn “d”) sẽ chuyển đổi giữa ảnh chụp nhanh bên dưới và khác biệt được phủ lên để bạn có thể dễ dàng xem chính xác những gì đã thay đổi.
Khác biệt đáp ứng
Bạn cũng có thể sử dụng Percy để nhận được phạm vi bao phủ trên tất cả các kích thước khung nhìn quan trọng nhất. Theo mặc định, ta hiển thị ảnh chụp nhanh cho chiều rộng thiết bị di động và máy tính để bàn. Chuyển đổi giữa các chiều rộng để xem những gì đã thay đổi trên mỗi chiều rộng.
Kiểm tra hình ảnh trên nhiều trình duyệt
Ảnh chụp nhanh trên nhiều trình duyệt giúp bạn phát hiện những khác biệt nhỏ do kết xuất trình duyệt gây ra.
Nếu bạn hài lòng với những thay đổi của bạn , hãy nhấn “Phê duyệt tất cả” - chắc chắn 100% bạn sẽ biết những thay đổi trực quan nào mà bạn sẽ triển khai. Theo mặc định, Percy hiển thị tất cả các ảnh chụp nhanh trên cả Chrome và Firefox.
Vì bạn muốn thực hiện những thay đổi này, hãy nhấn “Phê duyệt tất cả”.
Bạn đã thực hiện đánh giá trực quan đầu tiên của bạn !
Bước 4: Tích hợp CI và mã nguồn
Để tận dụng tối đa giá trị của thử nghiệm trực quan tự động, ta khuyên bạn nên tích hợp với các công cụ và quy trình dành cho nhà phát triển hiện có của bạn .
Percy được thiết kế để chạy cùng với các bản dựng CI của bạn như một phần của quá trình xem xét mã của bạn. Để có thêm hướng dẫn chuyên sâu và xem tất cả các dịch vụ CI được hỗ trợ của ta , hãy xem tài liệu cài đặt CI của ta . Dưới đây là một số dịch vụ được hỗ trợ phổ biến nhất của ta :
Với tích hợp mã nguồn được bật, bạn sẽ được thông báo ngay trong yêu cầu kéo hoặc hợp nhất khi phát hiện thấy các thay đổi trực quan và khi những thay đổi đó được chấp thuận và sẵn sàng hợp nhất.
Nhấp vào “Chi tiết” sẽ đưa bạn đến ngay bản dựng Percy, nơi bạn có thể xem lại các thay đổi trực quan.
Sau khi ảnh chụp nhanh được phê duyệt, trạng thái commit của bạn sẽ chuyển sang màu xanh lục và PR có thể được hợp nhất.
Đó là nó! Bạn đã sẵn sàng hợp nhất với sự tự tin rằng mọi phần của ứng dụng của bạn trông giống hệt như nó phải.
Ta hy vọng hướng dẫn này đã giúp bạn làm quen với nền tảng đánh giá trực quan và quy trình làm việc của Percy. Để tiếp tục tìm hiểu về cách hoạt động của Percy, vui lòng xem các tài nguyên bổ sung sau:
Và nếu bạn chưa có, hãy đăng ký một account Percy miễn phí . Bạn nhận được 5.000 ảnh chụp nhanh miễn phí hàng tháng và quyền truy cập vào nền tảng thử nghiệm trực quan và tích hợp của ta .
✨ Chúc bạn thử nghiệm vui vẻ!
Các tin liên quan
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.042019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23
Cách cạo các trang web và đăng nội dung lên Twitter bằng Python 3
2019-04-22
module Web tích hợp: Cách sử dụng KV Storage
2019-03-22
Cách thu thập thông tin một trang web với Scrapy và Python 3
2019-03-20
Cách cạo các trang web với Beautiful Soup và Python 3
2019-03-20
Cách sử dụng API Web trong Python 3
2019-03-20
Tạo ứng dụng web tiến bộ (PWA) với React
2019-03-02
Tụ điện: Chạy ứng dụng web trên thiết bị di động
2019-02-27
Cách gửi thông báo đẩy web từ ứng dụng Django
2018-10-24
