Μενού

Πώς να χρησιμοποιήσετε το CSS Selector για τον προσδιορισμό στοιχείων Web για σενάρια Selenium - Selenium Tutorial # 6

how use css selector

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

Στο δικό μας προηγούμενο σεμινάριο σεληνίου , μάθαμε διαφορετικούς τύπους εντοπιστών. Μάθαμε επίσης πώς να χρησιμοποιούμε: ID, ClassName, Name, Link Text και XPath εντοπιστές για την αναγνώριση στοιχείων ιστού σε μια ιστοσελίδα.

Σε συνέχεια με αυτό, σήμερα θα μάθουμε πώς να χρησιμοποιήσετε το CSS Selector ως εντοπιστής . Αυτό είναι το 6ο μάθημα στο δικό μας δωρεάν σειρά προπόνησης Selenium .

Χρησιμοποιώντας τον επιλογέα CSS ως εντοπιστής:

Το CSS Selector είναι ο συνδυασμός ενός στοιχείου επιλογής και μιας τιμής επιλογής που προσδιορίζει το στοιχείο ιστού σε μια ιστοσελίδα. Το σύνθετο ενός στοιχείου επιλογέα στοιχείων και επιλογέα είναι γνωστό ως μοτίβο επιλογέα.

CSS Selector Selenium Εντοπιστής

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

Όπως και το Xpath, ο επιλογέας CSS μπορεί επίσης να εντοπίσει στοιχεία ιστού χωρίς αναγνωριστικό, κλάση ή όνομα.

sql server 2012 συνεντεύξεις ερωτήσεις και απαντήσεις για έμπειρο pdf

Τώρα λοιπόν προχωρώντας, ας συζητήσουμε τους πρωτόγονους τύπους CSS Selectors:

Χρήση του CSS Selector ως εντοπιστής

Τι θα μάθετε:

Επιλογέας CSS: ID

Σε αυτό το δείγμα, θα έχουμε πρόσβαση στο πλαίσιο κειμένου 'Email' που υπάρχει στη φόρμα σύνδεσης στο Gmail.com.

Το πλαίσιο κειμένου Email έχει ένα χαρακτηριστικό ID του οποίου η τιμή ορίζεται ως 'Email'. Έτσι, το χαρακτηριστικό ID και η τιμή του μπορούν να χρησιμοποιηθούν για τη δημιουργία CSS Selector για πρόσβαση στο πλαίσιο κειμένου email.

Δημιουργία επιλογέα CSS για στοιχείο ιστού

Βήμα 1 : Εντοπίστε / επιθεωρήστε το στοιχείο ιστού (πλαίσιο κειμένου 'Email' στην περίπτωσή μας) και παρατηρήστε ότι η ετικέτα HTML είναι 'εισαγωγή' και η τιμή του χαρακτηριστικού αναγνωριστικού είναι 'Email' και και οι δύο κάνουν συλλογική αναφορά στο 'Email Textbox'. Ως εκ τούτου, τα παραπάνω δεδομένα θα χρησιμοποιηθούν για τη δημιουργία CSS Selector.

Χρήση του επιλογέα CSS ως εντοπιστής 2

Επαληθεύστε την τιμή εντοπισμού

Βήμα 1 : Πληκτρολογήστε 'css = input # Email', δηλαδή την τιμή εντοπισμού στο πλαίσιο προορισμού στο Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Παρατηρήστε ότι το πλαίσιο κειμένου email θα επισημανθεί.

Χρήση του CSS Selector ως Locator 3

Σύνταξη

css =

  • Ετικέτα HTML - Είναι η ετικέτα που χρησιμοποιείται για να δηλώσει το στοιχείο ιστού στο οποίο θέλουμε να αποκτήσουμε πρόσβαση.
  • # - Το σύμβολο κατακερματισμού χρησιμοποιείται για να συμβολίσει το χαρακτηριστικό ID. Είναι υποχρεωτική η χρήση κατακερματισμού εάν το χαρακτηριστικό ID χρησιμοποιείται για τη δημιουργία CSS Selector.
  • Τιμή χαρακτηριστικού ID - Είναι η τιμή ενός χαρακτηριστικού ID στο οποίο γίνεται πρόσβαση.
  • Πριν από την τιμή του αναγνωριστικού προηγείται ένα σύμβολο κατακερματισμού.

Σημείωση: Ισχύει επίσης για άλλους τύπους CSS Selectors

  • Κατά τον καθορισμό του CSS Selector στο πλαίσιο κειμένου προορισμού του Selenium IDE, θυμηθείτε πάντα να το προθέσετε με το 'css ='.
  • Η ακολουθία των παραπάνω τεχνουργημάτων είναι αναλλοίωτη.
  • Εάν δύο ή περισσότερα στοιχεία ιστού έχουν την ίδια ετικέτα HTML και τιμή χαρακτηριστικού, θα αναγνωριστεί το πρώτο στοιχείο που επισημαίνεται στην πηγή σελίδας.

Επιλογέας CSS: Κατηγορία

Σε αυτό το δείγμα, θα έχουμε πρόσβαση στο πλαίσιο ελέγχου 'Μείνετε συνδεδεμένοι' που υπάρχει κάτω από τη φόρμα σύνδεσης στο gmail.com.

Το πλαίσιο ελέγχου 'Μείνετε συνδεδεμένοι' έχει ένα χαρακτηριστικό κλάσης του οποίου η τιμή ορίζεται ως 'να θυμάστε'. Έτσι, το χαρακτηριστικό Class και η τιμή του μπορούν να χρησιμοποιηθούν για τη δημιουργία ενός CSS Selector για πρόσβαση στο καθορισμένο στοιχείο ιστού.

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

Δημιουργία επιλογέα CSS για στοιχείο ιστού

Βήμα 1 : Εντοπίστε / επιθεωρήστε το στοιχείο ιστού (το πλαίσιο ελέγχου 'Μείνετε συνδεδεμένοι' στην περίπτωσή μας) και παρατηρήστε ότι η ετικέτα HTML είναι 'ετικέτα' και η τιμή του χαρακτηριστικού αναγνωριστικού είναι 'θυμηθείτε' και και οι δύο κάνουν συλλογική αναφορά στο 'Μείνετε συνδεδεμένοι στο πλαίσιο ελέγχου '.

Επαληθεύστε την τιμή εντοπισμού

Βήμα 1 : Πληκτρολογήστε 'css = label.remember', δηλαδή την τιμή εντοπισμού στο πλαίσιο προορισμού στο Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Σημειώστε ότι θα επισημανθεί το πλαίσιο ελέγχου 'Μείνετε συνδεδεμένοι'.

Χρήση του CSS Selector ως Locator 4

Σύνταξη

css =

  • . - Το σύμβολο κουκκίδας χρησιμοποιείται για να συμβολίσει το χαρακτηριστικό Class. Είναι υποχρεωτική η χρήση σημείου κουκκίδων εάν χρησιμοποιείται ένα χαρακτηριστικό Class για τη δημιουργία ενός επιλογέα CSS.
  • Πριν από την τιμή της κλάσης προηγείται ένα σημείο τελείας.

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

Σε αυτό το δείγμα, θα έχουμε πρόσβαση στο κουμπί 'Σύνδεση' που υπάρχει κάτω από τη φόρμα σύνδεσης στο gmail.com.

Το κουμπί 'Σύνδεση' έχει ένα χαρακτηριστικό τύπου του οποίου η τιμή ορίζεται ως 'υποβολή'. Έτσι, το χαρακτηριστικό type και η τιμή του μπορούν να χρησιμοποιηθούν για τη δημιουργία ενός CSS Selector για πρόσβαση στο καθορισμένο στοιχείο web.

Δημιουργία επιλογέα CSS για στοιχείο ιστού

Βήμα 1 : Εντοπίστε / επιθεωρήστε το στοιχείο ιστού (κουμπί 'Σύνδεση' στην περίπτωσή μας) και παρατηρήστε ότι η ετικέτα HTML είναι 'είσοδος', το χαρακτηριστικό είναι τύπος και η τιμή του χαρακτηριστικού τύπου είναι 'υποβολή' και όλοι μαζί κάνουν αναφορά σε το κουμπί 'Σύνδεση'.

Επαληθεύστε την τιμή εντοπισμού

Βήμα 1 : Πληκτρολογήστε 'css = input (type =' submit ')' δηλ. Την τιμή εντοπισμού στο πλαίσιο προορισμού στο Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Σημειώστε ότι το κουμπί 'Σύνδεση' θα επισημανθεί.

Χρήση του CSS Selector ως Locator 5

Σύνταξη

css =

  • Χαρακτηριστικό - Είναι το χαρακτηριστικό που θέλουμε να χρησιμοποιήσουμε για τη δημιουργία CSS Selector. Μπορεί να έχει αξία, τύπο, όνομα κ.λπ. Συνιστάται να επιλέξετε ένα χαρακτηριστικό του οποίου η τιμή προσδιορίζει μοναδικά το στοιχείο ιστού.
  • Τιμή του χαρακτηριστικού - Είναι η τιμή ενός χαρακτηριστικού στο οποίο γίνεται πρόσβαση.

Επιλογέας CSS: ID / Class και χαρακτηριστικό

Σε αυτό το δείγμα, θα έχουμε πρόσβαση στο πλαίσιο κειμένου 'Κωδικός πρόσβασης' που υπάρχει στη φόρμα σύνδεσης στο gmail.com.

Το πλαίσιο κειμένου 'Κωδικός πρόσβασης' έχει ένα χαρακτηριστικό ID του οποίου η τιμή ορίζεται ως 'Passwd', χαρακτηριστικό τύπου του οποίου η τιμή ορίζεται ως 'κωδικός πρόσβασης'. Έτσι, το χαρακτηριστικό ID, το χαρακτηριστικό τύπου και οι τιμές τους μπορούν να χρησιμοποιηθούν για τη δημιουργία CSS Selector για πρόσβαση στο καθορισμένο στοιχείο ιστού.

μετατρέψτε το char σε int c ++

Δημιουργία επιλογέα CSS για στοιχείο ιστού

Βήμα 1 : Εντοπίστε / επιθεωρήστε το στοιχείο ιστού (πλαίσιο κειμένου 'Κωδικός πρόσβασης' στην περίπτωσή μας) και παρατηρήστε ότι η ετικέτα HTML είναι 'εισαγωγή', τα χαρακτηριστικά είναι αναγνωριστικά και τύπος και οι αντίστοιχες τιμές τους είναι 'Passwd' και 'password' και όλες μαζί Κάντε μια αναφορά στο πλαίσιο κειμένου 'Κωδικός πρόσβασης'.

Επαληθεύστε την τιμή εντοπισμού

Βήμα 1 : Πληκτρολογήστε 'css = input # Passwd (name =' Passwd ')' δηλ. Την τιμή εντοπισμού στο πλαίσιο προορισμού στο Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Σημειώστε ότι το πλαίσιο κειμένου 'Κωδικός πρόσβασης' θα επισημανθεί.

Χρήση του CSS Selector ως Locator 5

Σύνταξη

css =

Δύο ή περισσότερα χαρακτηριστικά μπορούν επίσης να παρασχεθούν στη σύνταξη.Για παράδειγμα, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

Επιλογέας CSS: Υπο-συμβολοσειρά

Το CSS στο Selenium επιτρέπει την αντιστοίχιση μιας μερικής συμβολοσειράς και έτσι δημιουργεί ένα πολύ ενδιαφέρον χαρακτηριστικό για τη δημιουργία CSS Selectors χρησιμοποιώντας υποστρώματα. Υπάρχουν τρεις τρόποι με τους οποίους μπορούν να δημιουργηθούν CSS Selectors βάσει του μηχανισμού που χρησιμοποιείται για να ταιριάζει με το substring.

Τύποι μηχανισμών

Όλοι οι κάτω μηχανισμοί έχουν συμβολική σημασία.

  • Ταιριάξτε ένα πρόθεμα
  • Ταιριάξτε ένα επίθημα
  • Ταιριάξτε ένα υπόστρωμα

Ας τα συζητήσουμε λεπτομερώς.

Ταιριάξτε ένα πρόθεμα

Χρησιμοποιείται για να αντιστοιχεί στη συμβολοσειρά με τη βοήθεια ενός αντίστοιχου προθέματος.

Σύνταξη

css =

  • ^ - Συμβολική σημειογραφία για να ταιριάζει με μια συμβολοσειρά χρησιμοποιώντας πρόθεμα.
  • Πρόθεμα - Είναι η συμβολοσειρά με βάση την οποία εκτελείται η λειτουργία αντιστοίχισης. Η πιθανή συμβολοσειρά αναμένεται να ξεκινήσει με την καθορισμένη συμβολοσειρά.

Για παράδειγμα: Ας σκεφτούμε το 'Κωδικός κειμένου', οπότε ο αντίστοιχος CSS Selector θα ήταν:

css = input # Passwd (όνομα ^ = «Pass»)

Ταιριάξτε ένα επίθημα

Χρησιμοποιείται για να αντιστοιχεί στη συμβολοσειρά με τη βοήθεια ενός αντίστοιχου επιθήματος.

Σύνταξη

css =

  • # - Συμβολική σημειογραφία για να ταιριάζει με μια συμβολοσειρά χρησιμοποιώντας επίθημα.
  • Το επίθημα - Είναι η συμβολοσειρά με βάση την οποία εκτελείται η λειτουργία αντιστοίχισης. Η πιθανή συμβολοσειρά αναμένεται να τελειώσει με την καθορισμένη συμβολοσειρά.

Για παράδειγμα,Ας εξετάσουμε και πάλι το 'Κείμενο κωδικού πρόσβασης', οπότε ο αντίστοιχος επιλογέας CSS θα ήταν:

css = input # Passwd (όνομα $ = «wd»)

Ταιριάξτε ένα υπόστρωμα

Χρησιμοποιείται για να αντιστοιχεί στη συμβολοσειρά με τη βοήθεια ενός αντίστοιχου υποστρώματος.

Σύνταξη

css =

  • * - Συμβολική σημειογραφία για να ταιριάζει με μια συμβολοσειρά χρησιμοποιώντας δευτερεύουσα σειρά.
  • Υπο συμβολοσειρά - Είναι η συμβολοσειρά με βάση την οποία εκτελείται η λειτουργία αντιστοίχισης. Η πιθανή συμβολοσειρά αναμένεται να έχει το καθορισμένο μοτίβο συμβολοσειράς.

Για παράδειγμα,ας εξετάσουμε και πάλι το 'Κωδικός κειμένου', οπότε ο αντίστοιχος CSS Selector θα ήταν:

css = input # Passwd (όνομα $ = «wd»)

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

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

Σκεφτείτε, 'Χρειάζεστε βοήθεια;' υπάρχει υπερσύνδεσμος κάτω από τη φόρμα σύνδεσης στο gmail.com.

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

Σύνταξη:

css =

  • : - Το σύμβολο κουκκίδας χρησιμοποιείται για να συμβολίσει τη μέθοδο περιέχει
  • Περιέχει - Είναι η τιμή ενός χαρακτηριστικού Class στην οποία γίνεται πρόσβαση.
  • Κείμενο - Το κείμενο που εμφανίζεται οπουδήποτε στην ιστοσελίδα ανεξάρτητα από την τοποθεσία του.

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

Λόγω του γεγονότος ότι η δημιουργία CSS Selector και Xpath απαιτεί πολλές προσπάθειες και πρακτική, έτσι η διαδικασία ασκείται μόνο από πιο εξελιγμένους και εκπαιδευμένους χρήστες.

Επόμενο σεμινάριο # 7 : Προχωρώντας στο επόμενο σεμινάριό μας, θα εκμεταλλευτούμε την ευκαιρία να σας παρουσιάσουμε μια επέκταση στρατηγικών εντοπισμού. Έτσι, στο επόμενο σεμινάριο, θα μελετήσουμε το μηχανισμός εντοπισμού στοιχείων ιστού στο Google Chrome και τον Internet Explorer.

εργαλείο μετατροπής βίντεο youtube σε mp3

Καλύπτουμε το Selenium Locators με περισσότερες λεπτομέρειες καθώς αποτελεί σημαντικό μέρος της δημιουργίας Selenium Script.

Ενημερώστε μας για τα ερωτήματα / τα σχόλιά σας παρακάτω.

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

^