Comment gérer la table Web dans Selenium pilote web

Lire un tableau Web HTML

Il arrive parfois que nous ayons besoin d'accéder à des éléments (généralement des textes) qui se trouvent dans des tableaux HTML. Cependant, il est très rare qu'un concepteur Web fournisse un attribut id ou name à une certaine cellule du tableau. Nous ne pouvons donc pas utiliser les méthodes habituelles telles que « By.id() », « By.name() » ou « By.cssSelector() ». Dans ce cas, l’option la plus fiable consiste à y accéder en utilisant la méthode « By.xpath() ».

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 « // », puis suivis 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 immédiatement sous est donc on peut dire ça est « l’enfant » de . Et aussi, est le « parent » de . Tous les éléments enfants dans XPath sont placés à droite de leur élément parent, séparés par une barre oblique « / » comme le code indiqué ci-dessous.

Étape 3 – Ajouter des prédicats

Le l'élément contient deux Mots clés. On peut maintenant dire que ces deux les balises sont des « enfants » de . Par conséquent, nous pouvons dire que est le parent des deux éléments.

Une autre chose que nous pouvons conclure est que les deux les éléments sont frères et sœurs. Les frères et sœurs font référence aux éléments enfants ayant le même parent.

Pour arriver au auquel nous souhaitons accéder (celui avec le texte « quatrième cellule »), nous devons d'abord accéder au seconde et pas le premier. Si nous écrivons simplement « //table/tbody/tr », alors nous accéderons au premier étiqueter.

Alors, comment accéder au deuxième alors? La réponse à cette question est d'utiliser Prédicats.

Les prédicats sont des nombres ou des attributs HTML entourés d'une paire de crochets « [ ] » qui distinguent un élément enfant de ses frères et sœurs.. Depuis le auquel nous devons accéder est le deuxième, nous utiliserons « [2] » comme prédicat.

Si nous n'utilisons aucun prédicat, XPath accédera au premier frère. Nous pouvons donc accéder au premier en utilisant l'un de ces codes XPath.

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

Le prochain élément auquel nous devons accéder est le deuxième . En appliquant les principes que nous avons appris aux étapes 2 et 3, nous finaliserons notre code XPath pour qu'il ressemble à celui présenté ci-dessous.

Maintenant que nous disposons du bon localisateur XPath, nous pouvons déjà accéder à la cellule souhaitée et obtenir son texte interne en utilisant le code ci-dessous. Cela suppose que vous avez enregistré le code HTML ci-dessus sous le nom « newhtml.html » dans votre lecteur C.

public static void main(String[] args) {
	String baseUrl = "http://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 évoqués ci-dessus s’appliquent aux tables imbriquées. Les tables imbriquées sont des tables situées dans une autre table. Un exemple est illustré ci-dessous.

Pour accéder à la cellule avec le texte « 4-5-6 » en utilisant le « //parent/enfant » et les concepts de prédicat de la section précédente, nous devrions pouvoir trouver le code XPath ci-dessous.

Le code WebDriver ci-dessous devrait pouvoir récupérer le texte interne de la cellule à laquelle nous accédons.

public static void main(String[] args) {
	String baseUrl = "http://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 écrit profondément dans le code HTML de telle sorte que le numéro à utiliser pour le prédicat soit très difficile à déterminer, nous pouvons utiliser l'attribut unique de cet élément à la place.

Dans l'exemple ci-dessous, la cellule « New York vers Chicago » est située en profondeur Mercury Code HTML de la page d'accueil des visites.

Dans ce cas, nous pouvons utiliser l'attribut unique de la table (width=”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 to Chicago » est située dans le premier du quatrième , et donc notre XPath devrait être comme indiqué ci-dessous.

N'oubliez pas que lorsque nous insérons le code XPath Java, nous devrions utiliser le caractère d'échappement barre oblique inverse « \ » pour les guillemets doubles des deux côtés de « 270 » afin que l'argument de chaîne de By.xpath() ne soit pas terminé 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 = "http://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 le numéro ou l'attribut d'un élément est extrêmement difficile ou impossible à obtenir, le moyen le plus rapide de générer le code XPath consiste à utiliser Inspect Element.

Prenons l'exemple ci-dessous de Mercury Page d'accueil des visites.

Étape 1

Utilisez Firebug pour obtenir le code XPath.

Étape 2

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

Étape 3

Préfixez la partie restante du code avec une double barre oblique « // » et copiez-la dans votre code WebDriver.

Le code WebDriver ci-dessous pourra récupérer avec succès le texte interne de l'élément auquel nous accédons.

public static void main(String[] args) {
	String baseUrl = "http://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();
}

Résumé

• By.xpath() est couramment utilisé pour accéder aux éléments de WebTable dans Selenium.
• Si l'élément est écrit profondément dans le code HTML de telle sorte que le numéro à utiliser pour le prédicat soit très difficile à déterminer, nous pouvons utiliser l'attribut unique de cet élément à la place pour Selenium obtenir l'élément de table.
• Les attributs sont utilisés comme prédicats en les préfixant du symbole @.
• Utilisez l'élément Inspect pour accéder à WebTable dans Selenium