Επιλογέας CSS σε Selenium

Τι είναι ένας επιλογέας CSS στο Selenium?

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

Επιλογείς CSS σε Selenium διατίθενται σε πολλές μορφές, αλλά αυτός ο οδηγός εστιάζει στα πέντε πιο συνηθισμένα μοτίβα που χρησιμοποιούνται σε Selenium SDI:

• Ετικέτα και αναγνωριστικό
• Ετικέτα και τάξη
• Ετικέτα και χαρακτηριστικό
• Ετικέτα, τάξη και χαρακτηριστικό
• Εσωτερικό κείμενο

Όταν χρησιμοποιείται αυτή η στρατηγική σε Selenium IDE, πάντα πρόθεμα του Target κουτί με «css=«όπως φαίνεται σε κάθε παράδειγμα παρακάτω».

Γιατί να χρησιμοποιήσετε επιλογείς CSS σε Selenium?

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

Τα κύρια πλεονεκτήματα της χρήσης των CSS Selectors περιλαμβάνουν:

• Απόδοση: Οι επιλογείς CSS υποβάλλονται σε επεξεργασία από την εγγενή μηχανή του προγράμματος περιήγησης, επομένως εκτελούνται ταχύτερα από τις αντίστοιχες εκφράσεις XPath, ειδικά σε παλαιότερα προγράμματα περιήγησης όπως ο Internet Explorer.
• Ευελιξία: Συνδυάζουν την ετικέτα, την κλάση, το χαρακτηριστικό και τη λογική μερικής αντιστοίχισης, επιτρέποντας στους δοκιμαστές να στοχεύουν στοιχεία που δεν έχουν σταθερό αναγνωριστικό.
• Ευανάγνωστο: Η σύνταξη αντικατοπτρίζει τον τρόπο με τον οποίο οι προγραμματιστές γράφουν ήδη κανόνες CSS, γεγονός που συντομεύει την καμπύλη μάθησης τόσο για τους μηχανικούς διασφάλισης ποιότητας όσο και για τις ομάδες front-end.
• Σταθερότητα μεταξύ προγραμμάτων περιήγησης: Οι επιλογείς CSS συμπεριφέρονται με συνέπεια σε όλο το Chrome, Firefox, Edge και Safari, μειώνοντας τις ασταθείς αποτυχίες των δοκιμών.

Ετικέτα και αναγνωριστικό – Επιλογέας CSS

Αυτό το παράδειγμα χρησιμοποιεί το πλαίσιο κειμένου Email στη σελίδα σύνδεσης του Facebook. Το στοιχείο έχει αναγνωριστικό "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ«και είχε ήδη προσπελαστεί στην ενότητα «Εντοπισμός με ID». Τώρα το ίδιο στοιχείο στοχεύεται χρησιμοποιώντας ένα Selenium Επιλογέας CSS με το χαρακτηριστικό ID.

Σύνταξη

css=tag#id

• tag = η ετικέτα HTML του στοιχείου στο οποίο έχετε πρόσβαση
• # = το σύμβολο δίεσης, το οποίο πρέπει πάντα να υπάρχει όταν χρησιμοποιείται ένα Selenium Επιλογέας CSS με αναγνωριστικό
• id = το αναγνωριστικό του στοιχείου στο οποίο έχετε πρόσβαση

Λάβετε υπόψη ότι πριν από το αναγνωριστικό υπάρχει πάντα ένα σύμβολο κατακερματισμού (#).

Βήμα 1) Πλοηγηθείτε στο www.facebook.comΧρησιμοποιώντας τα Εργαλεία Προγραμματισμού (DevTools) του προγράμματος περιήγησής σας (ή ένα παλαιότερο εργαλείο όπως το Firebug), ελέγξτε το πλαίσιο κειμένου "Email ή Τηλέφωνο".

Παρατηρήστε ότι η ετικέτα HTML είναι "εισαγωγή"και το αναγνωριστικό του είναι "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ«. Ο πλήρης επιλογέας CSS γίνεται επομένως «css=input#email".

Βήμα 2) Εισαγω "css=input#email" μέσα στο Target κουτί από Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Selenium Το IDE επισημαίνει το αντίστοιχο στοιχείο στη σελίδα.

Ετικέτα και Κλάση – Επιλογέας CSS

Ένας επιλογέας CSS σε Selenium που χρησιμοποιεί μια ετικέτα HTML και ένα όνομα κλάσης ακολουθεί την ίδια ιδέα με την ετικέτα και το αναγνωριστικό, αλλά μια τελεία (.) αντικαθιστά το σύμβολο δίεσης.

Σύνταξη

css=tag.class

• tag = η ετικέτα HTML του στοιχείου στο οποίο έχετε πρόσβαση
• . = το σύμβολο της τελείας, το οποίο πρέπει πάντα να υπάρχει όταν χρησιμοποιείται ένας επιλογέας CSS με κλάση
• class = η κλάση του στοιχείου στο οποίο έχει πρόσβαση

Βήμα 1) Άνοιγμα της σελίδας επίδειξης https://demo.guru99.com/test/facebook.html και ελέγξτε το πλαίσιο κειμένου "Email ή Τηλέφωνο". Σημειώστε ότι η ετικέτα HTML είναι "εισαγωγή» και η κλάση του είναι «κείμενο εισαγωγής".

Βήμα 2) In Selenium IDE, πληκτρολογήστε "css=input.inputtext" στο Target πλαίσιο και κάντε κλικ στην Εύρεση. Selenium Το IDE αναγνωρίζει το πλαίσιο κειμένου Email ή Phone.

Λάβετε υπόψη ότι όταν πολλά στοιχεία μοιράζονται την ίδια ετικέτα HTML και κλάση, αναγνωρίζεται μόνο το πρώτο στοιχείο που ταιριάζει στον πηγαίο κώδικα. Ελέγξτε το πλαίσιο κειμένου "Κωδικός πρόσβασης" στην ίδια σελίδα και παρατηρήστε ότι έχει την ίδια κλάση με το πλαίσιο κειμένου "Ηλεκτρονικό ταχυδρομείο" ή "Τηλέφωνο".

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

Ετικέτα και Χαρακτηριστικό – Επιλογέας CSS

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

Σύνταξη

css=tag[attribute=value]

• tag = η ετικέτα HTML του στοιχείου στο οποίο έχετε πρόσβαση
• [ και ] = αγκύλες που περιβάλλουν το χαρακτηριστικό και την αντίστοιχη τιμή του
• attribute = το χαρακτηριστικό που θα χρησιμοποιηθεί. Επιλέξτε ένα που είναι μοναδικό για το στοιχείο, όπως όνομα ή αναγνωριστικό.
• value = η αντίστοιχη τιμή του επιλεγμένου χαρακτηριστικού.

Βήμα 1) Πλοηγηθείτε με το Mercury Σελίδα εγγραφής για εκδρομές https://demo.guru99.com/test/newtours/register.php και ελέγξτε το πλαίσιο κειμένου "Επώνυμο". Σημειώστε την ετικέτα HTML ("input") και το χαρακτηριστικό name ("lastName").

Βήμα 2) In Selenium IDE, πληκτρολογήστε "css=input[όνομα=επώνυμο]" στο Target πλαίσιο και κάντε κλικ στην Εύρεση. Selenium Το IDE εντοπίζει με επιτυχία το πεδίο Επώνυμο.

Όταν πολλά στοιχεία μοιράζονται την ίδια ετικέτα και χαρακτηριστικό HTML, αναγνωρίζεται μόνο το πρώτο. Η συμπεριφορά είναι ίδια με την εύρεση στοιχείων με την ίδια ετικέτα και κλάση.

Ετικέτα, Κλάση και Χαρακτηριστικό – Επιλογέας CSS

Σύνταξη

css=tag.class[attribute=value]

• tag = η ετικέτα HTML του στοιχείου στο οποίο έχετε πρόσβαση
• . = το σύμβολο της τελείας, το οποίο πρέπει πάντα να υπάρχει όταν χρησιμοποιείται ένας επιλογέας CSS με κλάση
• class = η κλάση του στοιχείου στο οποίο έχει πρόσβαση
• [ και ] = αγκύλες που περιβάλλουν ένα συγκεκριμένο χαρακτηριστικό και την αντίστοιχη τιμή του
• attribute = το χαρακτηριστικό που θα χρησιμοποιηθεί. Επιλέξτε ένα που είναι μοναδικό για το στοιχείο, όπως όνομα ή αναγνωριστικό.
• value = η αντίστοιχη τιμή του επιλεγμένου χαρακτηριστικού.

Βήμα 1) Άνοιγμα της σελίδας επίδειξης https://demo.guru99.com/test/facebook.html και ελέγξτε τα πλαίσια εισαγωγής "Email ή Τηλέφωνο" και "Κωδικός Πρόσβασης". Σημειώστε την ετικέτα HTML, την κλάση και τα χαρακτηριστικά τους. Αυτό το παράδειγμα χρησιμοποιεί το "tabindex"ιδιότητα".

Βήμα 2) Αποκτήστε πρόσβαση στο πλαίσιο κειμένου "Email ή Τηλέφωνο" πρώτα χρησιμοποιώντας μια τιμή tabindex 1. Εισαγάγετε "css=input.inputtext[tabindex=1]" σε Selenium Μασών του μηνός Target και κάντε κλικ στο πλαίσιο Εύρεση. Το πεδίο Ηλεκτρονικό ταχυδρομείο ή Τηλέφωνο επισημαίνεται.

Βήμα 3) Για να στοχεύσετε το πλαίσιο εισαγωγής κωδικού πρόσβασης, απλώς αντικαταστήστε την τιμή tabindex. Εισαγάγετε "css=input.inputtext[tabindex=2]" στο Target πλαίσιο και κάντε κλικ στην Εύρεση. Selenium Το IDE εντοπίζει με επιτυχία το πλαίσιο κειμένου "Κωδικός πρόσβασης".

Εσωτερικό κείμενο – Επιλογέας CSS

Στις ετικέτες HTML σπάνια δίνονται χαρακτηριστικά id, name ή class. Πώς, λοιπόν, αποκτάτε πρόσβαση σε αυτές; SeleniumΗ απάντηση βρίσκεται μέσα από το εσωτερικό τους κείμενο. Τα εσωτερικά κείμενα είναι τα πραγματικά μοτίβα συμβολοσειρών που εμφανίζει η ετικέτα HTML στη σελίδα.

Σύνταξη

css=tag:contains("inner text")

• tag = η ετικέτα HTML του στοιχείου στο οποίο έχετε πρόσβαση
• εσωτερικό κείμενο = το ορατό περιεχόμενο κειμένου του στοιχείου

Βήμα 1) Πλοηγηθείτε με το Mercury Αρχική σελίδα περιηγήσεων https://demo.guru99.com/test/newtours/ και ελέγξτε την ετικέτα "Κωδικός πρόσβασης". Σημειώστε την ετικέτα HTML ("γραμματοσειρά" σε αυτήν την περίπτωση) και παρατηρήστε ότι το στοιχείο δεν έχει χαρακτηριστικά κλάσης, αναγνωριστικού ή ονόματος.

Βήμα 2) Χαρακτηριστικά css=font:contains("Κωδικός πρόσβασης:") σε Selenium Μασών του μηνός Target πλαίσιο και κάντε κλικ στην Εύρεση. Selenium Το IDE εντοπίζει την ετικέτα Κωδικού Πρόσβασης όπως φαίνεται παρακάτω.

Βήμα 3) Αυτή τη φορά, αντικαταστήστε το εσωτερικό κείμενο με «Βοστώνη» έτσι ώστε Target γίνεται «css=font:contains(“Βοστώνη”)«. Κάντε κλικ στην επιλογή Εύρεση. Η ετικέτα «Βοστώνη προς Σαν Φρανσίσκο» επισημαίνεται, δείχνοντας ότι Selenium Το IDE μπορεί να εντοπίσει μια μεγάλη ετικέτα ακόμα και όταν παρέχεται μόνο η πρώτη λέξη του εσωτερικού της κειμένου.

Επιλογέας CSS έναντι XPath στο Selenium

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

Κριτήρια	Επιλογέας CSS	XPath
Ταχύτητα	Ταχύτερο, τρέχει στην εγγενή μηχανή του προγράμματος περιήγησης	Πιο αργό, ειδικά σε παλαιότερα προγράμματα περιήγησης
Tοποθεσία	Μόνο προώθηση (γονέας προς παιδί)	Εμπρός και πίσω (από το παιδί στον γονέα)
Σύνταξη	Συντομότερο και παρόμοιο με τους κανόνες CSS	Μεγαλύτερες, ιεραρχικές εκφράσεις διαδρομής
Αντιστοίχιση κειμένου	Περιορίζεται στην ψευδοκλάση :contains()	Συναρτήσεις Strong text() και contains()
καλυτερα for	Στατικές διατάξεις και σύγχρονες εφαρμογές ιστού	Σύνθετη διέλευση DOM και εντοπιστές που βασίζονται σε κείμενο

καλυτερα Practices for Writing CSS Selectors in Selenium

Η σύνταξη αξιόπιστων επιλογέων CSS υπερβαίνει τη γνώση της σύνταξης. Οι ακόλουθες πρακτικές βοηθούν τους δοκιμαστές να δημιουργήσουν σταθερά, συντηρήσιμα Selenium σενάρια που επιβιώνουν από αλλαγές στο UI:

1. Προτιμήστε μοναδικά χαρακτηριστικά: Να επιλέγετε πάντα τα χαρακτηριστικά id, data-test-id ή name που προστίθενται ρητά για αυτοματοποίηση. Αυτά παραμένουν σταθερά ακόμα και όταν αλλάζει η οπτική διάταξη.
2. Αποφύγετε τους υπερβολικά ένθετους επιλογείς: Μακριές αλυσίδες όπως div > div > ul > li > a σπάνε εύκολα όταν οι προγραμματιστές αναδιαμορφώνουν την μορφοποίηση. Διατηρήστε τους επιλογείς όσο το δυνατόν πιο σύντομους.
3. Χρησιμοποιήστε τις μερικές αντιστοιχίσεις με σύνεση: Μοτίβα όπως [class*="btn-primary"] ανέχονται μικρές αλλαγές ονόματος κλάσης, αλλά μπορεί επίσης να ταιριάζουν με ακούσια στοιχεία.
4. Αποφύγετε τους εντοπιστές που βασίζονται σε ευρετήρια: Επιλογείς όπως nth-child(3) είναι εύθραυστα επειδή η προσθήκη ενός αδελφικού στοιχείου μετατοπίζει κάθε θέση.
5. Επικύρωση επιλογέων στο DevTools: Πριν τρέξετε α Selenium script, επικολλήστε τον επιλογέα στην κονσόλα Chrome DevTools χρησιμοποιώντας document.querySelector() για να επιβεβαιώσει ότι επιστρέφει ακριβώς ένα στοιχείο.
6. Συνδυάστε χαρακτηριστικά για μοναδικότητα: Όταν μια κλάση χρησιμοποιείται από πολλά στοιχεία, προσθέστε ένα φίλτρο χαρακτηριστικών όπως input.form-control[name="email"] για να αποσαφηνιστεί ο στόχος.
7. Τεκμηρίωση και επαναχρησιμοποίηση: Συγκεντρώστε τους επιλογείς μέσα σε μια κλάση Αντικειμένου Σελίδας, έτσι ώστε μια μόνο ενημέρωση να διορθώνει κάθε δοκιμή που αναφέρεται στο ίδιο στοιχείο.

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

Σύνοψη: Σύντομη αναφορά σύνταξης επιλογέα CSS

Ο παρακάτω πίνακας συγκεντρώνει κάθε Selenium Το μοτίβο επιλογής CSS καλύπτεται σε αυτόν τον οδηγό:

Μέθοδος	Target Σύνταξη	Παράδειγμα
Ετικέτα και αναγνωριστικό	css=tag#id	css=input#email
Ετικέτα και τάξη	css=tag.class	css=input.inputtext
Ετικέτα και χαρακτηριστικό	css=tag[ιδιότητα=τιμή]	css=input[όνομα=επώνυμο]
Ετικέτα, τάξη και χαρακτηριστικό	css=tag.class[attribute=value]	css=input.inputtext[tabindex=1]
Εσωτερικό κείμενο	css=ετικέτα:περιέχει(“κείμενο”)	css=font:contains("Κωδικός πρόσβασης:")

Συχνές Ερωτήσεις