Πώς να χειριστείτε τον πίνακα Ιστού Selenium

Ανάγνωση ενός πίνακα ιστού HTML

Υπάρχουν πολλές φορές που οι δοκιμαστές χρειάζεται να έχουν πρόσβαση σε στοιχεία, συνήθως τιμές κειμένου, που βρίσκονται μέσα σε πίνακες HTML. Ωστόσο, οι σχεδιαστές ιστοσελίδων σπάνια παρέχουν ένα χαρακτηριστικό id ή name σε μεμονωμένα κελιά. Επομένως, μέθοδοι όπως By.id(), By.name() ή By.cssSelector() σπάνια λειτουργούν. Σε αυτό το σενάριο, η πιο αξιόπιστη επιλογή είναι η By.xpath() επειδή καθοδηγεί τις σχέσεις γονέα-παιδιού μέσα στην ετικέτα πίνακα.

Πώς να χειριστείτε τον πίνακα Ιστού Selenium

Εξετάστε τον παρακάτω κώδικα HTML για τη διαχείριση πινάκων ιστού Selenium.

Θα το χρησιμοποιησουμε XPath για να λάβετε το εσωτερικό κείμενο του κελιού που περιέχει το κείμενο "τέταρτο κελί".

Βήμα 1 – Ορισμός του γονικού στοιχείου (πίνακας)

Οι εντοπιστές XPath στο WebDriver ξεκινούν πάντα με μια διπλή κάθετο "//" ακολουθούμενη από το γονικό στοιχείο. Δεδομένου ότι έχουμε να κάνουμε με πίνακες ιστού στο Selenium, το γονικό στοιχείο θα πρέπει πάντα να είναι το ετικέτα. Η πρώτη μερίδα μας Selenium Επομένως, ο εντοπιστής πινάκων XPath πρέπει να ξεκινά με "//table".

Βήμα 2 – Προσθέστε τα θυγατρικά στοιχεία

Το στοιχείο ακριβώς από κάτω είναι , έτσι είναι το παιδί του Αντίθετα, είναι ο γονέας του Όλα τα θυγατρικά στοιχεία στο XPath τοποθετούνται δεξιά από το γονικό τους στοιχείο, χωρισμένα με μία κάθετο "/" όπως φαίνεται παρακάτω.

Βήμα 3 – Προσθήκη κατηγορημάτων

Ο το στοιχείο περιέχει δύο ετικέτες. Αυτά τα δύο οι ετικέτες είναι παιδιά του , έτσι είναι ο γονέας και των δύο. Τα δύο τα στοιχεία είναι αδέρφια. Τα αδέλφια είναι στοιχεία παιδιού που μοιράζονται τον ίδιο γονέα.

Για να φτάσετε στο που περιέχει το «τέταρτο κελί», πρέπει πρώτα να έχουμε πρόσβαση στο δεύτερος , όχι το πρώτο. Η χρήση μόνο του "//table/tbody/tr" θα στοχεύσει το πρώτο ετικέτα.

Πώς λοιπόν έχουμε πρόσβαση στο δεύτερο Η απάντηση είναι να χρησιμοποιήσετε Κατηγορήματα. Τα κατηγόρημα είναι αριθμοί ή χαρακτηριστικά HTML που περικλείονται σε αγκύλες "[ ]" και διακρίνουν ένα θυγατρικό στοιχείο από τα αδέλφια του.Δεδομένου ότι η γραμμή που χρειαζόμαστε είναι η δεύτερη, χρησιμοποιούμε το "[2]" ως κατηγόρημα.

Αν παραλείψουμε το κατηγόρημα, το XPath επιστρέφει το πρώτο αδελφό. Επομένως, οποιοσδήποτε από τους παρακάτω κώδικες XPath θα φτάσει στο πρώτο .

Βήμα 4 – Προσθέστε τα διαδοχικά θυγατρικά στοιχεία χρησιμοποιώντας τις κατάλληλες κατηγόριες

Το επόμενο στοιχείο που χρειαζόμαστε είναι το δεύτερο Εφαρμόζοντας τους κανόνες από τα Βήματα 2 και 3, καταλήγουμε στο XPath που φαίνεται παρακάτω.

Τώρα που έχουμε τον σωστό εντοπιστή XPath, μπορούμε να αποκτήσουμε πρόσβαση στο κελί και να διαβάσουμε το εσωτερικό του κείμενο χρησιμοποιώντας τον παρακάτω κώδικα. Αυτό προϋποθέτει ότι έχετε αποθηκεύσει τη σελίδα HTML ως "newhtml.html" μέσα στη μονάδα δίσκου C.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Πρόσβαση σε ένθετους πίνακες

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

Για να αποκτήσουμε πρόσβαση στο κελί με το κείμενο "4-5-6" χρησιμοποιώντας τις ιδέες γονέα/παιδιού και κατηγορήματος από την προηγούμενη ενότητα, μπορούμε να συντάξουμε το XPath που φαίνεται παρακάτω.

Ο παρακάτω κώδικας WebDriver ανακτά το εσωτερικό κείμενο του στοχευμένου κελιού.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Η παρακάτω έξοδος επιβεβαιώνει ότι έγινε επιτυχής πρόσβαση στον εσωτερικό πίνακα.

Χρήση Ιδιοτήτων ως Κατηγορήματα

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

Στο παρακάτω παράδειγμα, το κελί «Νέα Υόρκη προς Σικάγο» είναι θαμμένο βαθιά μέσα στο Mercury Αρχική σελίδα περιηγήσεων.

Μπορούμε να χρησιμοποιήσουμε το μοναδικό χαρακτηριστικό του πίνακα (πλάτος=”270″) ως κατηγόρημα. Τα χαρακτηριστικά χρησιμοποιούνται ως κατηγόρημα προσθέτοντάς τα με το σύμβολο @Στο παραπάνω παράδειγμα, το κελί «Από τη Νέα Υόρκη στο Σικάγο» βρίσκεται στο πρώτο του τέταρτου , επομένως το XPath μας θα πρέπει να μοιάζει με αυτό που φαίνεται παρακάτω.

Να θυμάστε ότι όταν βάζετε το XPath μέσα Java, διαφύγετε τα διπλά εισαγωγικά γύρω από το "270" με μια ανάστροφη κάθετο, ώστε η συμβολοσειρά By.xpath() να μην τερματίζεται πρόωρα.

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

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Συντόμευση: Χρησιμοποιήστε το στοιχείο Inspect Element για πρόσβαση σε πίνακες Selenium

Εάν ο δείκτης ή το χαρακτηριστικό ενός στοιχείου είναι δύσκολο να ληφθεί, ο γρηγορότερος τρόπος για να δημιουργήσετε το XPath είναι χρησιμοποιώντας το Inspect Element στα σύγχρονα DevTools του προγράμματος περιήγησης.

Σκεφτείτε το παρακάτω παράδειγμα από το Mercury Αρχική σελίδα περιηγήσεων.

Βήμα 1

Κάντε δεξί κλικ στο κελί προορισμού και επιλέξτε Επιθεώρηση για να δείτε τη διαδρομή DOM και, στη συνέχεια, αντιγράψτε ολόκληρη την XPath.

Βήμα 2

Αναζητήστε το πρώτο γονικό στοιχείο "πίνακας" και διαγράψτε τα πάντα στα αριστερά του.

Βήμα 3

Προθέστε την υπόλοιπη XPath με διπλή κάθετο "//" και αντιγράψτε την στον κώδικα WebDriver.

Ο παρακάτω κώδικας WebDriver ανακτά το εσωτερικό κείμενο του βαθιά ένθετου στοιχείου.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Πώς να μετρήσετε γραμμές και στήλες σε έναν δυναμικό πίνακα ιστού

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

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Τυλίξτε τον εντοπιστή σε ένα WebDriverWait μαζί σου, visibilityOfAllElementsLocatedBy όταν ο πίνακας φορτώνεται από AJAX. Αυτό αποτρέπει τις παλιές αναφορές στοιχείων σε πλέγματα αργής απόδοσης.

Selenium 4 σχετικοί εντοπιστές για πίνακες ιστού

Selenium 4 εισήγαγε σχετικούς εντοπιστές που στοχεύουν στοιχεία με βάση την οπτική τους θέση. Είναι χρήσιμοι όταν τα ευρετήρια XPath σπάνε επειδή οι γραμμές αναδιατάσσονται. Οι μέθοδοι above(), below(), toLeftOf(), toRightOf()και near() όλα δέχονται ένα anchor WebElement.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Οι σχετικοί εντοπιστές παραμένουν ευανάγνωστοι όταν αλλάζει η σειρά των στηλών. Συνδυάστε τους με σαφείς αναμονές για τα ισχυρότερα αποτελέσματα σε σελίδες που βασίζονται σε δεδομένα.

Εργαλεία Τεχνητής Νοημοσύνης για τη διαχείριση δυναμικών πινάκων ιστού

Οι πλατφόρμες δοκιμών με υποβοήθηση από την τεχνητή νοημοσύνη μειώνουν τη συντήρηση του εντοπιστή σε πλέγματα που αλλάζουν συχνά. Εργαλεία όπως Testim, Mablκαι λειτουργούν χρησιμοποιούν υπολογιστική όραση συν μοντέλα DOM για την ανίχνευση μετατοπίσεων στηλών και εντοπιστών αυτο-επιδιόρθωσης. Αναγνωρίζουν γραμμές με βάση το κείμενο της κεφαλίδας και την ομοιότητα των κελιών αντί για σταθερούς δείκτες XPath.

Για καθαρό Selenium έργα, βιβλιοθήκες όπως Ιαλένιο Τυλίξτε το WebDriver και ξαναγράψτε τους προβληματικούς εντοπιστές κατά τον χρόνο εκτέλεσης. Συνδυάστε αυτά τα εργαλεία με το WebDriverWait για να διατηρήσετε σταθερά τα δυναμικά σενάρια πινάκων χωρίς να ξαναγράψετε τους επιλογείς μετά από κάθε αλλαγή στο περιβάλλον χρήστη.

Περίληψη

• Το By.xpath() είναι ο πιο αξιόπιστος τρόπος πρόσβασης σε κελιά ενός πίνακα Web στο Selenium.
• Αν η καταμέτρηση αδελφών είναι δύσκολη, χρησιμοποιήστε ένα μοναδικό χαρακτηριστικό ως κατηγόρημα, με πρόθεμα το σύμβολο @.
• Η findElements επιστρέφει μια λίστα που υποστηρίζει την καταμέτρηση γραμμών σε δυναμικούς πίνακες.
• Selenium 4 σχετικοί εντοπιστές (πάνω, κάτω, κοντά) μειώνουν την εξάρτηση από το XPath θέσης.
• Το Inspect Element στο DevTools επιταχύνει τη δημιουργία XPath για κελιά που είναι θαμμένα βαθιά.
• Εργαλεία τεχνητής νοημοσύνης όπως Testim, Mabl και Healenium αυτοεπιδιορθούμενοι εντοπιστές για την αλλαγή πλεγμάτων.

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