Αποκριτική σχεδίαση ιστοσελίδων: Ο πλήρης οδηγός για αρχάριους

responsive web design testing

Στη σημερινή εποχή, η χρήση κινητών συσκευών για πρόσβαση στο Διαδίκτυο έχει αυξηθεί και έχει γίνει αρκετά δημοφιλής. Σχεδόν κάθε χρήστης του Διαδικτύου επιθυμεί μια κινητή έκδοση του ιστότοπου.

Ωστόσο, οι περισσότεροι ιστότοποι δεν είναι τόσο βελτιστοποιημένοι όσο θα έπρεπε για κινητές συσκευές. Οι υπεύθυνοι δοκιμών θα πρέπει να εκτελέσουν μια δοκιμή απόκρισης για κινητά σε σχέδια απόκρισης.

Τα παραδοσιακά προϊόντα λογισμικού καθιστούν ουσιαστικά τα ίδια σε οποιαδήποτε συσκευή.

Το γραφείο της Microsoft, για παράδειγμα , φαίνεται το ίδιο σε κάθε προσωπικό υπολογιστή. Φανταστείτε να παίρνετε το Microsoft Word ακριβώς όπως εκτελείται στην επιφάνεια εργασίας σας και να το δείτε σε iPhone4. Είτε τα μενού και τα κουμπιά θα εμφανίζονται πολύ μικρά, διαφορετικά θα δείτε μόνο μια γωνία της οθόνης και θα πρέπει να χρησιμοποιήσετε εκτεταμένες γραμμές κύλισης. Σε κάθε περίπτωση, η εφαρμογή καθίσταται ουσιαστικά άχρηστη.

Αυτή η απογοητευτική εμπειρία είναι ακριβώς αυτό που κάθε σχεδιαστής περνά όταν προσπαθούν να σχεδιάσουν για το διαδίκτυο.

Η επίλυση του προβλήματος είναι κάτι που ονομάζεται 'responsive design', μια τεχνική που οι ιστοσελίδες να ρωτούν το πρόγραμμα περιήγησης ποια είναι η ανάλυση και, στη συνέχεια, να ξανασχεδιάσουν με χαρά την εμπειρία χρήστη βάσει της διαθέσιμης πραγματικής οθόνης. Ξαφνικά, είναι αδύνατο να γνωρίζουμε ακριβώς πώς θα φαίνεται το λογισμικό σας στην παραγωγή.

Αυτό σημαίνει μια στρατηγική δοκιμής (και μια στρατηγική αυτοματισμού) που πρέπει να είναι ικανή να πειραματιστεί και να μάθει τι «φαίνεται σωστό» και τι όχι, σε διάφορες αναλύσεις.

Τι θα μάθετε:

• Οδηγός για αρχάριους για τη δοκιμή σχεδιαστικών ιστοσελίδων που ανταποκρίνονται
  • Τι είναι το Responsive Web Design;
  • Πλεονεκτήματα του Responsive Design:
  • Κύρια συστατικά του Responsive Website Design:
  • Παραδείγματα σχεδιασμού αποκριτικών ιστοσελίδων
  • Πώς να δοκιμάσετε έναν αποκριτικό ιστότοπο
  • Δείγμα σεναρίων δοκιμής για αποκριτική δοκιμή ιστότοπου:
  • Εργαλεία για τη δοκιμή ενός αποκριτικού ιστότοπου
  • Προκλήσεις δοκιμής ανταποκριτικού σχεδιασμού και πιθανών λύσεων
  • Συμβουλές για αποκριτική δοκιμή Ιστού
• συμπέρασμα
  • Συνιστώμενη ανάγνωση

Οδηγός για αρχάριους για τη δοκιμή σχεδιαστικών ιστοσελίδων που ανταποκρίνονται

Όταν προσπαθούμε να ανοίξουμε έναν ιστότοπο, ο διακομιστής διαβάζει « m.sub-τομείς 'Για να προσδιορίσετε από τι είδους κινητή συσκευή προήλθε το αίτημα. Με βάση αυτό, ανακατευθύνει τον χρήστη στην αντίστοιχη έκδοση για κινητά.

Για να γίνει αυτό 100% αποτελεσματικό, κάθε συσκευή θα πρέπει να έχει τη δική της σχεδίαση του ιστότοπου ειδικά σχεδιασμένη για αυτήν. φάή παράδειγμα,διαφορετική συγκεκριμένη σχεδίαση για Blackberry, iPhone, iPad κ.λπ. λαμβάνοντας υπόψη το μέγεθος της οθόνης και τις αναλύσεις τους.

Ωστόσο, η διαφορετική έκδοση ιστού για κάθε ανάλυση και συσκευή δεν είναι πρακτική. ο Ethan Marcotte βρήκε μια νέα προσέγγιση - Responsive Web Design ( RWD ) - που λύνει αυτό το πρόβλημα.

Η Σύστασή μας

# 1) Πρόγραμμα περιήγησης LT

Πρόγραμμα περιήγησης LT βοηθά τους χρήστες να δοκιμάσουν και να εντοπίσουν σφάλματα στον ιστότοπό τους σε 45+ προβολές συσκευών. Δοκιμάστε τον ιστότοπό σας σε διαφορετικές προεγκατεστημένες θύρες προβολής κινητών και επιτραπέζιων συσκευών με το πρόγραμμα περιήγησης LT, ένα πρόγραμμα περιήγησης φιλικό για προγραμματιστές για εντοπισμό σφαλμάτων προβολής για κινητά.

Απλώς εισαγάγετε τη διεύθυνση URL του ιστότοπού σας, επιλέξτε τη συσκευή για να δοκιμάσετε τον ιστότοπό σας. Μπορείτε ταυτόχρονα να επιλέξετε δύο συσκευές για σύγκριση πλάι-πλάι.

Όχι μόνο οι δοκιμές, αλλά οι χρήστες μπορούν επίσης να εντοπίσουν σφάλματα στον ιστότοπό τους εν κινήσει με τη βοήθεια των ενσωματωμένων DevTools που προσφέρει το LT Browser.

Το καλύτερο είναι ότι οι χρήστες μπορούν να δημιουργήσουν μια προσαρμοσμένη συσκευή βάσει της απαίτησής τους που καθιστά το LT Browser την πρώτη μας επιλογή για αποκριτική δοκιμή.

Τι είναι το Responsive Web Design;

RWDστόχους για ιστότοπους να αντιδρούν στη συσκευή τους, στην ανάλυση και να μπορούν να αποδίδουν και να προσαρμόζονται σωστά. Για παράδειγμα, Εάν ο χρήστης αλλάξει από επιτραπέζιο / φορητό υπολογιστή σε iPad, τότε ο ιστότοπος θα προσαρμόσει αυτόματα τις αλλαγές ανάλυσης όπως το μέγεθος εικόνας κ.λπ. σύμφωνα με τις αντίστοιχες δυνατότητες της συσκευής.

Εν συντομία,Ανταποκρίσιμος σχεδιασμόςείναι 'Ένας ιστότοπος για κάθε οθόνη' .

Η παρακάτω οθόνη είναι έναπαράδειγματου RWD:

Σημείωση: Πραγματικός χρόνοςπαράδειγμαενός ιστότοπου που ανταποκρίνεται είναι www.fpl.com

Στο RWD, ένας ιστότοπος έχει σχεδιαστεί για να παρέχει μια ανώτερη εμπειρία χρήστη μέσω της εύκολης πλοήγησης, του καθαρού και απλού περιβάλλοντος χρήστη κ.λπ. Οι ανταποκριτικοί ιστότοποι προσαρμόζονται εύκολα και λειτουργούν σε όλες τις αναλύσεις, προγράμματα περιήγησης, μεγέθη οθόνης, υλικό και λειτουργικά συστήματα.

• Οι αποκριτικοί ιστότοποι κωδικοποιούνται σε PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) και σε πολλά νέα πλαίσια που είναι πολύ βολικά για την ανάπτυξη ανταποκρινόμενων σχεδίων.
• Οι δυνατότητες CSS και HTML αξιοποιούνται για την αυτόματη αλλαγή μεγέθους των αναλύσεων οθόνης και των εικόνων.
• Ο σχεδιασμός RW χρησιμοποιεί σημεία διακοπής για τον προσδιορισμό της διάταξης μιας τοποθεσίας. Κάθε σχέδιο χρησιμοποιείται σε διαφορετικά σημεία διακοπής. Ένα σχέδιο εφαρμόζεται πάνω από ένα σημείο διακοπής ενώ ένα άλλο σχέδιο χρησιμοποιείται κάτω από το σημείο διακοπής. Αυτά τα σημεία διακοπής βασίζονται γενικά στο πλάτος των προγραμμάτων περιήγησης.
• Ενώ σχεδιάζουν έναν ανταποκρινόμενο ιστότοπο, οι προγραμματιστές λαμβάνουν υπόψη το περιεχόμενο, το σχεδιασμό και την απόδοση του ιστότοπου σε όλες τις συσκευές εξασφαλίστε τη χρηστικότητα .

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

Σημείωση : Εκτός από το RWD υπάρχει μια άλλη προσέγγιση που ονομάζεται Προσαρμοσμένη σχεδίαση Ιστού ( ΑΝΩ ) . Στην προσέγγιση AWD, θα υπάρχει ένας συγκεκριμένος σχεδιασμός για κάθε συσκευή. Ωστόσο, το AWD μπορεί να μην είναι κατάλληλο πάντα. Εκτός αυτού, ο σχεδιασμός ιστότοπων AWD απαιτεί περισσότερο χρόνο και χρήμα σε σύγκριση με τους ιστότοπους RWD.

Πλεονεκτήματα του Responsive Design:

# 1) Εμπειρία χρήστη: Με βάση τη συσκευή από την οποία έχουμε πρόσβαση σε ένα RW, κρύβει τα ασυνήθιστα στοιχεία και βοηθά τους χρήστες να επιτύχουν τους στόχους τους γρηγορότερα.Για παράδειγμα:αν ανοίξουμε ένα RW από κινητό, τότε κρύβει τα ασήμαντα στοιχεία και επιταχύνει τη φόρτωση των ιστοσελίδων.

#δύο) Κοινή χρήση ή σύνδεση: Για RW χρησιμοποιείται μόνο μία διεύθυνση URL για διάφορες συσκευές. Δεδομένου ότι μόνο ένα URL συγκεντρώνει όλα τα δεδομένα και τις πληροφορίες από διάφορες συσκευές, παρέχει ένα καλύτερο UX για τους χρήστες.

# 3) Απαιτείται λίγη ή ελάχιστη συντήρηση για ένα RW.

# 4) Οι διατάξεις RW είναι ρευστές.

Διαφορές μεταξύ Σχεδιασμού Ιστού Αποκριτικής και Σχεδιασμού Ιστοσελίδων:

Τα RWD & AWD συνδέονται στενά μεταξύ τους.

• Το RWD αντιδρά γρήγορα και θετικά στις αλλαγές, ενώ το AWD μπορεί εύκολα να τροποποιηθεί για νέο σκοπό.
• Το RWD έχει πολλές διατάξεις πλέγματος ρευστού και το AWD έχει πολλές διατάξεις σταθερού πλάτους.
• Οι εικόνες στο RWD καλούνται ως ευαίσθητες στο περιβάλλον.

Κύρια συστατικά του Responsive Website Design:

Το Responsive Web Design έχει τρία κύρια στοιχεία:

# 1) Ευέλικτες διατάξεις: Δημιουργία ιστότοπου με ευέλικτο πλέγμα που μπορεί εύκολα να αλλάξει το μέγεθος σε οποιοδήποτε πλάτος δυναμικά.

#δύο) Ερωτήματα πολυμέσων: Παρέχετε διάφορα στυλ για τα προγράμματα περιήγησης και τις συσκευές με βάση το περιβάλλον, όπως τον προσανατολισμό της συσκευής, τη θύρα προβολής κ.λπ.

# 3)Ευέλικτο μέσο: Καθώς αλλάζει το μέγεθος των προβολών, τα μέσα (εικόνες, βίντεο κ.λπ.) πρέπει επίσης να αλλάξουν το μέγεθος ή την ανάλυσή τους σύμφωνα με την απαίτηση.

Σημείωση : Το 'Viewport' είναι η περιοχή του προγράμματος περιήγησης όπου εμφανίζεται το πραγματικό περιεχόμενο του ιστότοπου. Το Viewport δεν περιλαμβάνει τις γραμμές εργαλείων, τις καρτέλες κ.λπ.

Παραδείγματα σχεδιασμού αποκριτικών ιστοσελίδων

Παράδειγμα # 1)

Ανοίξτε τον σύνδεσμο www.fpl.com από διάφορες συσκευές και παρατηρήστε τη διεύθυνση URL. Η διεύθυνση URL ενός αποκριτικού ιστότοπου παραμένει ίδια για όλες τις συσκευές.

προς την) Προβολή του RW από επιτραπέζιο ή φορητό υπολογιστή (μεγάλο μέγεθος οθόνης)

σι) Προβολή του RW από tablet (μεσαίου μεγέθους οθόνης)

ντο) Προβολή του RW από κινητό (μικρό μέγεθος οθόνης)

Παράδειγμα # 2)

Ανοίξτε τον ιστότοπο www.yepme.com από φορητό υπολογιστή και επίσης από κινητό και συγκρίνετε τις διευθύνσεις URL. Αυτό yepme.com ο σύνδεσμος δεν είναι αποκριτικός σύνδεσμος.

προς την) Προβολή ενός ιστότοπου που δεν αποκρίνεται από επιτραπέζιο ή φορητό υπολογιστή

πώς να εισάγετε κώδικα σε έναν ιστότοπο

σι) Προβολή ενός ιστότοπου που δεν αποκρίνεται από ένα κινητό

Πώς να δοκιμάσετε έναν αποκριτικό ιστότοπο

Η μέτρηση του Responsive design test δοκιμή του ιστότοπου ή διεύθυνση URL από διαφορετικές συσκευές. Πρακτικά, δεν είναι δυνατόν να δοκιμάσετε πλήρως τον ιστότοπο που ανταποκρίνεται, γιατί για να το κάνουμε αυτό πρέπει να δημιουργήσουμε διάφορα συστήματα για διάφορα μεγέθη οθόνης.

Ένας πιθανός τρόπος για την αποκριτική δοκιμή είναι να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης σύμφωνα με το σενάριο δοκιμής.

Ορισμένα προγράμματα περιήγησης, όπως το IE και το Safari θα παρέχουν πρόσθετα ή επεκτάσεις προγράμματος περιήγησης που θα σας βοηθήσουν να δείτε την περιοχή της θύρας προβολής σε εικονοστοιχεία. Αυτό διευκολύνει τη δοκιμή, λαμβάνοντας το επιθυμητό μέγεθος οθόνης τροποποιώντας τα pixel.

Άλλα προγράμματα περιήγησης όπως το Chrome παρέχουν λογισμικό ή πρόγραμμα που ονομάζεται «Εξομοιωτής» που θα σας βοηθήσει να αλλάξετε τις δυνατότητες της οθόνης και το περιβάλλον σύμφωνα με την επιθυμητή συσκευή που απαιτείται για τη δοκιμή.

Σημείωση: «Εξομοιωτής» είναι λογισμικό ή πρόγραμμα που παρέχεται στο πρόγραμμα περιήγησης που κάνει το σύστημα κεντρικού υπολογιστή (τρέχον πρόγραμμα περιήγησης) να συμπεριφέρεται όπως το σύστημα επισκεπτών (πρόγραμμα περιήγησης της επιθυμητής συσκευής που πρόκειται να ελεγχθεί για το επιθυμητό μέγεθος οθόνης).

Παρόλο που οι εξομοιωτές δεν μπορούν να σας δώσουν το ακριβές περιβάλλον που απαιτείται για τη δοκιμή, είναι μια οικονομική λύση για να δοκιμάσετε ένα RW σε υψηλό επίπεδο.

Δείγμα σεναρίων δοκιμής για αποκριτική δοκιμή ιστότοπου:

Ο υπεύθυνος δοκιμαστής σχεδιασμού ιστοσελίδων θα πρέπει να βεβαιωθεί ότι ο ανταποκρινόμενος σχεδιασμός ικανοποιεί όλα τα παρακάτω σενάρια δοκιμής για να βεβαιωθείτε ότι είναι σχεδιασμός χωρίς σφάλματα.

# 1) Ο αποκριτικός σύνδεσμος ιστότοπου ή η διεύθυνση URL πρέπει να είναι ο ίδιος για όλα τα προγράμματα περιήγησης σε κάθε συσκευή ανεξάρτητα από την ανάλυση της οθόνης.

Υποθέτω www.abc.com είναι ένας ιστότοπος που ανταποκρίνεται. Εάν το ανοίξουμε σε φορητό υπολογιστή και σε κινητό τηλέφωνο, τότε η διεύθυνση URL θα πρέπει να είναι η ίδια και στις δύο συσκευές. Ο ιστότοπος που έχει ανοίξει στο πρόγραμμα περιήγησης για κινητά δεν πρέπει να ξεκινά με www.m.abc.com ή www.mobile.abc.com

Παράδειγμα: Ανοίξτε τον ιστότοπο www.kotak.com από φορητό υπολογιστή και ανοίξτε το ίδιο και από κινητό και παρατηρήστε τη διεύθυνση URL και στις δύο συσκευές. Το URL δεν είναι το ίδιο και για τις δύο συσκευές.

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

Ανοίξτε τον ιστότοπο www.w3schools.com από φορητό υπολογιστή και από κινητό και ελέγξτε τις διευθύνσεις URL. Θα πρέπει να είναι το ίδιο και για τις δύο συσκευές.

Στο παρακάτω στιγμιότυπο φαίνεται ότι η διεύθυνση URL παραμένει η ίδια για έναν ιστότοπο που ανταποκρίνεται σε διαφορετικές συσκευές:

#δύο) Η θέση εμφάνισης του περιεχομένου (εικόνες, δευτερεύοντες σύνδεσμοι, μενού κ.λπ.) ενός ανταποκριτικού ιστότοπου θα πρέπει να αλλάζει δυναμικά σύμφωνα με την αλλαγή στην ανάλυση οθόνης. Δηλαδή, εάν αλλάξουμε την ανάλυση της οθόνης από το μέγεθος του φορητού υπολογιστή σε κινητό, τότε η εμφάνιση των επιλογών μενού θα πρέπει να αλλάξει δυναμικά.

Παράδειγμα: Ανοίξτε τον σύνδεσμο www.fpl.com από φορητό υπολογιστή και κάντε κλικ στο μενού στη δεξιά επάνω γωνία του παραθύρου. Οι επιλογές μενού εμφανίζονται όπως φαίνεται παρακάτω:

το καλύτερο αναδυόμενο μπλοκ για το χρώμιο

Ανοιξε www.fpl.com από κινητό και κάντε κλικ στο μενού στη δεξιά επάνω γωνία του παραθύρου. Οι επιλογές μενού έχουν ως εξής:

Σημείωση: Αυτό το σενάριο μπορεί επίσης να δοκιμαστεί χρησιμοποιώντας εξομοιωτές προγράμματος περιήγησης (Πρώην:χρώμιο).

Ανοίξτε τον ιστότοπο www.fpl.com μέσω επιτραπέζιου υπολογιστή και παρατηρήστε πώς εμφανίζονται οι επιλογές μενού. Δείτε παρακάτω το στιγμιότυπο:

Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης σε αυτό του μεγέθους της οθόνης του κινητού και, στη συνέχεια, ελέγξτε την εμφάνιση των επιλογών του μενού. Δείτε παρακάτω το στιγμιότυπο:

# 3) Οι διευθύνσεις URL ενός αποκριτικού ιστότοπου πρέπει επίσης να είναι συγκεκριμένες ως προς την ανάλυση.

Προαπαιτούμενο για τη δοκιμή αυτού του σεναρίου: Ζητήστε από τον προγραμματιστή να εισαγάγει οποιονδήποτε δευτερεύοντα σύνδεσμο στον ιστότοπο Responsive testing όπου ο δευτερεύων σύνδεσμος δεν αποκρίνεται.

Για παράδειγμα, ο προγραμματιστής μπορεί να εισαγάγει σύνδεσμο www.snapdeal.com στον ιστότοπο δοκιμών μας.

Τώρα, ανοίξτε τον αποκριτικό ιστότοπο δοκιμών από ένα κινητό και κάντε κλικ στον δευτερεύοντα σύνδεσμο που αναφέρεται στην προϋπόθεση. Στη συνέχεια, η διεύθυνση URL του δευτερεύοντος συνδέσμου πρέπει να αλλάξει σε https://m.snapdeal.com .

# 4) Το ίδιο σενάριο μπορεί να δοκιμαστεί και από φορητό υπολογιστή. Ανοίξτε το RW από επιτραπέζιο ή φορητό υπολογιστή και κάντε κλικ στον δευτερεύοντα σύνδεσμο (που αναφέρεται στην προϋπόθεση του σεναρίου δοκιμής 3) που δεν ανταποκρίνεται. Η διεύθυνση URL του δευτερεύοντος συνδέσμου δεν πρέπει να αλλάξει (καθώς δοκιμάζουμε αυτό το σενάριο από το φορητό υπολογιστή, η διεύθυνση URL θα πρέπει να παραμείνει η ίδια).

# 5) Προαπαιτούμενο για τη δοκιμή αυτού του σεναρίου: Ζητήστε από τον προγραμματιστή να εισαγάγει οποιονδήποτε δευτερεύοντα σύνδεσμο,για παράδειγμα, www.paytm.com στον ιστότοπο δοκιμών. Η κινητή συσκευή στην οποία πρόκειται να εκτελέσετε αυτό το σενάριο θα πρέπει να έχει την αντίστοιχη εφαρμογή του Paytm εγκατεστημένη στο κινητό.

Τώρα ανοίξτε τον ιστότοπο που ανταποκρίνεται στις δοκιμές από ένα κινητό και κάντε κλικ στον δευτερεύοντα σύνδεσμο 'paytm'. Στη συνέχεια, πρέπει να ανοίξει η εφαρμογή Paytm που είναι εγκατεστημένη στο κινητό. (Ο χρήστης δεν πρέπει να ανακατευθυνθεί στον ιστότοπο στο πρόγραμμα περιήγησης ή σε άλλο παράθυρο. Μόνο η εφαρμογή πρέπει να είναι ανοιχτή.)

# 6) Οι εικόνες στον αποκριτικό ιστότοπο είναι συγκεκριμένες για ανάλυση. Αυτό σημαίνει ότι η ανάλυση της εικόνας που έχει εισαχθεί στον κώδικα του ιστότοπου απόκρισης που έχει σχεδιαστεί για συμβατότητα με κινητά είναι διαφορετική από αυτήν της επιφάνειας εργασίας ή του tablet. Κάθε μέγεθος οθόνης πρέπει να έχει τη συγκεκριμένη εικόνα του στο σχεδιασμό.

Προαπαιτούμενο για τη δοκιμή αυτού του σεναρίου: Ο έλεγχος και ο έλεγχος της ανάλυσης των εικόνων θα μπορούσε να είναι δύσκολο έργο. Ζητήστε από τον προγραμματιστή να εισαγάγει τρεις διαφορετικές εικόνες στον ιστότοπο απόκρισης ξεχωριστά για κινητά, tablet και επιτραπέζιους υπολογιστές.

Ανοίξτε τον ιστότοπο σχεδίασης που ανταποκρίνεται στις δοκιμές από επιτραπέζιο υπολογιστή, tablet και κινητό. Οι εικόνες στην αποκριτική ιστοσελίδα πρέπει να είναι διαφορετικές και για τις τρεις συσκευές.

(Ή)

Ανοίξτε το δοκιμαστικό RW από μια επιφάνεια εργασίας και ελέγξτε την εικόνα στην ιστοσελίδα. Αλλάξτε το μέγεθος του παραθύρου σε αυτό ενός tablet και ελέγξτε την εικόνα. Αυτό θα πρέπει να είναι διαφορετικό από αυτό της εικόνας που εμφανίζεται για το μέγεθος της οθόνης της επιφάνειας εργασίας. Τώρα μπορείτε να αλλάξετε το μέγεθος του παραθύρου στο μέγεθος της οθόνης του κινητού και να ελέγξετε την εικόνα. Αυτή η εικόνα πρέπει επίσης να διαφέρει από τις δύο παραπάνω εικόνες.

Παράδειγμα: Ανοίξτε τον ιστότοπο που ανταποκρίνεται www.fpl.com από επιτραπέζιο υπολογιστή κάντε δεξί κλικ στην εικόνα στο αρχική σελίδα -> επιλέξτε 'Επιθεώρηση' από το μενού. Ελέγξτε την ανάλυση της εικόνας (ελέγξτε την επέκταση ονόματος αρχείου εικόνας .jpg) από τον κωδικό. Δείτε το παρακάτω στιγμιότυπο οθόνης:

Αλλάξτε το μέγεθος του ίδιου παραθύρου σε αυτό του μεγέθους της οθόνης tablet και ελέγξτε για την ανάλυση της εικόνας. (Η επέκταση ονόματος εικόνας είναι medium.jpg)

Τέλος, αλλάξτε το μέγεθος του παραθύρου σε αυτό του μεγέθους της οθόνης του κινητού και ελέγξτε την εικόνα. (Η επέκταση ονόματος εικόνας είναι small.jpg)

# 7) Κάντε κλικ σε τυχαία θέση οπουδήποτε στην ιστοσελίδα και ελέγξτε εάν οποιαδήποτε δεδομένα ή κείμενο που δεν είναι υπερσυνδεδεμένοι ξεκινούν και ανακατευθύνονται σε οποιαδήποτε άλλη σελίδα ή περιεχόμενο. Αυτό ελέγχει εάν οποιαδήποτε λέξη ή κείμενο επισημαίνεται ως υπερσύνδεσμος στο πίσω μέρος .

Σημείωση : Σε μερικά έργα, οι απαιτήσεις μιλούν για το μέγεθος των pixel και την ανάλυση της οθόνης για συγκεκριμένες συσκευές. (Για παράδειγμα, η προβολή tablet για το RW πρέπει να είναι στα 15:15 pixel και για κινητό, θα πρέπει να είναι στις 10:10 κ.λπ.)

Ο έλεγχος για τις δυναμικές αλλαγές που πρέπει να συμβούν στην οθόνη RW όταν αλλάζουμε το μέγεθος των pixel είναι το κύριο σενάριο.

# 8) Ανοίξτε το δοκιμαστικό RW σε ένα πρόγραμμα περιήγησης και δείτε τα περιεχόμενα και την προβολή των κύριων εικόνων. Τώρα αλλάξτε το μέγεθος του παραθύρου μέχρι το σημείο διακοπής του μεγέθους του tablet και επαληθεύστε τις αλλαγές που πρέπει να συμβούν στην ανάλυση της εικόνας και σε οποιοδήποτε άλλο περιεχόμενο. Σε σημεία διακοπής, οι αλλαγές πρέπει να συμβούν δυναμικά (μερικές φορές οι αλλαγές δεν θα συμβούν στα σημεία διακοπής και ενδέχεται να αλλάξουν σε κάποιο άλλο μέγεθος εικονοστοιχείου που είναι ελάττωμα.)

Εργαλεία για τη δοκιμή ενός αποκριτικού ιστότοπου

Υπάρχουν λίγα εργαλεία (ιστότοποι) που θα σας επιτρέψουν να κάνετε προεπισκόπηση των ιστοσελίδων του ιστότοπου μας που ανταποκρίνεται.

Για παράδειγμα,μπορούμε να δοκιμάσουμε τον ιστότοπο που ανταποκρίνεται σε διαφορετικές προκαθορισμένες αναλύσεις οθόνης (smartphone, tablet κ.λπ.) και επίσης να προσαρμόσουμε την επιθυμητή ανάλυση. Αυτά τα εργαλεία κάνουν τις δραστηριότητες δοκιμών ευκολότερες και γρηγορότερες. Τέτοια εργαλεία του προγράμματος περιήγησης μπορούν να ονομαστούν ως Αποκριτής .

Ορισμένα εργαλεία προσφέρουν επίσης ένα σημαντικό χαρακτηριστικό της καταγραφής του αποκριτικού στιγμιότυπου οθόνης που μπορεί να μας βοηθήσει να δοκιμάσουμε τα σχέδια ιστότοπου, HTML, διατάξεις, CSS κ.λπ. του αποκριτικού ιστότοπου.

Αυτά τα εργαλεία είναι εξαιρετικές εναλλακτικές λύσεις όταν οι πραγματικές συσκευές δεν είναι διαθέσιμες ή έτοιμες.

Εδώ είναι μια γρήγορη λίστα εργαλείων:

# 1) Έλεγχος σχεδιασμού απόκρισης

Εισαγάγετε τη διεύθυνση URL του αποκριτικού ιστότοπου που πρέπει να δοκιμαστεί στο παραπάνω πεδίο 'Εισαγάγετε τη διεύθυνση URL σας εδώ' και κάντε κλικ στο 'GO'. Μπορείτε ακόμη να επιλέξετε τη συσκευή και την ανάλυση στην οποία θέλετε να δείτε τον ιστότοπο που ανταποκρίνεται.

Τώρα εισάγετε www.fpl.com στο πεδίο, επιλέξτε τη διάταξη 'Nexus 7 PORTRAIT' και κάντε κλικ στο GO. Ο ιστότοπος εμφανίζεται με την ανάλυση της επιλεγμένης μορφής.

#δύο) Πεταλούδα

Εισαγάγετε τον ιστότοπο δοκιμών www.fpl.com και κάντε κλικ στο GO.

Αλλάξτε τη διάταξη σε επιτραπέζιο υπολογιστή, tablet, κινητό κ.λπ. και δοκιμάστε τον ιστότοπο. Με αυτό το εργαλείο, μπορείτε ακόμη και να προσαρμόσετε την ανάλυση.

Για παράδειγμα, ρυθμίστε την ανάλυση της οθόνης σε 512 x 256 και δοκιμάστε τον ιστότοπο.

Σημείωση : Με αυτό το εργαλείο, μπορείτε ακόμη και να δοκιμάσετε σενάριο 6 εύκολα αλλάζοντας τις αναλύσεις και επαληθεύοντας την ονομασία της εικόνας.

# 3) Designmodo

Εισαγάγετε οποιαδήποτε διεύθυνση URL, www.makemytrip.com και κάντε κλικ στο Enter.

Στη δεξιά επάνω πλευρά του προγράμματος περιήγησης, έχετε την επιλογή να αλλάξετε τη διάταξη του ιστότοπου σε αυτήν του συγκεκριμένου κινητού μοντέλου ή συσκευής κ.λπ.

Σημείωση : Αυτό το εργαλείο έχει ένα άλλο χαρακτηριστικό όπως σύροντας την οθόνη και τροποποίηση της ανάλυσης στην επιθυμητή ανάλυση.

# 4) είναι ανταποκρινόμενο

Εισαγάγετε τη δοκιμαστική διεύθυνση URL, www.fpl.com στο πεδίο και κάντε κλικ στο κουμπί 'Δοκιμή'.

Σημείωση: Αυτό το εργαλείο έχει μόνο μερικές επιλογές σταθερής διάταξης στις οποίες μπορεί να ελεγχθεί ο ιστότοπός μας.

# 5) Μάτκερσλι

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

Τώρα εισαγάγετε τη διεύθυνση URL δοκιμής στη γραμμή διευθύνσεων και κάντε κλικ στο enter. Μπορείτε να δείτε το RW σε πολλά μεγέθη οθόνης κάθε φορά.

# 6) Από προεπιλογή, Το chrome έχει λίγα εργαλεία Dev μέσω της οποίας μπορούμε να προσομοιώσουμε τη λειτουργία της συσκευής και τις δυνατότητές τους.

Για να χρησιμοποιήσετε αυτήν τη δυνατότητα του chrome, ανοίξτε οποιονδήποτε ιστότοπο σχεδίασης που ανταποκρίνεται στις δοκιμές www.fpl.com στο chrome και κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε 'Επιθεώρηση' από το μενού ή πατήστε Ctrl + Shift + I. Το παρακάτω παράθυρο ανοίγει στο κάτω μέρος της ιστοσελίδας.

Τώρα κάντε κλικ στο εικονίδιο όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Ανοίγει η λειτουργία για κινητά της ιστοσελίδας. Από αυτό, μπορείτε να αλλάξετε την ανάλυση σε οποιοδήποτε συγκεκριμένο εικονοστοιχείο και επίσης σε οποιοδήποτε προκαθορισμένο μοντέλο κινητού που εμφανίζεται στο αναπτυσσόμενο μενού. Δείτε το παρακάτω στιγμιότυπο για να πάρετε μια σαφή ιδέα:

Σημείωση: Μπορούμε επίσης να αλλάξουμε την ιστοσελίδα σε κατακόρυφη ή οριζόντια προβολή.

Άλλα καλά εργαλεία για τον έλεγχο της απόκρισης σχεδίασης:

7) Ανταποκρίσιμος σχεδιασμός
8) Πρόγραμμα περιήγησης
9) Τροία
10) Σχεδιασμός AmIResponsive
έντεκα) Αποκριτής
12) Στούντιο
13) Αποκριτική δοκιμή
14) Για μηχανές MAC έχουμε μια ξεχωριστή εφαρμογή που ονομάζεται « ΚΑΤΑΛΛΗΛΟΣ 'Για να δοκιμάσετε ένα RW. Αυτή η εφαρμογή σας επιτρέπει να ρυθμίσετε διάφορα σημεία διακοπής σε διάφορες συσκευές για δοκιμή. Το APTUS δεν είναι μια δωρεάν εφαρμογή και πρέπει να το αγοράσουμε από το Mac App Store.

Προκλήσεις δοκιμής ανταποκριτικού σχεδιασμού και πιθανών λύσεων

Δυναμική στρατηγική δοκιμών

Η μετακίνηση από 320 × 480 (η ανάλυση του iPhone4) στα 2048 × 2048 (μια μεγάλη οθόνη) αφήνει πάνω από 4 εκατομμύρια πιθανά μεγέθη προγράμματος περιήγησης. Οι περισσότερες ομάδες δοκιμών θα περιορίσουν τη λίστα των συσκευών δοκιμής σε μια χούφτα. Ακόμα και τότε, το πρόβλημα της μη αυτόματης δοκιμής είναι δύσκολο ή αδύνατο να προσεγγιστεί.

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

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

Ας ρίξουμε μια ματιά σε έναρεαλιστικό παράδειγμαγια να διευκρινίσει το πρόβλημα.

Οι δυναμικές σελίδες, όπως τα ρυθμιστικά διαφημίσεων και το περιεχόμενο που μεταδίδεται από χρήστες σε διαφορετικά μεγέθη σελίδων, αποτελούν βασικό στοιχείο πολλών προϊόντων λογισμικού. Προσθέστε σε αυτό το γεγονός ότι δεν μπορούμε να προβλέψουμε πώς θα εμφανίζεται η σελίδα και πολλές προσπάθειες αυτοματισμού ξεκινούν με αποτυχία.

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

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

Αυτή η προσέγγιση απαιτεί χρόνο και πόρους. Θα χρειαστείτε χρόνο από κάποιον με πρόσβαση στη βάση δεδομένων, συνήθως DBA, για να δημιουργήσετε και να ενημερώσετε τις εξαγωγές βάσης δεδομένων. Και, κάποιος πρέπει να δημιουργήσει scripts setup και teardown scripts για να διατηρήσει το περιβάλλον δοκιμής. Μετά από όλη αυτή την προσπάθεια, μπορεί να καταλήξετε με τον τύπο απολυμαντικών σφαλμάτων που λατρεύουν να κρύβουν.

Εναλλακτικά, θα μπορούσατε να χρησιμοποιήσετε την τεχνολογία Visual Testing για να αυτοματοποιήσετε τις δοκιμές σε ιστοσελίδες που ποικίλλουν στη διάταξη και το περιεχόμενο. Χρησιμοποιώντας αυτό το εργαλείο, μπορείτε να δημιουργήσετε δοκιμές χωρίς αλλαγές στο περιβάλλον δοκιμής σας και χωρίς να απαιτήσετε σύνολα δεξιοτήτων από άτομα εκτός της ομάδας δοκιμών σας.

Ας δούμε ένα παράδειγμα.

Εξετάστε την εφαρμογή Twitter για κινητά.

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

Χρησιμοποιώντας ένα οπτικό εργαλείο δοκιμών, μπορείτε να ξεκινήσετε εκτελώντας μια καταγραφή οθόνης ολόκληρης της σελίδας με δυνατότητα κύλισης, όχι μόνο της περιοχής με δυνατότητα προβολής. Θα μπορούσατε να ορίσετε μια επιλογή σύγκρισης που αγνοεί το περιεχόμενο κειμένου, αλλά εστιάζει στα στοιχεία της σελίδας.

Για παράδειγμα, θα μπορούσατε να δείτε ότι υπάρχουν τα πεδία για τα tweets, ότι κάθε tweet έχει ένα στοιχείο ονόματος και ένα στοιχείο ημερομηνίας / ώρας, χωρίς να ανησυχείτε για το τι υπάρχει στα στοιχεία.

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

Αποκριτική δοκιμή για ανταποκρινόμενο σχεδιασμό:

Ο ανταποκρινόμενος σχεδιασμός έχει προσθέσει το συνδυαστικό πρόβλημα σε κάθε διαθέσιμη πλατφόρμα. Η ερώτηση είναι; από όλες αυτές τις πιθανές πλατφόρμες και μεγέθη οθόνης, τα οποία επιλέγουμε για την καλύτερη κάλυψη δοκιμών.

Η μείωση του αριθμού των περιβαλλόντων που καλύπτουμε μόνο στα πιο δημοφιλή καθιστά την τεχνική εργασία ευκολότερη, ενώ αγνοεί επίσης το πρόβλημα κάλυψης.

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

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

Ο στόχος είναι καλή κάλυψη διεπαφής χρήστη με λογικό βάρος συντήρησης. Η οπτική δοκιμή είναι η μόνη ισχυρή και επεκτάσιμη επιλογή σας.

Συμβουλές για αποκριτική δοκιμή Ιστού

# 1) Ενώ δοκιμάζετε ένα RW, θα πρέπει να έχετε υπόψη σας τη συνοχή του σχεδιασμού, όπως η ευθυγράμμιση εικόνων, κειμένων, γεμισμάτων γύρω από τις άκρες κ.λπ. σε όλα τα προγράμματα περιήγησης και τα λειτουργικά συστήματα.

#δύο) Κατά τη διάρκεια της δοκιμής ενός RW, ο ελεγκτής πρέπει να γνωρίζει τι πρέπει να δοκιμάσει και πώς να δοκιμάσει σε πολλές συσκευές σε διαφορετικά σημεία διακοπής. Διαφορετικά, θα μπορούσε να είναι αρκετά εξαντλητικό και αποπροσανατολιστικό.

# 3) Για ενδελεχή δοκιμή σε έναν ιστότοπο που ανταποκρίνεται, ο συντονιστής δοκιμών και προγραμματιστών είναι απαραίτητος. Ο προγραμματιστής πρέπει να βοηθήσει τους υπεύθυνους δοκιμών στη δημιουργία των συνθηκών που αναφέρονται στις προϋποθέσεις των δοκιμαστικών περιπτώσεων.

# 4) Ελέγξτε αν οι ιστοσελίδες είναι αναγνώσιμες σε όλες τις αναλύσεις, δηλαδή το περιεχόμενο πρέπει να είναι αναγνώσιμο ακόμη και αν αλλάξουμε το μέγεθος του προγράμματος περιήγησης σε μέγεθος οθόνης για κινητά.

# 5) Το σημαντικό περιεχόμενο του RW θα πρέπει να είναι ορατό για όλα τα σημεία διακοπής, δηλαδή αν αλλάξουμε το μέγεθος του προγράμματος περιήγησης από την οθόνη του επιτραπέζιου υπολογιστή στην οθόνη του κινητού, τότε οι κύριες εικόνες, το κύριο κείμενο, το μενού κ.λπ. θα πρέπει να παραμείνουν οι ίδιες.

# 6) Εάν το πρόγραμμα περιήγησης αλλάξει το μέγεθος για δοκιμή, τότε οποιαδήποτε περιοχή κλικ (όπως κουμπιά, μενού, δευτερεύοντες σύνδεσμοι κ.λπ.) του RW θα πρέπει να είναι κατάλληλη για κλικ.

# 7) Η αλλαγή μεγέθους του προγράμματος περιήγησης και η δοκιμή του ιστότοπου που ανταποκρίνεται μπορεί να εντοπίσει μόνο μερικά σημαντικά ζητήματα, ενώ ενδέχεται να υπάρχουν μερικά άλλα ζητήματα που σχετίζονται με τα δάχτυλα, κτυπήματα κ.λπ. σε κινητές συσκευές. Ο έλεγχος αυτών των συγκεκριμένων λειτουργιών στις πραγματικές συσκευές μπορεί να οδηγήσει σε καλύτερη εύρεση και αφαίρεση ελαττωμάτων.

συμπέρασμα

Όταν δοκιμάζουμε το Responsive design θα έχει πολλές προκλήσεις. Πρέπει να σκεφτείτε με αποτελεσματικό τρόπο για να ξεπεράσετε τις προκλήσεις.

Ο έλεγχος μιας ιστοσελίδας που ανταποκρίνεται είναι πολύ σημαντικός για ένα επιτυχημένο μέλλον πολλών κινητές εφαρμογές. Οι χρήστες κινητής τηλεφωνίας θα αυξηθούν μόνο και οι προσδοκίες τους ποικίλλουν πολύ από αυτές των επιτραπέζιων χρηστών. Η εφαρμογή και η ενδελεχής δοκιμή του RWD είναι ένας πολύ καλός τρόπος για να ρυθμίσετε τον ιστότοπό σας ώστε να ανταποκρίνεται στις προσδοκίες.

Η εφαρμογή και η ενδελεχής δοκιμή του RWD είναι ένας πολύ καλός τρόπος για να ρυθμίσετε τον ιστότοπό σας ώστε να ανταποκρίνεται στις προσδοκίες.

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

c ++ μετατρέψτε τον πίνακα char σε int

Σχετικά με τον Συγγραφέα: Αυτή είναι μια θέση επισκεπτών του Laxmi. Έχει 7+ χρόνια εμπειρίας δοκιμών λογισμικού και εργάζεται ως ανώτερος μηχανικός δοκιμών λογισμικού.

Δοκιμάστε όλα τα παραδείγματα που παρέχονται σε αυτό το άρθρο και ενημερώστε μας εάν έχετε οποιεσδήποτε ερωτήσεις / σχόλια για το ίδιο.

Συνιστώμενη ανάγνωση

• Δοκιμή άλφα και δοκιμή beta (Ένας πλήρης οδηγός)
• Πλήρης οδηγός δοκιμής επαλήθευσης έκδοσης (BVT Testing)
• Λειτουργική δοκιμή εναντίον μη λειτουργική δοκιμή
• Τύποι δοκιμών λογισμικού: Διαφορετικοί τύποι δοκιμών με λεπτομέρειες
• Τα καλύτερα εργαλεία δοκιμής λογισμικού 2021 (QA Test Automation Tools)
• Εγχειρίδιο δοκιμών αποθήκης δεδομένων δοκιμών ETL (ένας πλήρης οδηγός)
• Οδηγός δοκιμών ασφάλειας εφαρμογών Ιστού
• Οι καλύτερες υπηρεσίες δοκιμής λογισμικού QA από το SoftwareTestingHelp