Εντοπιστές στο Selenium IDE: CSS Selector - DOM - XPath - ταυτότητα

Πίνακας περιεχομένων:

Anonim

Τι είναι οι εντοπιστές;

Το Locator είναι μια εντολή που λέει στο Selenium IDE ποια στοιχεία GUI (π.χ. Text Box, κουμπιά, πλαίσια ελέγχου κ.λπ.) πρέπει να λειτουργήσει. Ο προσδιορισμός των σωστών στοιχείων GUI είναι απαραίτητη προϋπόθεση για τη δημιουργία ενός σεναρίου αυτοματισμού. Αλλά η ακριβής αναγνώριση των στοιχείων GUI είναι πιο δύσκολη από ό, τι ακούγεται. Μερικές φορές, καταλήγετε να εργάζεστε με λανθασμένα στοιχεία GUI ή καθόλου στοιχεία! Ως εκ τούτου, το Selenium παρέχει έναν αριθμό εντοπιστών για να εντοπίσει με ακρίβεια ένα στοιχείο GUI

Οι διαφορετικοί τύποι εντοπισμού CSS στο Selenium IDE

Υπάρχουν εντολές που δεν χρειάζονται εντοπιστή (όπως η εντολή "open"). Ωστόσο, οι περισσότεροι από αυτούς χρειάζονται στοιχεία Locators στο Selenium webdriver.

Η επιλογή εντοπισμού εξαρτάται σε μεγάλο βαθμό από την υπό δοκιμή εφαρμογή σας . Σε αυτό το σεμινάριο, θα εναλλάξουμε μεταξύ Facebook, new tours.demoaut βάσει εντοπιστών που υποστηρίζουν αυτές οι εφαρμογές. Ομοίως, στο έργο δοκιμών σας, θα επιλέξετε οποιονδήποτε από τους παραπάνω αναφερόμενους εντοπιστές στοιχείων στο πρόγραμμα οδήγησης web Selenium, με βάση την υποστήριξη της εφαρμογής σας

Εντοπισμός ανά αναγνωριστικό

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

Μορφή στόχου: id = id του στοιχείου

Για αυτό το παράδειγμα, θα χρησιμοποιήσουμε το Facebook ως δοκιμαστική εφαρμογή μας, επειδή η Mercury Tours δεν χρησιμοποιεί χαρακτηριστικά αναγνωριστικού.

Βήμα 1. Από τότε που δημιουργήθηκε αυτό το σεμινάριο, το Facebook άλλαξε το Σχέδιο σελίδας σύνδεσης. Χρησιμοποιήστε αυτήν τη δοκιμαστική σελίδα http://demo.guru99.com/test/facebook.html για δοκιμή. Ελέγξτε το πλαίσιο κειμένου "Email ή τηλέφωνο" χρησιμοποιώντας το Firebug και σημειώστε το αναγνωριστικό του. Σε αυτήν την περίπτωση, το αναγνωριστικό είναι "email".

Βήμα 2. Εκκινήστε το Selenium IDE και εισαγάγετε "id = email" στο πλαίσιο Target. Κάντε κλικ στο κουμπί Εύρεση και παρατηρήστε ότι το πλαίσιο κειμένου "Ηλεκτρονικό ταχυδρομείο ή τηλέφωνο" επισημαίνεται με κίτρινο και περιβάλλεται με πράσινο, πράγμα που σημαίνει ότι το Selenium IDE μπόρεσε να εντοπίσει σωστά αυτό το στοιχείο.

Εντοπισμός κατά όνομα

Τα στοιχεία εντοπισμού με το όνομα είναι πολύ παρόμοια με τον εντοπισμό ανά αναγνωριστικό, εκτός από το ότι χρησιμοποιούμε το πρόθεμα "name =" .

Μορφή στόχου: όνομα = όνομα του στοιχείου

Στην ακόλουθη επίδειξη, θα χρησιμοποιήσουμε τώρα το Mercury Tours επειδή όλα τα σημαντικά στοιχεία έχουν ονόματα.

Βήμα 1. Μεταβείτε στη διεύθυνση http://demo.guru99.com/test/newtours/ και χρησιμοποιήστε το Firebug για να ελέγξετε το πλαίσιο κειμένου "Όνομα χρήστη". Σημειώστε το χαρακτηριστικό του ονόματος.

Εδώ, βλέπουμε ότι το όνομα του στοιχείου είναι "όνομα χρήστη".

Βήμα 2. Στο Selenium IDE, πληκτρολογήστε "name = userName" στο πλαίσιο Target και κάντε κλικ στο κουμπί Εύρεση. Το Selenium IDE θα πρέπει να μπορεί να εντοπίσει το πλαίσιο κειμένου Όνομα χρήστη επισημαίνοντάς το.

Εντοπισμός κατά όνομα χρησιμοποιώντας φίλτρα

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

Μορφή στόχου : name = name_of_the_element filter = value_of_filter

Ας δούμε ένα παράδειγμα -

Βήμα 1 . Συνδεθείτε στο Mercury Tours χρησιμοποιώντας το "φροντιστήριο" ως όνομα χρήστη και κωδικό πρόσβασης. Θα σας οδηγήσει στη σελίδα Flight Finder που φαίνεται παρακάτω.

Βήμα 2. Χρησιμοποιώντας το Firebug, παρατηρήστε ότι τα κουμπιά επιλογής Round Trip και One Way έχουν το ίδιο όνομα "tripType". Ωστόσο, έχουν διαφορετικά VALUE χαρακτηριστικά, ώστε να μπορούμε να τα χρησιμοποιήσουμε ως φίλτρο.

Βήμα 3.

  • Πρώτα θα έχουμε πρόσβαση στο κουμπί επιλογής One Way. Κάντε κλικ στην πρώτη γραμμή του προγράμματος επεξεργασίας.
  • Στο πλαίσιο εντολών του Selenium IDE, εισαγάγετε την εντολή "κλικ".
  • Στο πλαίσιο Target, εισαγάγετε "name = tripType value = oneway". Το τμήμα "value = oneway" είναι το φίλτρο μας.

Βήμα 4 . Κάντε κλικ στο κουμπί Εύρεση και παρατηρήστε ότι το Selenium IDE είναι σε θέση να επισημάνει το κουμπί επιλογής One Way με πράσινο - που σημαίνει ότι μπορούμε να έχουμε πρόσβαση στο στοιχείο με επιτυχία χρησιμοποιώντας το χαρακτηριστικό VALUE.

Βήμα 5. Πατήστε το πλήκτρο "X" στο πληκτρολόγιό σας για να εκτελέσετε αυτήν την εντολή κλικ. Παρατηρήστε ότι επιλέχθηκε το κουμπί επιλογής One Way.

Μπορείτε να κάνετε το ίδιο ακριβώς πράγμα με το κουμπί επιλογής Round Trip, αυτή τη φορά, χρησιμοποιώντας το "name = tripType value = roundtrip" ως στόχο σας.

Εντοπισμός με κείμενο συνδέσμου

Αυτός ο τύπος εντοπισμού CSS στο Selenium ισχύει μόνο για κείμενα υπερσύνδεσης. Έχουμε πρόσβαση στο σύνδεσμο προθέτοντας τον στόχο μας με το "link =" και στη συνέχεια ακολουθούμενο από το κείμενο υπερσύνδεσης.

Μορφή στόχου : link = link_text

Σε αυτό το παράδειγμα, θα έχουμε πρόσβαση στον σύνδεσμο "ΕΓΓΡΑΦΗ" που βρίσκεται στην αρχική σελίδα του Mercury Tours.

Βήμα 1.

  • Πρώτα, βεβαιωθείτε ότι έχετε αποσυνδεθεί από τη Mercury Tours.
  • Μεταβείτε στην αρχική σελίδα της Mercury Tours.

Βήμα 2 .

  • Χρησιμοποιώντας το Firebug, ελέγξτε το σύνδεσμο "ΕΓΓΡΑΦΗ". Το κείμενο συνδέσμου βρίσκεται μεταξύ και ετικετών.
  • Σε αυτήν την περίπτωση, το κείμενο του συνδέσμου μας είναι "ΕΓΓΡΑΦΗ". Αντιγράψτε το κείμενο του συνδέσμου.

Βήμα 3 . Αντιγράψτε το κείμενο του συνδέσμου στο Firebug και επικολλήστε το στο πλαίσιο Target Selenium IDE. Προσθέστε το με "link =".

Βήμα 4. Κάντε κλικ στο κουμπί Εύρεση και παρατηρήστε ότι το Selenium IDE μπόρεσε να επισημάνει σωστά τον σύνδεσμο ΕΓΓΡΑΦΗ.

Βήμα 5. Για περαιτέρω επαλήθευση, εισαγάγετε "clickAndWait" στο πλαίσιο εντολών και εκτελέστε το. Το Selenium IDE θα πρέπει να μπορεί να κάνει κλικ στον σύνδεσμο ΕΓΓΡΑΦΗΣ με επιτυχία και να σας μεταφέρει στη σελίδα Εγγραφής που φαίνεται παρακάτω

Εντοπισμός ανά CSS Selector

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

Οι CSS Selectors στο Selenium έχουν πολλές μορφές, αλλά θα επικεντρωθούμε μόνο στις πιο κοινές.

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

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

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

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

Σύνταξη

Περιγραφή

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

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

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

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

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

Εντοπισμός ανά CSS Selector - Tag and Class

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

Σύνταξη

Περιγραφή

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

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

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

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

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

Εντοπισμός ανά CSS Selector - Ετικέτα και χαρακτηριστικό

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

Σύνταξη

Περιγραφή

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

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

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

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

Εντοπισμός ανά CSS Selector - ετικέτα, κλάση και χαρακτηριστικό

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

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

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

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

Εντοπισμός ανά CSS Selector - εσωτερικό κείμενο

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

Σύνταξη

Περιγραφή

css = tag: περιέχει ("εσωτερικό κείμενο")
  • tag = η ετικέτα HTML του στοιχείου στο οποίο γίνεται πρόσβαση
  • εσωτερικό κείμενο = το εσωτερικό κείμενο του στοιχείου

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

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

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

Εντοπισμός κατά DOM (Μοντέλο αντικειμένου εγγράφου)

Το Document Object Model (DOM), με απλούς όρους, είναι ο τρόπος με τον οποίο δομούνται τα στοιχεία HTML. Το Selenium IDE μπορεί να χρησιμοποιήσει το DOM στην πρόσβαση σε στοιχεία σελίδας. Εάν χρησιμοποιήσουμε αυτήν τη μέθοδο, το πλαίσιο στόχευσης θα ξεκινά πάντα με το "dom = document…"; Ωστόσο, το πρόθεμα "dom =" συνήθως αφαιρείται επειδή το Selenium IDE μπορεί να ερμηνεύσει αυτόματα οτιδήποτε ξεκινά με τη λέξη-κλειδί "έγγραφο" ως διαδρομή μέσα στο DOM στο Σελήνιο ούτως ή άλλως.

Υπάρχουν τέσσερις βασικοί τρόποι εντοπισμού ενός στοιχείου μέσω του DOM στο Σελήνιο:

  • getElementById
  • getElementsByName
  • dom: name (ισχύει μόνο για στοιχεία μέσα σε μια ονομαστική φόρμα)
  • dom: ευρετήριο

Εντοπισμός κατά DOM - getElementById

Ας επικεντρωθούμε στην πρώτη μέθοδο - χρησιμοποιώντας τη μέθοδο getElementById του DOM στο Selenium. Η σύνταξη θα ήταν:

Σύνταξη

Περιγραφή

document.getElementById ("αναγνωριστικό του στοιχείου")

id του στοιχείου = αυτή είναι η τιμή του χαρακτηριστικού ID του στοιχείου προς πρόσβαση. Αυτή η τιμή πρέπει πάντα να περικλείεται σε ένα ζευγάρι παρενθέσεων ("").

Βήμα 1. Χρησιμοποιήστε αυτήν τη σελίδα επίδειξης http://demo.guru99.com/test/facebook.html Μεταβείτε σε αυτό και χρησιμοποιήστε το Firebug για να ελέγξετε το πλαίσιο ελέγχου "Διατήρηση σύνδεσης". Σημειώστε την ταυτότητά του.

Μπορούμε να δούμε ότι το αναγνωριστικό που πρέπει να χρησιμοποιήσουμε είναι "persist_box".

Βήμα 2. Ανοίξτε το Selenium IDE και στο πλαίσιο Target, πληκτρολογήστε "document.getElementById (" persist_box ")" και κάντε κλικ στο Εύρεση. Το Selenium IDE θα πρέπει να μπορεί να εντοπίσει το πλαίσιο ελέγχου "Διατήρηση σύνδεσης". Αν και δεν μπορεί να επισημάνει το εσωτερικό του πλαισίου ελέγχου, το Selenium IDE μπορεί ακόμα να περιβάλλει το στοιχείο με ένα φωτεινό πράσινο περίγραμμα όπως φαίνεται παρακάτω.

Εντοπισμός κατά DOM - getElementsByName

Η μέθοδος getElementById μπορεί να έχει πρόσβαση μόνο σε ένα στοιχείο κάθε φορά και αυτό είναι το στοιχείο με το αναγνωριστικό που καθορίσατε Η μέθοδος getElementsByName είναι διαφορετική. Συλλέγει μια σειρά στοιχείων που έχουν το όνομα που καθορίσατε. Έχετε πρόσβαση στα μεμονωμένα στοιχεία χρησιμοποιώντας ένα ευρετήριο που ξεκινά από 0.

getElementById

  • Θα πάρει μόνο ένα στοιχείο για εσάς.
  • Αυτό το στοιχείο φέρει το αναγνωριστικό που καθορίσατε στις παρενθέσεις του getElementById ().

getElementsByName

  • Θα πάρει μια συλλογή στοιχείων των οποίων τα ονόματα είναι όλα ίδια.
  • Κάθε στοιχείο ευρετηριάζεται με έναν αριθμό που ξεκινά από το 0 ακριβώς όπως ένας πίνακας
  • Καθορίζετε σε ποιο στοιχείο θέλετε να αποκτήσετε πρόσβαση τοποθετώντας τον αριθμό ευρετηρίου του στις αγκύλες στην σύνταξη getElementsByName παρακάτω.

Σύνταξη

Περιγραφή

document.getElementsByName ("όνομα") [ευρετήριο]
  • name = όνομα του στοιχείου όπως ορίζεται από το χαρακτηριστικό «name»
  • index = ένας ακέραιος αριθμός που υποδεικνύει ποιο στοιχείο της συστοιχίας getElementsByName θα χρησιμοποιηθεί.

Βήμα 1. Μεταβείτε στην Αρχική σελίδα της Mercury Tours και συνδεθείτε χρησιμοποιώντας το "φροντιστήριο" ως όνομα χρήστη και κωδικό πρόσβασης. Ο Firefox θα σας οδηγήσει στην οθόνη Flight Finder.

Βήμα 2. Χρησιμοποιώντας το Firebug, ελέγξτε τα τρία κουμπιά επιλογής στο κάτω μέρος της σελίδας (κουμπιά επιλογής Economy class, Business class και First class). Παρατηρήστε ότι όλοι έχουν το ίδιο όνομα που είναι "servClass".

Βήμα 3. Ας αποκτήσουμε πρόσβαση στο κουμπί επιλογής "Economy class" πρώτα. Από όλα αυτά τα τρία κουμπιά επιλογής, αυτό το στοιχείο έρχεται πρώτο, επομένως έχει δείκτη 0. Στο Selenium IDE, πληκτρολογήστε "document.getElementsByName (" servClass ") [0]" και κάντε κλικ στο κουμπί Εύρεση. Το Selenium IDE θα πρέπει να μπορεί να αναγνωρίζει σωστά το κουμπί επιλογής Economy class.

Βήμα 4. Αλλάξτε τον αριθμό ευρετηρίου σε 1, ώστε ο στόχος σας να γίνει πλέον document.getElementsByName ("servClass") [1]. Κάντε κλικ στο κουμπί Εύρεση και το Selenium IDE θα πρέπει να μπορεί να επισημάνει το κουμπί επιλογής "Business class", όπως φαίνεται παρακάτω.

Εντοπισμός κατά DOM - dom: name

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

Σύνταξη

Περιγραφή

document.forms ["όνομα της φόρμας"]. στοιχεία ["όνομα του στοιχείου"]
  • όνομα της φόρμας = η τιμή του χαρακτηριστικού ονόματος της ετικέτας φόρμας που περιέχει το στοιχείο στο οποίο θέλετε να αποκτήσετε πρόσβαση
  • όνομα του στοιχείου = η τιμή του χαρακτηριστικού ονόματος του στοιχείου στο οποίο θέλετε να αποκτήσετε πρόσβαση

Βήμα 1. Μεταβείτε στην αρχική σελίδα της Mercury Tours (http://demo.guru99.com/test/newtours/) και χρησιμοποιήστε το Firebug για να ελέγξετε το πλαίσιο κειμένου Όνομα χρήστη. Παρατηρήστε ότι περιέχεται σε μια φόρμα που ονομάζεται "σπίτι".

Βήμα 2. Στο Selenium IDE, πληκτρολογήστε "document.forms [" home "]. Στοιχεία [" userName "]" και κάντε κλικ στο κουμπί Εύρεση. Το Selenium IDE πρέπει να μπορεί να έχει πρόσβαση στο στοιχείο με επιτυχία.

Εντοπισμός κατά DOM - dom: index

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

Σύνταξη

Περιγραφή

document.forms [ευρετήριο της φόρμας]. στοιχεία [ευρετήριο του στοιχείου]
  • ευρετήριο της φόρμας = ο αριθμός ευρετηρίου (ξεκινώντας από 0) της φόρμας σε σχέση με ολόκληρη τη σελίδα
  • ευρετήριο του στοιχείου = ο αριθμός ευρετηρίου (ξεκινώντας από 0) του στοιχείου σε σχέση με ολόκληρη τη φόρμα που το περιέχει

Θα έχουμε πρόσβαση στο πλαίσιο κειμένου "Τηλέφωνο" στη σελίδα εγγραφής Mercury Tours. Η φόρμα σε αυτήν τη σελίδα δεν έχει όνομα και χαρακτηριστικό ID, επομένως αυτό θα αποτελέσει ένα καλό παράδειγμα.

Βήμα 1. Μεταβείτε στη σελίδα εγγραφής Mercury Tours και ελέγξτε το πλαίσιο κειμένου Τηλέφωνο. Παρατηρήστε ότι η φόρμα που περιέχει δεν έχει αναγνωριστικό και χαρακτηριστικά ονόματος.

Βήμα 2. Εισαγάγετε "document.forms [0] .elements [3]" στο πλαίσιο Target Selenium IDE και κάντε κλικ στο κουμπί Εύρεση. Το Selenium IDE πρέπει να μπορεί να έχει πρόσβαση στο πλαίσιο κειμένου του τηλεφώνου σωστά.

Βήμα 3. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το όνομα του στοιχείου αντί του ευρετηρίου του και να λάβετε το ίδιο αποτέλεσμα. Πληκτρολογήστε "document.forms [0] .elements [" phone "]" στο πλαίσιο Target Selenium IDE. Το πλαίσιο κειμένου του τηλεφώνου θα πρέπει να εξακολουθεί να επισημαίνεται.

Εντοπισμός από XPath

Το XPath είναι η γλώσσα που χρησιμοποιείται κατά τον εντοπισμό κόμβων XML (Extensible Markup Language). Δεδομένου ότι το HTML μπορεί να θεωρηθεί ως εφαρμογή του XML, μπορούμε επίσης να χρησιμοποιήσουμε το XPath στον εντοπισμό στοιχείων HTML.

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

Μειονέκτημα: Είναι η πιο περίπλοκη μέθοδος προσδιορισμού στοιχείων λόγω πάρα πολλών διαφορετικών κανόνων και εκτιμήσεων.

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

Βήμα 1. Μεταβείτε στην Αρχική σελίδα του Mercury Tours και χρησιμοποιήστε το Firebug για να ελέγξετε το πορτοκαλί ορθογώνιο στα δεξιά του κίτρινου πλαισίου "Σύνδεσμοι". Ανατρέξτε στην παρακάτω εικόνα.

Βήμα 2 . Κάντε δεξί κλικ στον κώδικα HTML του στοιχείου και, στη συνέχεια, επιλέξτε την επιλογή "Αντιγραφή XPath".

Βήμα 3. Στο Selenium IDE, πληκτρολογήστε μία προς τα εμπρός κάθετο "/" στο πλαίσιο Target και μετά επικολλήστε το XPath που αντιγράψαμε στο προηγούμενο βήμα. Η καταχώριση στο πλαίσιο Target θα πρέπει τώρα να ξεκινά με δύο κάθετες κάθετες "//".

Βήμα 4 . Κάντε κλικ στο κουμπί Εύρεση. Το σελήνιο IDE θα πρέπει να μπορεί να επισημαίνει το πορτοκαλί κουτί όπως φαίνεται παρακάτω.

Περίληψη

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

Μέθοδος

Σύνταξη στόχου

Παράδειγμα
Με αναγνωριστικό id = id_of_the_element id = email
Από όνομα name = name_of_the_element όνομα = όνομα χρήστη
Με όνομα χρησιμοποιώντας φίλτρα name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Με κείμενο συνδέσμου link = link_text σύνδεσμος = ΕΓΓΡΑΦΗ
Ετικέτα και αναγνωριστικό css = ετικέτα # id css = εισαγωγή # email
Ετικέτα και τάξη css = ετικέτα. τάξη css = input.inputtext
Ετικέτα και χαρακτηριστικό css = tag [χαρακτηριστικό = τιμή] css = εισαγωγή [όνομα = επώνυμο]
Ετικέτα, κλάση και χαρακτηριστικό css = ετικέτα. τάξη [χαρακτηριστικό = τιμή] css = input.inputtext [tabindex = 1]