Comment gérer la table Web dans Selenium

Lecture d'un tableau Web HTML

Il arrive fréquemment que les testeurs aient besoin d'accéder à des éléments, généralement des valeurs textuelles, situés dans des tableaux HTML. Or, les concepteurs web attribuent rarement un attribut `id` ou `name` aux cellules individuelles. Par conséquent, des méthodes telles que `By.id()`, `By.name()` ou `By.cssSelector()` sont rarement efficaces. Dans ce cas, l'option la plus fiable est `By.xpath()`, car elle parcourt les relations parent-enfant à l'intérieur de la balise `<table>`.

Comment gérer la table Web dans Selenium

Considérez le code HTML ci-dessous pour gérer les tables Web dans Selenium.

Nous utiliserons XPath pour obtenir le texte intérieur de la cellule contenant le texte « quatrième cellule ».

Étape 1 - Définir l'élément parent (tableau)

Les localisateurs XPath dans WebDriver commencent toujours par une double barre oblique « // » suivie de l'élément parent. Puisque nous avons affaire à des tables Web dans Selenium, l'élément parent doit toujours être le étiqueter. La première partie de notre Selenium Le localisateur de table XPath doit donc commencer par « //table ».

Étape 2 – Ajouter les éléments enfants

L'élément situé directement sous est , donc est l'enfant de . Inversement, est le parent de Dans XPath, tous les éléments enfants sont placés à droite de leur élément parent, séparés par une barre oblique « / », comme indiqué ci-dessous.

Étape 3 – Ajouter des prédicats

Le L'élément contient deux étiquettes. Ces deux Les étiquettes sont des enfants de , donc est le parent des deux. Les deux Les éléments sont frères et sœurs. Les frères et sœurs sont des éléments enfants qui partagent le même parent.

Pour atteindre le qui contient la « quatrième cellule », nous devons d'abord accéder à la seconde , pas le premier. Écrire seulement « //table/tbody/tr » ciblerait le premier étiqueter.

Alors, comment accéder à la seconde ? La réponse est d'utiliser Prédicats. Les prédicats sont des nombres ou des attributs HTML placés entre crochets « [ ] » qui permettent de distinguer un élément enfant de ses frères et sœurs.. Puisque la ligne dont nous avons besoin est la deuxième, nous utilisons « [2] » comme prédicat.

Si l'on omet le prédicat, XPath renvoie le premier élément frère. Par conséquent, chacun des codes XPath ci-dessous atteindra le premier élément frère. .

Étape 4 - Ajouter les éléments enfants réussis à l'aide des prédicats appropriés

L'élément suivant dont nous avons besoin est le deuxième En appliquant les règles des étapes 2 et 3, nous arrivons au XPath présenté ci-dessous.

Maintenant que nous disposons du localisateur XPath correct, nous pouvons accéder à la cellule et lire son contenu à l'aide du code ci-dessous. Ceci suppose que vous avez enregistré la page HTML sous le nom « newhtml.html » sur votre disque 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();
}

Accéder aux tables imbriquées

Les mêmes principes s'appliquent aux tableaux imbriqués. Les tables imbriquées sont des tables placées à l'intérieur d'une autre table.. Un exemple est illustré ci-dessous.

Pour accéder à la cellule contenant le texte « 4-5-6 » en utilisant les notions de parent/enfant et de prédicat de la section précédente, nous pouvons composer le XPath présenté ci-dessous.

Le code WebDriver ci-dessous récupère le texte interne de la cellule ciblée.

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();
}

La sortie ci-dessous confirme que l'accès à la table interne a réussi.

Utiliser des attributs comme prédicats

Si l'élément est profondément imbriqué dans le code HTML, où le comptage des éléments frères devient fastidieux, nous pouvons utiliser à la place l'attribut unique de cet élément.

Dans l'exemple ci-dessous, la cellule « New York à Chicago » est enfouie profondément à l'intérieur de la cellule. Mercury Page d'accueil des visites.

Nous pouvons utiliser l'attribut unique du tableau (largeur="270") comme prédicat. Les attributs sont utilisés comme prédicats en les préfixant du symbole @Dans l'exemple ci-dessus, la cellule « New York à Chicago » se trouve dans la première du quatrième Notre expression XPath devrait donc ressembler à celle présentée ci-dessous.

N'oubliez pas que lorsque vous placez le XPath à l'intérieur Java, échappez les guillemets doubles autour de « 270 » avec une barre oblique inverse afin que la chaîne By.xpath() ne soit pas terminée prématurément.

Nous sommes maintenant prêts à accéder à cette cellule en utilisant le code ci-dessous.

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();
}

Raccourci : utilisez Inspecter l'élément pour accéder aux tables dans Selenium

Si l'index ou l'attribut d'un élément est difficile à obtenir, la méthode la plus rapide pour générer le XPath consiste à utiliser l'outil Inspect Element des outils de développement des navigateurs modernes.

Considérons l'exemple ci-dessous tiré de Mercury Page d'accueil des visites.

Étape 1

Faites un clic droit sur la cellule cible et sélectionnez Inspecter pour afficher le chemin DOM, puis copiez le XPath complet.

Étape 2

Recherchez le premier élément parent « table » et supprimez tout ce qui se trouve à sa gauche.

Étape 3

Préfixez le reste du XPath avec une double barre oblique « // » et copiez-le dans votre code WebDriver.

Le code WebDriver ci-dessous récupère le texte interne de l'élément profondément imbriqué.

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();
}

Comment compter les lignes et les colonnes d'un tableau Web dynamique

Les tableaux Web dynamiques, tels que les tableaux de bord ou les résultats de recherche, affichent un nombre de lignes différent à chaque chargement. Pour les gérer, utilisez findElements pour aller chercher chaque On stocke les données dans une liste, puis on parcourt chaque cellule pour lire chaque élément. L'extrait de code ci-dessous compte les lignes et lit chaque cellule d'un tableau dont l'identifiant est « customers ».

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());
    }
}

Enveloppez le localisateur dans un WebDriverWait au visibilityOfAllElementsLocatedBy lorsque le tableau est chargé par AJAX. Cela évite les références obsolètes aux éléments sur les grilles à rendu lent.

Selenium 4 localisateurs relatifs pour les tableaux Web

Selenium 4. Des localisateurs relatifs ont été introduits, permettant de cibler des éléments par leur position visuelle. Ils sont utiles lorsque les index XPath sont invalides suite à un réordonnancement des lignes. Les méthodes above(), below(), toLeftOf(), toRightOf() et near() tous acceptent un élément WebElement d'ancrage.

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());

Les localisateurs relatifs restent lisibles même lorsque l'ordre des colonnes change. Pour des résultats optimaux sur les pages dynamiques, associez-les à des attentes explicites.

Outils d'IA pour la gestion des tableaux Web dynamiques

Les plateformes de test assistées par l'IA réduisent la maintenance des localisateurs sur les grilles qui évoluent fréquemment. Des outils comme Testim, Mabel et Fonctionner Ils utilisent la vision par ordinateur et les modèles DOM pour détecter les décalages de colonnes et les localisateurs à auto-réparation. Ils identifient les lignes par le texte d'en-tête et la similarité des cellules plutôt que par des index XPath fixes.

Pour le pur Selenium projets, bibliothèques telles que Healenium Encapsulez le WebDriver et réécrivez les localisateurs défectueux à l'exécution. Combinez ces outils avec WebDriverWait pour garantir la stabilité des scripts de tableaux dynamiques sans avoir à réécrire les sélecteurs après chaque modification de l'interface utilisateur.

Résumé

• By.xpath() est la méthode la plus fiable pour accéder aux cellules d'un tableau Web. Selenium.
• Si le dénombrement des frères et sœurs est difficile, utilisez un attribut unique comme prédicat, précédé du symbole @.
• findElements renvoie une liste qui prend en charge le comptage des lignes dans les tableaux dynamiques.
• Selenium 4 localisateurs relatifs (au-dessus, en dessous, près) réduisent la dépendance à XPath positionnel.
• L'outil Inspect Element des outils de développement accélère la génération XPath pour les cellules profondément enfouies.
• Des outils d’IA tels que Testim, Mabl et les localisateurs d'auto-réparation Healenium pour les grilles changeantes.

FAQ