Οπτικός Έλεγχος Παλινδρόμησης με Καταγραφές Στιγμιότυπων
Οι ομάδες ανάπτυξης χρησιμοποιούν το Webshot για να εντοπίσουν τα σφάλματα που διαφεύγουν από τα unit tests — προβλήματα διάταξης, εναλλακτικές γραμματοσειρές, εικονίδια που λείπουν, σπασμένες responsive καταστάσεις. Κάντε λήψη του staging, κάντε λήψη του production, συγκρίνετε το ζεύγος. Αφήστε τη διαφορά σε ένα σχόλιο PR ως απόδειξη ότι η αλλαγή σας είναι ασφαλής (ή ως απόδειξη ότι μόλις εμφανίστηκε το νέο σφάλμα).
Όλα τα κουμπιά ανοίγουν τη φόρμα λήψης προ-ρυθμισμένη. Μπορείτε να αλλάξετε τη μορφή και το viewport μόλις φορτώσει η σελίδα.
Γιατί να επιλέξετε το Webshot
Λήψεις με ακρίβεια pixel
Η λειτουργία PNG διατηρεί το κείμενο και τις άκρες ευκρινείς — ιδανικό για εργαλεία σύγκρισης pixel (`pixelmatch`, ImageMagick `compare`) όπου ο θόρυβος συμπίεσης JPG θα δημιουργούσε ψευδώς θετικά αποτελέσματα.
Το ίδιο viewport κάθε φορά
Το Webshot πραγματοποιεί λήψεις με το ίδιο ακριβώς viewport, θέση κύλισης και χρόνο αναμονής φόρτωσης γραμματοσειρών σε κάθε εκτέλεση — τα αποτελέσματα της σύγκρισης είναι αξιόπιστα.
Φιλικό προς API
Συνδέστε το δωρεάν API του Webshot στο CI σας: κάντε λήψη πριν και μετά την ανάπτυξη, συγκρίνετε με `pixelmatch` και απορρίψτε το build αν τα αλλαγμένα pixel ξεπερνούν το όριο.
Χωρίς επαναλαμβανόμενο κώδικα headless-Chrome
Παραλείψτε τη ρύθμιση του puppeteer, την εγκατάσταση γραμματοσειρών, τις σημαίες sandbox. Το Webshot τα έχει όλα αυτά να τρέχουν στην υποδομή μας. Το CI σας απλώς κάνει μια κλήση HTTP.
Πώς να κάνετε οπτικό έλεγχο παλινδρόμησης
- Επιλέξτε τις σελίδες που θέλετε να παρακολουθείτε — αρχική σελίδα, βασικές σελίδες προορισμού, ροή ολοκλήρωσης αγοράς, οπουδήποτε μια παλινδρόμηση θα προκαλούσε ζημιά.
- Κάντε λήψη της καθεμιάς σε PNG + desktop_full + mobile_full για να δημιουργήσετε μια βάση αναφοράς για την τρέχουσα εμφάνιση παραγωγής.
- Μετά την επόμενη ανάπτυξή σας, κάντε ξανά λήψη των ίδιων URL. Συγκρίνετε το παλιό με το νέο με `pixelmatch` ή ImageMagick — οτιδήποτε πάνω από 1% αλλαγμένων pixel αξίζει ανθρώπινη επισκόπηση.
- Ενσωματώστε το στο CI: ένα pre-deploy hook κάνει λήψη του staging, ένα post-deploy hook του production, και το build αποτυγχάνει αν η διαφορά ξεπερνά το όριό σας.
Συχνές ερωτήσεις
Έτοιμοι για λήψη;
Δωρεάν, χωρίς εγγραφή, χωρίς υδατογράφημα. Απλώς επικολλήστε ένα URL.
📸 Άνοιγμα φόρμας λήψηςΆλλες περιπτώσεις χρήσης: Στιγμιότυπα Google Maps · Στιγμιότυπα WordPress · QA Σελίδων Προορισμού · Στιγμιότυπα για Νομικά Αποδεικτικά Στοιχεία · Στιγμιότυπα Social Media · Στιγμιότυπα Ροής Εργασίας Προγραμματιστή · Δείτε όλες →