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

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

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

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

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

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

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

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

Σύνταξη

css=tag#id

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

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

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

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

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

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

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

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

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

Σύνταξη

css=tag.class

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

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

Ετικέτα και τάξη - Επιλογέας CSS

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

Ετικέτα και τάξη - Επιλογέας CSS

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

Ετικέτα και τάξη - Επιλογέας CSS

Ο λόγος που μόνο το Εmail ή Κείμενο τηλεφώνου box που τονίστηκε στην προηγούμενη εικόνα είναι ότι έρχεται πρώτη στην πηγή της σελίδας του Facebook.

Ετικέτα και τάξη - Επιλογέας CSS

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

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

Σύνταξη

css=tag[attribute=value]

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

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

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

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

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

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

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

Σύνταξη

css=tag.class[attribute=value]

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

Βήμα 1) Μεταβείτε στη σελίδα επίδειξης http://demo.guru99.com/test/facebook.html και χρησιμοποιήστε το Firebug για να επιθεωρήσετε το 'Email ή εισαγωγή Τηλέφωνο και Κωδικός πρόσβασης boxes. Σημειώστε την ετικέτα HTML, την κλάση και τα χαρακτηριστικά τους. Για αυτό το παράδειγμα, θα επιλέξουμε τα χαρακτηριστικά «tabindex» τους.

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

Βήμα 2) Θα έχουμε πρόσβαση στο «Εmail ή κείμενο του τηλεφώνου box πρώτα. Έτσι, θα χρησιμοποιήσουμε μια τιμή tabindex 1. Εισαγάγετε "css=input.inputtext[tabindex=1]" στο Selenium Στόχος του IDE box και κάντε κλικ στην Εύρεση. Το 'Εmail ή είσοδος τηλεφώνου box πρέπει να τονιστεί.

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

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

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

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

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

Σύνταξη

css=tag:contains("inner text")

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

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

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

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

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

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

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

Χαρακτηριστικά

Σύνταξη για τον εντοπισμό με χρήση επιλογέα CSS

Μέθοδος Σύνταξη στόχου Παράδειγμα
Ετικέτα και αναγνωριστικό css=tag#id css=input#email
Ετικέτα και τάξη css=tag.class css=input.inputtext
Ετικέτα και χαρακτηριστικό css=tag[ιδιότητα=τιμή] css=input[όνομα=επώνυμο]
Ετικέτα, τάξη και χαρακτηριστικό css=tag.classattribute=value] css=input.inputtext[tabindex=1]