# 166: Μάθετε να ενοποιείτε την οπτική δοκιμή με τον Percy - CSS-Κόλπα

Anonim

Γνωρίζατε ότι μπορείτε να ρυθμίσετε ένα σύστημα ελέγχου, έτσι ώστε κάθε αίτημα έλξης που υποβάλλετε να σας δείχνει ακριβώς τι έχει αλλάξει οπτικά στον ιστότοπό σας;

Αυτό ακριβώς κάνει ο Percy. Υποθέτει ότι αυτό που έχετε στο master είναι σωστό (διαμορφώσιμο) και, όταν κάνετε μια αίτηση έλξης, παίρνει κυριολεκτικά στιγμιότυπα οθόνης και τα συγκρίνει με τα στιγμιότυπα οθόνης αυτού που υπάρχει στο master. Εάν κάτι έχει αλλάξει, σας ενημερώνει, όπως θα κάνατε οι δοκιμές μονάδας ή ολοκλήρωσης. Να τα εγκρίνετε και να παρατηρήσετε ότι κάτι δεν πάει καλά; Διορθώστε το και ελέγξτε ξανά τις αλλαγές.

Είναι απίστευτο αυτό το είδος δοκιμών είναι διαθέσιμο. Αυτός είναι ο τρόπος με τον οποίο μπορείτε πραγματικά να προσφέρετε αυτοπεποίθηση στην ομάδα σας ότι κάνει ακριβώς αυτό που νομίζετε ότι πρόκειται όταν οι άνθρωποι κάνουν το σχεδιασμό ή το περιεχόμενο αλλάζει.

Σε αυτό το βίντεο, συνεργάζομαι με τον Mike Fotinakis (συνιδρυτής του Percy) για να το δείξω όλα αυτά, και στη συνέχεια να τα φτιάξω κυριολεκτικά σε έναν ιστότοπο. Θα δουλέψουμε σε έναν τοπικό ιστότοπο χρησιμοποιώντας το Eleventy, θα το πετάξουμε ζωντανά στο Netlify, θα ενσωματώσουμε το CircleCI στο repo του GitHub για τον ιστότοπο και θα το διαμορφώσουμε για να τρέξει το Percy.

Είναι αρκετά μαγικό και σας συνιστώ πραγματικά να το ελέγξετε, ώστε να γνωρίζετε το επίπεδο οπτικών δοκιμών που είναι δυνατό αυτές τις μέρες.