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

Τι είναι ο Επιλογέας CSS;

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

Επιλογείς CSS σε Selenium έχουν πολλές μορφές, αλλά θα εστιάσουμε μόνο στις πιο συνηθισμένες. Οι διαφορετικοί τύποι CSS Locator σε Selenium IDE

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

Όταν χρησιμοποιούμε αυτήν τη στρατηγική, βάζουμε πάντα το πρόθεμα του Target πλαίσιο με “css=” όπως θα φαίνεται στα ακόλουθα παραδείγματα.

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

Και πάλι, θα χρησιμοποιήσουμε το πλαίσιο κειμένου Email του Facebook σε αυτό το παράδειγμα. Όπως μπορείτε να θυμάστε, έχει ένα αναγνωριστικό "email" και έχουμε ήδη πρόσβαση σε αυτό στην ενότητα "Εντοπισμός κατά αναγνωριστικό". Αυτή τη φορά, θα χρησιμοποιήσουμε ένα Selenium Επιλογέας CSS με αναγνωριστικό για πρόσβαση σε αυτό ακριβώς το ίδιο στοιχείο.

Σύνταξη

css=tag#id

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

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

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

Σε αυτό το σημείο, σημειώστε ότι η ετικέτα HTML είναι "input" και το αναγνωριστικό της είναι "email". Άρα η σύνταξή μας θα είναι “css=input#email”.

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

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

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

Σύνταξη

css=tag.class

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

Βήμα 1) Μεταβείτε στη σελίδα επίδειξης http://demo.guru99.com/test/facebook.html και χρησιμοποιήστε το Firebug για να επιθεωρήσετε το πλαίσιο κειμένου "Email ή τηλέφωνο". Παρατηρήστε ότι η ετικέτα HTML της είναι "input" και η κλάση της είναι "inputtext".

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

Λάβετε υπόψη ότι όταν πολλά στοιχεία έχουν την ίδια ετικέτα και όνομα HTML, θα αναγνωρίζεται μόνο το πρώτο στοιχείο στον πηγαίο κώδικα. Χρησιμοποιώντας το Firebug, επιθεωρήστε το πλαίσιο κειμένου Password στο Facebook και παρατηρήστε ότι έχει το ίδιο όνομα με το πλαίσιο κειμένου Email ή Phone.

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

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

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

Σύνταξη

css=tag[attribute=value]

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

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

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

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

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

Σύνταξη

css=tag.class[attribute=value]

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

Βήμα 1) Μεταβείτε στη σελίδα επίδειξης http://demo.guru99.com/test/facebook.html και χρησιμοποιήστε το Firebug για να επιθεωρήσετε τα πλαίσια εισαγωγής «Ηλεκτρονικό ταχυδρομείο ή τηλέφωνο» και «Κωδικός πρόσβασης». Σημειώστε την ετικέτα 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 σπάνια δίνονται χαρακτηριστικά αναγνωριστικού, ονόματος ή κλάσης. Λοιπόν, πώς έχουμε πρόσβαση σε αυτά; Η απάντηση είναι μέσα από τη χρήση των εσωτερικών τους κειμένων. Τα εσωτερικά κείμενα είναι τα πραγματικά μοτίβα συμβολοσειρών που εμφανίζει η ετικέτα HTML στη σελίδα.

Σύνταξη

css=tag:contains("inner text")

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

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

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

Βήμα 3) Αυτή τη φορά, αντικαταστήστε το εσωτερικό κείμενο με «Βοστώνη» ώστε να σας Target θα γίνει πλέον "css=font:contains("Boston")". Κάντε κλικ στην Εύρεση. Θα πρέπει να παρατηρήσετε ότι η ετικέτα "Boston to San Francisco" επισημαίνεται. Αυτό σου το δείχνει Selenium Το IDE μπορεί να έχει πρόσβαση σε μια μεγάλη ετικέτα ακόμα κι αν υποδείξατε μόλις την πρώτη λέξη του εσωτερικού του κειμένου.

Σύνοψη

Σύνταξη για τον εντοπισμό με χρήση επιλογέα 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]