Gestion des tableaux Web dynamiques à l'aide de Selenium WebDriver

Table Web en sélénium

Il existe deux types de tableaux HTML publiés sur le Web :

  1. Tables statiques: Les données sont statiques, c'est-à-dire que le nombre de lignes et de colonnes est fixe.
  2. Tableaux dynamiques: Les données sont dynamiques, c'est-à-dire que le nombre de lignes et de colonnes n'est PAS fixe.

Comment gérer la table dynamique dans Selenium

Vous trouverez ci-dessous un exemple de table Web dynamique dans Selenium for Sales. En fonction des filtres de date d'entrée, le nombre de lignes sera modifié. Il est donc de nature dynamique.

Gérer la table dynamique dans Selenium

La gestion des tables statiques est facile, mais la gestion des tables dynamiques dans Selenium est un peu difficile car les lignes et les colonnes ne sont pas constantes.

Utilisation de X-Path pour localiser les éléments d'une table Web

Avant de localiser l'élément Web, comprenons d'abord-

Qu'est-ce qu'un élément Web ?

Les éléments Web ne sont rien d'autre que des éléments HTML comme le textebox, boutons radio des listes déroulantes, boutons de soumission, etc. Ces éléments HTML sont écrits avec Commencer étiquette et se termine par un fin Étiquette.

Par exemple,

Mon premier document HTML.

Étapes pour obtenir le chemin X de l’élément Web que nous souhaitons localiser.

Étape 1) Dans Chrome, accédez à https://demo.guru99.com/test/web-table-element.php

Utilisation de X-Path pour localiser les éléments d'une table Web

Étape 2) Faites un clic droit sur l'élément Web dont le chemin X doit être récupéré. Dans notre cas, faites un clic droit sur « Entreprise ». Sélectionnez l'option Inspecter. Le suiviwing l’écran s’affichera –

Utilisation de X-Path pour localiser les éléments d'une table Web

Étape 3) Cliquez avec le bouton droit sur l'élément Web en surbrillance > Sélectionnez l'option Copier -> Copier x-path.

Utilisation de X-Path pour localiser les éléments d'une table Web

Étape 4) Utilisez le chemin X copié « //*[@id="leftcontainer"]/table/thead/tr/th [1] » dans Selenium WebDriver pour localiser l'élément.

Exemple : récupérer le nombre de lignes et de colonnes à partir de Dynamic WebTable

Lors de la gestion dynamique des tables Web dans Selenium, nous ne pouvons pas prédire son nombre de lignes et de colonnes.

En utilisant le pilote Web Selenium, nous pouvons trouver

  • Nombre de lignes et de colonnes de table Web dans Selenium
  • Données de la ligne X ou de la colonne Y.

Vous trouverez ci-dessous un programme permettant de récupérer le nombre total de lignes et de colonnes pour gérer la table Web dans Selenium :

Récupérer le nombre de lignes et de colonnes

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Noofrowsandcols {
    
public static void main(String[] args) throws ParseException {
    	WebDriver wd;
	  System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
	  wd= new ChromeDriver();
        wd.get("https://demo.guru99.com/test/web-table-element.php");         
        //No.of Columns
        List <webelement> col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th"));
        System.out.println("No of cols are : " +col.size()); 
        //No.of rows 
        List <webelement> rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); 
        System.out.println("No of rows are : " + rows.size());
        wd.close();
    }
}

Explication du code :

  • Ici, nous avons d'abord déclaré l'objet Web Driver « wd » et l'avons initialisé avec le pilote Chrome.
  • Nous utilisons la liste au nombre total de colonnes dans « col ».
  • Les commandes findElements renvoient une liste de TOUS les éléments correspondant au localisateur spécifié
  • en utilisant findElements et X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th nous obtenons toutes les colonnes
  • De même, nous répétons le processus pour les lignes.

Sortie :

Récupérer le nombre de lignes et de colonnes

Exemple : récupérer la valeur de cellule d'une ligne et d'une colonne particulières du tableau dynamique

Supposons qu'il nous en faut 3rd ligne du tableau et les données de sa deuxième cellule. Voir le tableau ci-dessous-

Récupérer la valeur de cellule d'une ligne et d'une colonne particulières

Dans le tableau ci-dessus, les données sont régulièrement mises à jour après un certain temps. Les données que vous essayez de récupérer seront différentes de la capture d'écran ci-dessus. Le code reste cependant le même. Voici un exemple de programme pour obtenir les 3rd ligne et 2nd les données de la colonne.

Récupérer la valeur de cellule d'une ligne et d'une colonne particulières

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;


public class RowandCell {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-element.php"); 
		 wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		 WebElement baseTable = wd.findElement(By.tagName("table"));
		  
		 //To find third row of table
		 WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]"));
         String rowtext = tableRow.getText();
		 System.out.println("Third row of table : "+rowtext);
		    
		    //to get 3rd row's 2nd column data
		    WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]"));
		    String valueIneed = cellIneed.getText();
		    System.out.println("Cell value is : " + valueIneed); 
		    wd.close();
    }
}

Explication du code :

  • La table est localisée à l’aide de la propriété de localisateur « tagname ».
  • En utilisant XPath "//*[@id=\"leftcontainer\"]/table/tbody/tr[3]" trouver le 3rd ligne et obtient son texte en utilisant la fonction getText()
  • En utilisant Xpath "//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]" trouvez la 2ème cellule dans 3rd ligne et obtient son texte en utilisant la fonction getText()

Sortie:

Récupérer la valeur de cellule d'une ligne et d'une colonne particulières du tableau dynamique

Exemple : obtenir le maximum de toutes les valeurs d'une colonne d'un tableau dynamique

Dans cet exemple, nous obtiendrons le maximum de toutes les valeurs dans une colonne particulière.

Référez-vous au suivantwing table -

Obtenez le maximum de toutes les valeurs dans une colonne de tableau dynamique

Voici le code

Obtenez le maximum de toutes les valeurs dans une colonne de tableau dynamique

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.text.NumberFormat;


public class MaxFromTable {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-element.php"); 
		 String max;
	     double m=0,r=0;
		 
	       //No. of Columns
	        List <webelement> col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th"));
	        System.out.println("Total No of columns are : " +col.size());
	        //No.of rows
	        List <webelement> rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]"));
	        System.out.println("Total No of rows are : " + rows.size());
	        for (int i =1;i<rows.size();i++)
	        {    
	            max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText();
	            NumberFormat f =NumberFormat.getNumberInstance(); 
	            Number num = f.parse(max);
	            max = num.toString();
	            m = Double.parseDouble(max);
	            if(m>r)
	             {    
	                r=m;
	             }
	        }
	        System.out.println("Maximum current price is : "+ r);
    }
}

</webelement></webelement>

Explication du code :

  • À l'aide du pilote Chrome, nous localisons la table Web et obtenons le nombre total de lignes en utilisant XPath « .//*[@id='leftcontainer']/table/tbody/tr/td[1] »
  • En utilisant la boucle for, nous parcourons le nombre total de lignes et récupérons les valeurs une par une. Pour obtenir la ligne suivante, nous utilisons (i+1) dans XPath
  • Nous comparons l'ancienne valeur avec la nouvelle valeur et la valeur maximale est imprimée à la fin de la boucle for.

Sortie

Obtenez le maximum de toutes les valeurs dans une colonne de tableau dynamique

Exemple : obtenir toutes les valeurs d'une table dynamique

Considérez ce qui suitwing table: https://demo.guru99.com/test/table.html

Obtenez toutes les valeurs d'une table dynamique

Le nombre de colonnes pour chaque ligne est différent.

Ici, les lignes numéro 1, 2 et 4 ont 3 cellules, la ligne numéro 3 a 2 cellules et la ligne numéro 5 a 1 cellule.

Nous devons obtenir les valeurs de toutes les cellules

Voici le code:

Obtenez toutes les valeurs d'une table dynamique

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.chrome.ChromeDriver;



public class NofRowsColmns {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
    	System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
    	wd = new ChromeDriver();
    	wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    	wd.get("https://demo.guru99.com/test/table.html");
    	//To locate table.
    	WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody"));
    	//To locate rows of table. 
    	List < WebElement > rows_table = mytable.findElements(By.tagName("tr"));
    	//To calculate no of rows In table.
    	int rows_count = rows_table.size();
    	//Loop will execute till the last row of table.
    	for (int row = 0; row < rows_count; row++) {
    	    //To locate columns(cells) of that specific row.
    	    List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td"));
    	    //To calculate no of columns (cells). In that specific row.
    	    int columns_count = Columns_row.size();
    	    System.out.println("Number of cells In Row " + row + " are " + columns_count);
    	    //Loop will execute till the last cell of that specific row.
    	    for (int column = 0; column < columns_count; column++) {
    	        // To retrieve text from that specific cell.
    	        String celtext = Columns_row.get(column).getText();
    	        System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext);
    	    }
    	    System.out.println("-------------------------------------------------- ");
    	}
   	}
}

Explication du code :

  • rows_count donne le nombre total de lignes
  • pour chaque ligne, nous obtenons le nombre total de colonnes en utilisant rows_table.get(row).findElements(By.tagName("td"));
  • Nous parcourons chaque colonne et chaque ligne et récupérons les valeurs.

Sortie:

Obtenez toutes les valeurs d'une table dynamique

Résumé

  • By.xpath() est couramment utilisé pour accéder aux éléments de table.
  • Les tables Web statiques dans Selenium sont de nature cohérente. c'est-à-dire qu'ils ont un nombre fixe de lignes ainsi que des données cellulaires.
  • Les tableaux Web dynamiques sont incohérents, c'est-à-dire qu'ils n'ont pas un nombre fixe de données de lignes et de cellules.
  • Grâce au pilote Web Selenium, nous pouvons gérer facilement les tables Web dynamiques.
  • Selenium Webdriver nous permet d'accéder aux tables Web dynamiques par leur Chemin X