Είμαι σε ανάπτυξη front-end αρκετό καιρό για να δω μια τάση όλα αυτά τα χρόνια: νεότεροι προγραμματιστές που εργάζονται με ένα νέο πρότυπο προγραμματισμού χωρίς να κατανοούν το ιστορικό του πλαίσιο. Είναι, φυσικά, απολύτως κατανοητό να μην γνωρίζουμε κάτι. Ο Ιστός είναι ένα πολύ μεγάλο μέρος με ποικίλες δεξιότητες και ειδικότητες και δεν γνωρίζουμε πάντα αυτό που δεν ξέρουμε. Η μάθηση σε αυτόν τον τομέα είναι ένα διαρκές ταξίδι και όχι κάτι που συμβαίνει μια φορά και τελειώνει. Παράδειγμα: Κάποιος από την ομάδα μου ρώτησε εάν ήταν δυνατό να διαπιστωθεί εάν οι χρήστες απομακρύνονται από μια συγκεκριμένη καρτέλα στη διεπαφή χρήστη. Επισήμανα το συμβάν πριν από τη λήψη της JavaScript. Αλλά όσοι το έχουν αντιμετωπίσει στο παρελθόν, γνωρίζουν ότι αυτό είναι δυνατό, επειδή έχουν ειδοποιηθεί σχετικά με μη αποθηκευμένα δεδομένα σε άλλους ιστότοπους, για τους οποίους η προεκφόρτωση είναι μια τυπική περίπτωση χρήσης. Επισήμανα επίσης τα συμβάντα pageHide and visibilityChange στον συνάδελφό μου για καλό μέτρο. Πώς το ήξερα για αυτό; Επειδή προέκυψε σε ένα άλλο έργο, όχι επειδή το μελέτησα όταν μάθαινα αρχικά JavaScript. Γεγονός είναι ότι τα σύγχρονα front-end πλαίσια στέκονται στους ώμους των τεχνολογικών κολοσσών που προηγήθηκαν. Αφαιρούν πρακτικές ανάπτυξης, συχνά για μια καλύτερη εμπειρία προγραμματιστή που μειώνει, ή ακόμα και εξαλείφει, την ανάγκη να γνωρίζουν ή να αγγίζουν ό,τι ήταν παραδοσιακά βασικές έννοιες του front-end που πιθανότατα θα έπρεπε να γνωρίζουν όλοι. Εξετάστε το μοντέλο αντικειμένου CSS (CSSOM). Μπορεί να περιμένετε ότι οποιοσδήποτε εργάζεται σε CSS και JavaScript έχει μια δέσμη πρακτικής εμπειρίας CSSOM, αλλά αυτό δεν θα συμβαίνει πάντα. Υπήρχε ένα έργο React για έναν ιστότοπο ηλεκτρονικού εμπορίου στον οποίο εργάστηκα, όπου έπρεπε να φορτώσουμε ένα φύλλο στυλ για τον επί του παρόντος επιλεγμένο πάροχο πληρωμών. Το πρόβλημα ήταν ότι το φύλλο στυλ φορτωνόταν σε κάθε σελίδα όταν χρειαζόταν πραγματικά μόνο σε μια συγκεκριμένη σελίδα. Ο προγραμματιστής που είχε επιφορτιστεί να το κάνει αυτό δεν είχε ποτέ φορτώσει ένα φύλλο στυλ δυναμικά. Και πάλι, αυτό είναι απολύτως κατανοητό όταν το React αφαιρεί την παραδοσιακή προσέγγιση για την οποία μπορεί να είχατε προσεγγίσει. Το CSSOM πιθανότατα δεν είναι κάτι που χρειάζεστε στην καθημερινή σας εργασία. Αλλά είναι πιθανό να χρειαστεί να αλληλεπιδράσετε μαζί του κάποια στιγμή, ακόμη και σε μια μεμονωμένη περίπτωση. Αυτές οι εμπειρίες με ενέπνευσαν να γράψω αυτό το άρθρο. Υπάρχουν πολλές υπάρχουσες λειτουργίες και τεχνολογίες ιστού στην άγρια φύση που μπορεί να μην αγγίξετε ποτέ απευθείας στην καθημερινή σας εργασία. Ίσως είστε αρκετά νέος στην ανάπτυξη ιστού και απλά δεν τα γνωρίζετε επειδή είστε βυθισμένοι στην αφαίρεση ενός συγκεκριμένου πλαισίου που δεν απαιτεί να το γνωρίζετε σε βάθος ή ακόμα και καθόλου. Μιλώ συγκεκριμένα για την XML, η οποία πολλοί από εμάς γνωρίζουμε ότι είναι μια αρχαία γλώσσα που δεν διαφέρει εντελώς από την HTML. Το αναφέρω αυτό λόγω πρόσφατων συζητήσεων WHATWG που υποδηλώνουν ότι ένα σημαντικό κομμάτι της στοίβας XML που είναι γνωστό ως προγραμματισμός XSLT θα πρέπει να αφαιρεθεί από τα προγράμματα περιήγησης. Αυτό είναι ακριβώς το είδος της παλαιότερης, υπάρχουσας τεχνολογίας που είχαμε εδώ και χρόνια που θα μπορούσε να χρησιμοποιηθεί για κάτι τόσο πρακτικό όσο η κατάσταση CSSOM στην οποία βρισκόταν η ομάδα μου. Έχετε δουλέψει με το XSLT στο παρελθόν; Ας δούμε αν κλίνουμε πολύ σε αυτήν την παλαιότερη τεχνολογία και αξιοποιούμε τις δυνατότητές της εκτός του πλαισίου της XML για να αντιμετωπίσουμε προβλήματα του πραγματικού κόσμου σήμερα. XPath: Το κεντρικό API Η πιο σημαντική τεχνολογία XML που είναι ίσως η πιο χρήσιμη εκτός μιας ευθείας προοπτικής XML είναι η XPath, μια γλώσσα ερωτημάτων που σας επιτρέπει να βρείτε οποιονδήποτε κόμβο ή χαρακτηριστικό σε ένα δέντρο σήμανσης με ένα στοιχείο ρίζας. Έχω μια προσωπική αγάπη για το XSLT, αλλά αυτό βασίζεται επίσης στο XPath και η προσωπική στοργή πρέπει να παραμεριστεί στη σημασία της κατάταξης. Το επιχείρημα για την κατάργηση του XSLT δεν κάνει καμία αναφορά στο XPath, οπότε υποθέτω ότι εξακολουθεί να επιτρέπεται. Αυτό είναι καλό γιατί το XPath είναι το κεντρικό και πιο σημαντικό API σε αυτήν τη σουίτα τεχνολογιών, ειδικά όταν προσπαθείτε να βρείτε κάτι για χρήση εκτός της κανονικής χρήσης XML. Είναι σημαντικό γιατί, ενώ οι επιλογείς CSS μπορούν να χρησιμοποιηθούν για να βρουν τα περισσότερα από τα στοιχεία στη σελίδα σας, δεν μπορούν να τα βρουν όλα. Επιπλέον, οι επιλογείς CSS δεν μπορούν να χρησιμοποιηθούν για την εύρεση ενός στοιχείου με βάση την τρέχουσα θέση του στο DOM. Το XPath μπορεί. Τώρα, κάποιοι από εσάς που διαβάζετε αυτό μπορεί να γνωρίζετε το XPath και κάποιοι ίσως όχι. Το XPath είναι ένας αρκετά μεγάλος τομέας τεχνολογίας και δεν μπορώ πραγματικά να διδάξω όλα τα βασικά και επίσης να σας δείξω ωραία πράγματα που μπορείτε να κάνετε με αυτό σε ένα μόνο άρθρο σαν αυτό. Προσπάθησα πραγματικά να γράψω αυτό το άρθρο, αλλά η μέση δημοσίευση του Smashing Magazine δεν ξεπερνά τις 5.000 λέξεις. Ήμουν ήδη σε περισσότερα από2.000 λέξεις ενώ μόλις στα μισά του δρόμου είναι τα βασικά. Λοιπόν, θα αρχίσω να κάνω καταπληκτικά πράγματα με το XPath και θα σας δώσω μερικούς συνδέσμους που μπορείτε να χρησιμοποιήσετε για τα βασικά, εάν βρίσκετε ενδιαφέροντα αυτά τα πράγματα. Συνδυασμός XPath & CSS Το XPath μπορεί να κάνει πολλά πράγματα που οι επιλογείς CSS δεν μπορούν να κάνουν κατά την υποβολή ερωτημάτων σε στοιχεία. Αλλά οι επιλογείς CSS μπορούν επίσης να κάνουν μερικά πράγματα που το XPath δεν μπορεί, δηλαδή, να ρωτήσει στοιχεία βάσει ονόματος κλάσης.
CSS XPath .myClass /*[περιέχει(@class, "myClass")]
Σε αυτό το παράδειγμα, το CSS ρωτά στοιχεία που περιέχουν ένα όνομα τάξης .myClass. Εν τω μεταξύ, το παράδειγμα XPath θέτει ερωτήματα σε στοιχεία που περιέχουν μια κλάση χαρακτηριστικών με τη συμβολοσειρά "myClass". Με άλλα λόγια, επιλέγει στοιχεία με myClass σε οποιοδήποτε χαρακτηριστικό, συμπεριλαμβανομένων στοιχείων με το όνομα κλάσης .myClass — καθώς και στοιχεία με "myClass" στη συμβολοσειρά, όπως .myClass2. Το XPath είναι ευρύτερο με αυτή την έννοια. Άρα, όχι. Δεν προτείνω ότι πρέπει να πετάξουμε το CSS και να αρχίσουμε να επιλέγουμε όλα τα στοιχεία μέσω του XPath. Δεν είναι αυτό το θέμα. Το θέμα είναι ότι το XPath μπορεί να κάνει πράγματα που το CSS δεν μπορεί και θα μπορούσε να είναι πολύ χρήσιμο, παρόλο που είναι μια παλαιότερη τεχνολογία στη στοίβα του προγράμματος περιήγησης και μπορεί να μην φαίνεται προφανές με την πρώτη ματιά. Ας χρησιμοποιήσουμε τις δύο τεχνολογίες μαζί όχι μόνο επειδή μπορούμε, αλλά επειδή θα μάθουμε κάτι για το XPath στη διαδικασία, καθιστώντας το ένα άλλο εργαλείο στη στοίβα σας — ένα που ίσως δεν ήξερες ότι ήταν εκεί από παλιά! Το πρόβλημα είναι ότι η μέθοδος document.evaluate της JavaScript και οι διάφορες μέθοδοι επιλογής ερωτημάτων που χρησιμοποιούμε με τα CSS API για JavaScript δεν είναι συμβατές. Έχω δημιουργήσει ένα συμβατό API ερωτημάτων για να ξεκινήσουμε, αν και ομολογουμένως, δεν το έχω σκεφτεί πολύ, καθώς είναι μια απόκλιση από αυτό που κάνουμε εδώ. Ακολουθεί ένα αρκετά απλό παράδειγμα εργασίας ενός επαναχρησιμοποιήσιμου κατασκευαστή ερωτημάτων: Δείτε το Pen queryXPath [διχαλωτή] από τον Bryan Rasmussen. Έχω προσθέσει δύο μεθόδους στο αντικείμενο του εγγράφου: queryCSSSelectors (που είναι ουσιαστικά querySelectorAll) και queryXPaths. Και τα δύο επιστρέφουν ένα αντικείμενο queryResults:
{ queryType: κόμβοι | χορδή | αριθμός | boolean, αποτελέσματα: οποιαδήποτε[] // στοιχεία html, στοιχεία xml, συμβολοσειρές, αριθμοί, booleans, queryCSSSelectors: (ερώτημα: string, amend: boolean) => queryResults, queryXpaths: (ερώτημα: συμβολοσειρά, τροποποίηση: boolean) => queryResults }
Οι συναρτήσεις queryCSSSelectors και queryXpaths εκτελούν το ερώτημα που τους δίνετε πάνω από τα στοιχεία του πίνακα αποτελεσμάτων, εφόσον ο πίνακας αποτελεσμάτων είναι φυσικά κόμβος τύπου. Διαφορετικά, θα επιστρέψει ένα queryResult με έναν κενό πίνακα και έναν τύπο κόμβων. Εάν η ιδιότητα amend οριστεί σε true, οι συναρτήσεις θα αλλάξουν τα δικά τους queryResults. Σε καμία περίπτωση δεν πρέπει να χρησιμοποιείται σε περιβάλλον παραγωγής. Το κάνω με αυτόν τον τρόπο καθαρά για να δείξω τα διάφορα αποτελέσματα της χρήσης των δύο ερωτημάτων API μαζί. Παραδείγματα ερωτημάτων Θέλω να δείξω μερικά παραδείγματα διαφορετικών ερωτημάτων XPath που δείχνουν μερικά από τα ισχυρά πράγματα που μπορούν να κάνουν και πώς μπορούν να χρησιμοποιηθούν στη θέση άλλων προσεγγίσεων. Το πρώτο παράδειγμα είναι //li/text(). Αυτό θέτει ερωτήματα σε όλα τα στοιχεία li και επιστρέφει τους κόμβους κειμένου τους. Έτσι, αν ρωτούσαμε τον ακόλουθο HTML:
- ένα
- δύο
- τρία
…επιστρέφεται αυτό:
{"queryType":"xpathEvaluate", "results":["one", "two", "tree"],"resultType":"string"}
Με άλλα λόγια, παίρνουμε τον ακόλουθο πίνακα: ["ένα", "δύο", "τρία"]. Κανονικά, θα έπρεπε να ζητήσετε από τα στοιχεία li να το λάβουν αυτό, να μετατρέψετε το αποτέλεσμα αυτού του ερωτήματος σε πίνακα, να αντιστοιχίσετε τον πίνακα και να επιστρέψετε τον κόμβο κειμένου κάθε στοιχείου. Αλλά μπορούμε να το κάνουμε πιο συνοπτικά με το XPath: document.queryXPaths("//li/text()").αποτελέσματα.
Παρατηρήστε ότι ο τρόπος για να αποκτήσετε έναν κόμβο κειμένου είναι να χρησιμοποιήσετε το text(), το οποίο μοιάζει με υπογραφή συνάρτησης — και είναι. Επιστρέφει τον κόμβο κειμένου ενός στοιχείου. Στο παράδειγμά μας, υπάρχουν τρία στοιχεία li στη σήμανση, το καθένα περιέχει κείμενο ("ένα", "δύο" και "τρία").
Ας δούμε ένα ακόμη παράδειγμα ερωτήματος κειμένου(). Ας υποθέσουμε ότι αυτή είναι η σήμανση:
Ας γράψουμε ένα ερώτημα που επιστρέφει την τιμή του χαρακτηριστικού href: document.queryXPaths("//a[text() = 'Είσοδος']/@href"). αποτελέσματα.
Αυτό είναι ένα ερώτημα XPath στο τρέχον έγγραφο, όπως και στο τελευταίο παράδειγμα, αλλά αυτή τη φορά επιστρέφουμε το χαρακτηριστικό href ενός συνδέσμου (ένα στοιχείο) που περιέχει το κείμενο "Είσοδος". Το πραγματικό επέστρεψετο αποτέλεσμα είναι ["/login.html"]. Επισκόπηση Λειτουργιών XPath Υπάρχουν πολλές συναρτήσεις XPath και μάλλον δεν είστε εξοικειωμένοι με αυτές. Υπάρχουν πολλά, νομίζω, που αξίζει να γνωρίζετε, συμπεριλαμβανομένων των εξής:
starts-withΕάν ένα κείμενο ξεκινά με ένα συγκεκριμένο παράδειγμα άλλου κειμένου, το starts-with(@href, 'http:') επιστρέφει true εάν ένα χαρακτηριστικό href ξεκινά με http:. containIf ένα κείμενο περιέχει ένα συγκεκριμένο παράδειγμα άλλου κειμένου, contain(text(), "Smashing Magazine") επιστρέφει true εάν ένας κόμβος κειμένου περιέχει τις λέξεις "Smashing Magazine" σε αυτόν οπουδήποτε. countΕπιστρέφει τον αριθμό των αντιστοιχιών σε ένα ερώτημα. Για παράδειγμα, το count(//*[starts-with(@href, 'http:']) επιστρέφει τον αριθμό των συνδέσμων στον κόμβο περιβάλλοντος που έχουν στοιχεία με ένα χαρακτηριστικό href που περιέχει το κείμενο που αρχίζει με το http:. substringΛειτουργεί όπως η δευτερεύουσα συμβολοσειρά JavaScript, με τη διαφορά ότι περνάτε τη συμβολοσειρά ως όρισμα. Για παράδειγμα, το substring("το κείμενο μου", 2, 4) επιστρέφει "y t". substring-beforeΕπιστρέφει το τμήμα μιας συμβολοσειράς πριν από μια άλλη συμβολοσειρά. Για παράδειγμα, το substing-before("το κείμενό μου", " ") επιστρέφει "μου". Ομοίως, το substring-before("hi","bye") επιστρέφει μια κενή συμβολοσειρά. substring-afterΕπιστρέφει το τμήμα μιας συμβολοσειράς μετά από μια άλλη συμβολοσειρά. Για παράδειγμα, το substing-after("το κείμενό μου", " ") επιστρέφει "κείμενο". Ομοίως, το substring-after("hi","bye") επιστρέφει μια κενή συμβολοσειρά. normalize-spaceΕπιστρέφει τη συμβολοσειρά ορισμάτων με το κενό διάστημα κανονικοποιημένο αφαιρώντας το κενό διάστημα από την αρχή και το τέλος και αντικαθιστώντας ακολουθίες χαρακτήρων κενού διαστήματος από ένα μόνο διάστημα. notΕπιστρέφει ένα boolean true εάν το όρισμα είναι false, διαφορετικά false. trueΕπιστρέφει boolean true. falseΕπιστρέφει boolean false. concatΤο ίδιο πράγμα με το JavaScript concat, μόνο που δεν το εκτελείτε ως μέθοδο σε μια συμβολοσειρά. Αντίθετα, βάζετε όλες τις χορδές που θέλετε να συνδέσετε. string-lengthΑυτό δεν είναι το ίδιο με το μήκος συμβολοσειράς JavaScript, αλλά μάλλον επιστρέφει το μήκος της συμβολοσειράς που δίνεται ως όρισμα. Το translateThis παίρνει μια συμβολοσειρά και αλλάζει το δεύτερο όρισμα στο τρίτο όρισμα. Για παράδειγμα, το translate("abcdef", "abc", "XYZ") εξάγει το XYZdef.
Εκτός από αυτές τις συγκεκριμένες συναρτήσεις XPath, υπάρχει μια σειρά από άλλες συναρτήσεις που λειτουργούν ακριβώς όπως οι αντίστοιχες JavaScript - ή αντίστοιχες βασικά σε οποιαδήποτε γλώσσα προγραμματισμού - που πιθανότατα θα σας φανούν χρήσιμες, όπως πάτωμα, οροφή, στρογγυλή, άθροιση και ούτω καθεξής. Η ακόλουθη επίδειξη απεικονίζει καθεμία από αυτές τις λειτουργίες: Δείτε τις αριθμητικές συναρτήσεις Pen XPath [διχαλωτή] από τον Bryan Rasmussen. Σημειώστε ότι, όπως οι περισσότερες από τις συναρτήσεις χειρισμού συμβολοσειρών, πολλές από τις αριθμητικές λαμβάνουν μία μόνο είσοδο. Αυτό συμβαίνει, φυσικά, επειδή υποτίθεται ότι χρησιμοποιούνται για ερωτήματα, όπως στο τελευταίο παράδειγμα XPath: //li[floor(text()) > 250]/@val
Εάν τα χρησιμοποιήσετε, όπως κάνουν τα περισσότερα παραδείγματα, θα καταλήξετε να τα εκτελέσετε στον πρώτο κόμβο που ταιριάζει με τη διαδρομή. Υπάρχουν επίσης ορισμένες συναρτήσεις μετατροπής τύπου που θα πρέπει πιθανώς να αποφύγετε επειδή η JavaScript έχει ήδη τα δικά της προβλήματα μετατροπής τύπων. Αλλά μπορεί να υπάρχουν φορές που θέλετε να μετατρέψετε μια συμβολοσειρά σε αριθμό για να την ελέγξετε σε σχέση με κάποιον άλλο αριθμό. Οι συναρτήσεις που ορίζουν τον τύπο του κάτι είναι boolean, αριθμός, συμβολοσειρά και κόμβος. Αυτοί είναι οι σημαντικοί τύποι δεδομένων XPath. Και όπως μπορείτε να φανταστείτε, οι περισσότερες από αυτές τις λειτουργίες μπορούν να χρησιμοποιηθούν σε τύπους δεδομένων που δεν είναι κόμβοι DOM. Για παράδειγμα, το substring-after παίρνει μια συμβολοσειρά όπως έχουμε ήδη καλύψει, αλλά θα μπορούσε να είναι η συμβολοσειρά από ένα χαρακτηριστικό href. Μπορεί επίσης να είναι απλώς μια συμβολοσειρά:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
Προφανώς, αυτό το παράδειγμα θα μας δώσει πίσω τον πίνακα αποτελεσμάτων ως ["κόσμος"]. Για να το δείξω στην πράξη, έφτιαξα μια δοκιμαστική σελίδα χρησιμοποιώντας συναρτήσεις έναντι πραγμάτων που δεν είναι κόμβοι DOM: Δείτε το Pen queryXPath [διχαλωτή] από τον Bryan Rasmussen. Θα πρέπει να σημειώσετε την εκπληκτική πτυχή της συνάρτησης μετάφρασης, η οποία είναι ότι εάν έχετε έναν χαρακτήρα στο δεύτερο όρισμα (δηλαδή, τη λίστα των χαρακτήρων που θέλετε να μεταφραστεί) και κανέναν αντίστοιχο χαρακτήρα για μετάφραση, αυτός ο χαρακτήρας αφαιρείται από την έξοδο. Έτσι, αυτό:
translate('Γεια, με λένε Inigo Montoya, σκότωσες τον πατέρα μου, ετοιμάσου να πεθάνεις','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…αποτελέσματα στη συμβολοσειρά, συμπεριλαμβανομένων των κενών: [" * * ** "]
Αυτό σημαίνει ότι το γράμμα "a" μεταφράζεται σε αστερίσκο (*), αλλά κάθε άλλος χαρακτήρας που δεν έχει μετάφραση δεδομένης της συμβολοσειράς στόχου αφαιρείται εντελώς. Το κενό διάστημα είναι το μόνο που μας απομένειανάμεσα στους μεταφρασμένους χαρακτήρες «a». Και πάλι, αυτό το ερώτημα:
translate('Γεια, με λένε Inigo Montoya, σκότωσες τον πατέρα μου, ετοιμάσου να πεθάνεις','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','***************************************************')")
…δεν έχει το πρόβλημα και βγάζει ένα αποτέλεσμα που μοιάζει με αυτό:
"******** ** **** ** ***** ******* *** ****** ** ***** ******** ** ***"
Μπορεί να σας κάνει εντύπωση ότι δεν υπάρχει εύκολος τρόπος στη JavaScript για να κάνετε ακριβώς ό,τι κάνει η λειτουργία μετάφρασης XPath, αν και για πολλές περιπτώσεις χρήσης, το replaceAll με κανονικές εκφράσεις μπορεί να το χειριστεί. Θα μπορούσατε να χρησιμοποιήσετε την ίδια προσέγγιση που έχω δείξει, αλλά αυτό δεν είναι βέλτιστο εάν το μόνο που θέλετε είναι να μεταφράσετε τις συμβολοσειρές. Η ακόλουθη επίδειξη αναδιπλώνει τη λειτουργία μετάφρασης του XPath για να παρέχει μια έκδοση JavaScript: Δείτε τη λειτουργία μετάφρασης πένας [διχαλωτή] από τον Bryan Rasmussen. Πού μπορείτε να χρησιμοποιήσετε κάτι τέτοιο; Εξετάστε την κρυπτογράφηση Caesar Cipher με μετατόπιση τριών θέσεων (π.χ. κορυφαία κρυπτογράφηση από το 48 π.Χ.):
translate("Ο Καίσαρας σχεδιάζει να περάσει τον Ρουβίκωνα!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Το κείμενο εισαγωγής "Ο Καίσαρας σχεδιάζει να περάσει τον Ρουβίκωνα!" καταλήγει σε "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Για να δώσω ένα άλλο γρήγορο παράδειγμα διαφορετικών δυνατοτήτων, έφτιαξα μια μεταλλική συνάρτηση που λαμβάνει μια είσοδο συμβολοσειράς και χρησιμοποιεί μια συνάρτηση μετάφρασης για να επιστρέψει το κείμενο, συμπεριλαμβανομένων όλων των χαρακτήρων που λαμβάνουν umlaut. Δείτε τη μεταλλική λειτουργία στυλό [διχαλωτή] από τον Bryan Rasmussen.
const metal = (str) => { επιστροφή μετάφραση (str, "AOUaou","ÄÖÜäöü"); }
Και, αν δοθεί το κείμενο "Motley Crue rules, rock on dudes!", επιστρέφει το "Mötley Crüe rüles, röck ön düdes!" Προφανώς, κάποιος μπορεί να έχει κάθε είδους παρωδική χρήση αυτής της λειτουργίας. Εάν είστε εσείς, τότε αυτό το άρθρο του TVTropes θα πρέπει να σας προσφέρει άφθονη έμπνευση. Χρήση CSS με XPath Θυμηθείτε τον κύριο λόγο για τη χρήση επιλογέων CSS μαζί με το XPath: Το CSS καταλαβαίνει σχεδόν τι είναι μια κλάση, ενώ το καλύτερο που μπορείτε να κάνετε με το XPath είναι οι συγκρίσεις συμβολοσειρών του χαρακτηριστικού class. Αυτό θα λειτουργήσει στις περισσότερες περιπτώσεις. Αλλά αν συναντούσατε ποτέ μια κατάσταση όπου, ας πούμε, κάποιος δημιούργησε κλάσεις με το όνομα .primaryLinks και .primaryLinks2 και χρησιμοποιούσατε το XPath για να λάβετε την κλάση .primaryLinks, τότε πιθανότατα θα αντιμετωπίσατε προβλήματα. Εφόσον δεν υπάρχει κάτι τέτοιο ανόητο, πιθανότατα θα χρησιμοποιούσατε το XPath. Αλλά με λύπη αναφέρω ότι έχω δουλέψει σε μέρη όπου οι άνθρωποι κάνουν τέτοιου είδους ανόητα πράγματα. Ακολουθεί μια άλλη επίδειξη που χρησιμοποιεί CSS και XPath μαζί. Δείχνει τι συμβαίνει όταν χρησιμοποιούμε τον κώδικα για να εκτελέσουμε ένα XPath σε έναν κόμβο περιβάλλοντος που δεν είναι ο κόμβος του εγγράφου. Δείτε το Pen css και το xpath μαζί [διχαλωμένα] από τον Bryan Rasmussen. Το ερώτημα CSS είναι .relatedarticles a, το οποίο ανακτά τα δύο στοιχεία a σε ένα div στο οποίο έχει εκχωρηθεί μια κλάση .relatedarticles. Μετά από αυτό υπάρχουν τρία "κακά" ερωτήματα, δηλαδή ερωτήματα που δεν κάνουν αυτό που θέλουμε να κάνουν όταν εκτελούνται με αυτά τα στοιχεία ως κόμβο περιβάλλοντος. Μπορώ να εξηγήσω γιατί συμπεριφέρονται διαφορετικά από ό,τι θα περίμενες. Τα τρία κακά ερωτήματα που αναφέρονται είναι:
//text(): Επιστρέφει όλο το κείμενο στο έγγραφο. //a/text(): Επιστρέφει όλο το κείμενο μέσα σε συνδέσμους στο έγγραφο. ./a/text(): Δεν επιστρέφει αποτελέσματα.
Ο λόγος για αυτά τα αποτελέσματα είναι ότι ενώ το περιβάλλον σας είναι ένα στοιχείο που επιστρέφεται από το ερώτημα CSS, το // αντιβαίνει σε ολόκληρο το έγγραφο. Αυτή είναι η δύναμη του XPath. Το CSS δεν μπορεί να μεταβεί από έναν κόμβο σε έναν πρόγονο και μετά σε έναν αδερφό αυτού του προγόνου, και να κατέβει σε έναν απόγονο αυτού του αδερφού. Αλλά το XPath μπορεί. Εν τω μεταξύ, το ./ ερωτά τα παιδιά του τρέχοντος κόμβου, όπου η τελεία (.) αντιπροσωπεύει τον τρέχοντα κόμβο και η κάθετο (/) αντιπροσωπεύει τη μετάβαση σε κάποιον θυγατρικό κόμβο — είτε πρόκειται για χαρακτηριστικό, στοιχείο ή κείμενο καθορίζεται από το επόμενο τμήμα της διαδρομής. Αλλά δεν υπάρχει θυγατρικό στοιχείο που επιλέγεται από το ερώτημα CSS, επομένως και αυτό το ερώτημα δεν επιστρέφει τίποτα. Υπάρχουν τρία καλά ερωτήματα σε αυτό το τελευταίο demo:
.//text(), ./text(), normalize-space(./text()).
Το ερώτημα normalize-space δείχνει τη χρήση της συνάρτησης XPath, αλλά επίσης διορθώνει ένα πρόβλημα που περιλαμβάνεται στα άλλα ερωτήματα. Το HTML είναι δομημένο ως εξής:
Αυτοματοποίηση της δοκιμής δυνατοτήτων σας με το Selenium WebDriver
Το ερώτημα επιστρέφει μια τροφοδοσία γραμμής στην αρχή και στο τέλος του κόμβου κειμένου,και το normalize-space το αφαιρεί. Η χρήση οποιασδήποτε συνάρτησης XPath που επιστρέφει κάτι διαφορετικό από ένα boolean με είσοδο XPath ισχύει και για άλλες συναρτήσεις. Η παρακάτω επίδειξη δείχνει ορισμένα παραδείγματα: Δείτε τα παραδείγματα συναρτήσεων Pen xpath [διχαλωτή] από τον Bryan Rasmussen. Το πρώτο παράδειγμα δείχνει ένα πρόβλημα που πρέπει να προσέξετε. Συγκεκριμένα, ο παρακάτω κώδικας:
document.queryXPaths("substring-after(//a/@href,'https://')");
…επιστρέφει μία συμβολοσειρά:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Είναι λογικό, σωστά; Αυτές οι συναρτήσεις δεν επιστρέφουν πίνακες, αλλά μεμονωμένες συμβολοσειρές ή απλούς αριθμούς. Η εκτέλεση της συνάρτησης οπουδήποτε με πολλαπλά αποτελέσματα επιστρέφει μόνο το πρώτο αποτέλεσμα. Το δεύτερο αποτέλεσμα δείχνει τι πραγματικά θέλουμε:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Το οποίο επιστρέφει έναν πίνακα δύο συμβολοσειρών:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Οι συναρτήσεις XPath μπορούν να ενσωματωθούν ακριβώς όπως οι συναρτήσεις στο JavaScript. Έτσι, εάν γνωρίζουμε τη δομή του URL του περιοδικού Smashing, θα μπορούσαμε να κάνουμε τα εξής (συνιστάται η χρήση των κυριολεκτικών προτύπων): `μετάφραση( υποσυμβολοσειρά( substring-after(./@href, «www.smashingmagazine.com/») ,9), '/','')".
Αυτό γίνεται λίγο πολύ περίπλοκο στο βαθμό που χρειάζεται σχόλια που να περιγράφουν τι κάνει: πάρτε όλη τη διεύθυνση URL από το χαρακτηριστικό href μετά το www.smashingmagazine.com/, αφαιρέστε τους πρώτους εννέα χαρακτήρες και, στη συνέχεια, μεταφράστε τον χαρακτήρα προς τα εμπρός κάθετο (/) σε τίποτα για να απαλλαγείτε από την τελική κάθετο προς τα εμπρός. Ο πίνακας που προκύπτει:
["feature-testing-selenium-webdriver", "automated-test-results-improve-accessibility"]
Περισσότερες περιπτώσεις χρήσης XPath Το XPath μπορεί πραγματικά να λάμψει στις δοκιμές. Ο λόγος δεν είναι δύσκολο να γίνει αντιληπτός, καθώς το XPath μπορεί να χρησιμοποιηθεί για να πάρει κάθε στοιχείο στο DOM, από οποιαδήποτε θέση στο DOM, ενώ το CSS δεν μπορεί. Δεν μπορείτε να υπολογίζετε ότι οι κλάσεις CSS θα παραμείνουν συνεπείς σε πολλά σύγχρονα συστήματα κατασκευής, αλλά με το XPath, είμαστε σε θέση να κάνουμε πιο ισχυρές αντιστοιχίσεις ως προς το περιεχόμενο κειμένου ενός στοιχείου, ανεξάρτητα από μια μεταβαλλόμενη δομή DOM. Έχει γίνει έρευνα για τεχνικές που σας επιτρέπουν να κάνετε ανθεκτικές δοκιμές XPath. Τίποτα δεν είναι χειρότερο από το να ξεφλουδίζουν τα τεστ και να αποτυγχάνουν μόνο και μόνο επειδή ένας επιλογέας CSS δεν λειτουργεί πλέον επειδή κάτι έχει μετονομαστεί ή αφαιρεθεί. Το XPath είναι επίσης εξαιρετικό στην εξαγωγή πολλαπλών εντοπιστών. Υπάρχουν περισσότεροι από ένας τρόποι χρήσης ερωτημάτων XPath για αντιστοίχιση ενός στοιχείου. Το ίδιο ισχύει και με το CSS. Ωστόσο, τα ερωτήματα XPath μπορούν να διερευνήσουν τα πράγματα με πιο στοχευμένο τρόπο που περιορίζει ό,τι επιστρέφεται, επιτρέποντάς σας να βρείτε μια συγκεκριμένη αντιστοίχιση όπου μπορεί να υπάρχουν πολλές πιθανές αντιστοιχίσεις. Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε το XPath για να επιστρέψουμε ένα συγκεκριμένο στοιχείο h2 που περιέχεται μέσα σε ένα div που ακολουθεί αμέσως ένα αδελφικό div που, με τη σειρά του, περιέχει ένα στοιχείο θυγατρικής εικόνας με ένα χαρακτηριστικό data-testID="leader" σε αυτό:
μην λαμβάνετε αυτόν τον τίτλο
Μην λαμβάνετε ούτε αυτόν τον τίτλο
Η κεφαλίδα για την εικόνα του αρχηγού
Αυτό είναι το ερώτημα: document.queryXPaths(` //div[ follow-sibling::div[1] /img[@data-testID='leader'] ] /h2/ κείμενο () `);
Ας ρίξουμε ένα demo για να δούμε πώς συνδυάζονται όλα αυτά: Δείτε το Ερώτημα H2 Complex Pen [διχαλωτή] από τον Bryan Rasmussen. Λοιπόν, ναι. Υπάρχουν πολλές πιθανές διαδρομές προς οποιοδήποτε στοιχείο σε μια δοκιμή που χρησιμοποιεί το XPath. Κατάργηση XSLT 1.0 Ανέφερα από νωρίς ότι η ομάδα του Chrome σχεδιάζει να καταργήσει την υποστήριξη XSLT 1.0 από το πρόγραμμα περιήγησης. Αυτό είναι σημαντικό επειδή το XSLT 1.0 χρησιμοποιεί προγραμματισμό με επίκεντρο XML για μετασχηματισμό εγγράφων που, με τη σειρά του, βασίζεται στο XPath 1.0, το οποίο βρίσκεται στα περισσότερα προγράμματα περιήγησης. Όταν συμβεί αυτό, θα χάσουμε ένα βασικό στοιχείο του XPath. Αλλά δεδομένου του γεγονότος ότι το XPath είναι πραγματικά εξαιρετικό για τη σύνταξη δοκιμών, θεωρώ απίθανο το XPath στο σύνολό του να εξαφανιστεί σύντομα. Τούτου λεχθέντος, έχω παρατηρήσει ότι οι άνθρωποι ενδιαφέρονται για ένα χαρακτηριστικό όταν αφαιρείται. Και αυτό είναι σίγουρα αλήθεια στην περίπτωση του XSLT 1.0 που έχει καταργηθεί. Γίνεται μια ολόκληρη συζήτηση στο Hacker News γεμάτη με επιχειρήματα κατά της κατάργησης. Η ίδια η ανάρτηση είναι ένα εξαιρετικό παράδειγμα δημιουργίας πλαισίου blogging με XSLT. Εσείςμπορείτε να διαβάσετε τη συζήτηση μόνοι σας, αλλά αναφέρεται στο πώς η JavaScript μπορεί να χρησιμοποιηθεί ως παρέμβαση για το XLST για να χειριστεί τέτοιου είδους περιπτώσεις. Έχω δει επίσης προτάσεις ότι τα προγράμματα περιήγησης πρέπει να χρησιμοποιούν το SaxonJS, το οποίο είναι μια θύρα στις μηχανές Saxon XSLT, XQUERY και XPath της JavaScript. Αυτή είναι μια ενδιαφέρουσα ιδέα, ειδικά καθώς το Saxon-JS υλοποιεί την τρέχουσα έκδοση αυτών των προδιαγραφών, ενώ δεν υπάρχει πρόγραμμα περιήγησης που να εφαρμόζει οποιαδήποτε έκδοση του XPath ή XSLT πέραν του 1.0 και κανένα που να εφαρμόζει το XQuery. Επικοινώνησα με τη Norm Tovey-Walsh στη Saxonica, την εταιρεία πίσω από την SaxonJS και άλλες εκδόσεις του κινητήρα Saxon. Είπε: "Εάν κάποιος προμηθευτής προγράμματος περιήγησης ενδιαφέρθηκε να λάβει το SaxonJS ως σημείο εκκίνησης για την ενσωμάτωση σύγχρονων τεχνολογιών XML στο πρόγραμμα περιήγησης, θα ήμασταν ενθουσιασμένοι να το συζητήσουμε μαζί του." — Norm Tovey-Walsh
Αλλά πρόσθεσε επίσης: "Θα εκπλαγώ πολύ αν κάποιος πίστευε ότι η λήψη του SaxonJS στην τρέχουσα μορφή του και η απόθεσή του στην έκδοση του προγράμματος περιήγησης αμετάβλητη θα ήταν η ιδανική προσέγγιση. Ένας προμηθευτής προγράμματος περιήγησης, από τη φύση του γεγονότος ότι κατασκευάζει το πρόγραμμα περιήγησης, θα μπορούσε να προσεγγίσει την ενοποίηση σε ένα πολύ βαθύτερο επίπεδο από ό,τι μπορούμε "από το εξωτερικό"." — Norm Tovey-Walsh
Αξίζει να σημειωθεί ότι τα σχόλια της Tovey-Walsh έγιναν περίπου μια εβδομάδα πριν από την ανακοίνωση κατάργησης του XSLT. Συμπέρασμα Θα μπορούσα να συνεχίσω και να συνεχίσω. Ελπίζω όμως ότι αυτό απέδειξε τη δύναμη του XPath και σας έδωσε πολλά παραδείγματα που δείχνουν πώς να το χρησιμοποιήσετε για να πετύχετε σπουδαία πράγματα. Είναι ένα τέλειο παράδειγμα παλαιότερης τεχνολογίας στη στοίβα του προγράμματος περιήγησης που εξακολουθεί να έχει άφθονη χρησιμότητα σήμερα, ακόμα κι αν δεν ήξερες ποτέ ότι υπήρχε ή δεν σκέφτηκες ποτέ να την προσεγγίσεις. Περαιτέρω ανάγνωση
«Ενίσχυση της ανθεκτικότητας των αυτοματοποιημένων δοκιμών Ιστού με φυσική γλώσσα» (Ψηφιακή βιβλιοθήκη ACM) από τους Maroun Ayli, Youssef Bakouny, Nader Jalloul και Rima KilanyΑυτό το άρθρο παρέχει πολλά παραδείγματα XPath για τη σύνταξη δοκιμών ανθεκτικότητας. XPath (MDN) Αυτό είναι ένα εξαιρετικό μέρος για να ξεκινήσετε εάν θέλετε μια τεχνική εξήγηση που να περιγράφει λεπτομερώς πώς λειτουργεί το XPath. Εκμάθηση XPath (ZVON) Βρήκα αυτό το σεμινάριο ως το πιο χρήσιμο στη δική μου εκμάθηση, χάρη σε πολλά παραδείγματα και σαφείς εξηγήσεις. XPatherΑυτό το διαδραστικό εργαλείο σάς επιτρέπει να εργάζεστε απευθείας με τον κώδικα.
