Cómo manejar la tabla web en Selenium

Leer una tabla web HTML

Hay ocasiones en las que necesitamos acceder a elementos (normalmente textos) que se encuentran dentro de tablas HTML. Sin embargo, es muy raro que un diseñador web proporcione un atributo de identificación o nombre a una determinada celda de la tabla. Por lo tanto, no podemos utilizar los métodos habituales como “By.id()”, “By.name()” o “By.cssSelector()”. En este caso, la opción más confiable es acceder a ellos mediante el método “By.xpath()”.

Cómo manejar la tabla web en Selenium

Considere el código HTML siguiente para manejar tablas web en Selenium.

Usaremos XPath para obtener el texto interno de la celda que contiene el texto "cuarta celda".

Paso 1: configurar el elemento principal (tabla)

Los localizadores XPath en WebDriver siempre comienzan con una barra diagonal doble “//” y luego van seguidos del elemento principal.. Dado que estamos tratando con tablas web en Selenium, el elemento padre siempre debe ser el etiqueta. La primera parte de nuestra Selenium Por lo tanto, el localizador de tablas XPath debería comenzar con “//table”.

Paso 2: agregue los elementos secundarios

El elemento inmediatamente debajo de es , por lo que podemos decir que es el "secundario" de . Y además, es el "padre" de . Todos los elementos secundarios en XPath se colocan a la derecha de su elemento principal, separados por una barra diagonal "/", como el código que se muestra a continuación.

Paso 3: agregar predicados

El elemento contiene dos etiquetas . Ahora podemos decir que estas dos etiquetas son "hijas" de . En consecuencia, podemos decir que es el padre de ambos elementos .

Otra cosa que podemos concluir es que los dos elementos son hermanos. Los hermanos se refieren a elementos secundarios que tienen el mismo padre..

Para llegar al al que deseamos acceder (el que tiene el texto “cuarta celda”), primero debemos acceder al second y no el primero. Si simplemente escribimos “//table/tbody/tr”, entonces estaremos accediendo a la primera etiqueta .

Entonces, ¿cómo accedemos al segundo ? La respuesta a esto es usar Predicados.

Los predicados son números o atributos HTML encerrados entre un par de corchetes “[ ]” que distinguen a un elemento secundario de sus hermanos.. Dado que el al que necesitamos acceder es el segundo, usaremos “[2]” como predicado.

Si no usamos ningún predicado, XPath accederá al primer hermano. Por lo tanto, podemos acceder al primer usando cualquiera de estos códigos XPath.

Paso 4: agregue los elementos secundarios sucesivos utilizando los predicados apropiados

El siguiente elemento al que debemos acceder es el segundo . Aplicando los principios que hemos aprendido en los pasos 2 y 3, finalizaremos nuestro código XPath para que sea como el que se muestra a continuación.

Ahora que tenemos el localizador XPath correcto, ya podemos acceder a la celda que queríamos y obtener su texto interno usando el siguiente código. Se supone que ha guardado el código HTML anterior como "newhtml.html" dentro de su unidad 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();
	}
}

Acceder a tablas anidadas

Los mismos principios discutidos anteriormente se aplican a las tablas anidadas. Las tablas anidadas son tablas ubicadas dentro de otra tabla.. A continuación se muestra un ejemplo.

Para acceder a la celda con el texto "4-5-6" usando los conceptos "//parent/child" y predicado de la sección anterior, deberíamos poder generar el código XPath a continuación.

El siguiente código WebDriver debería poder recuperar el texto interno de la celda a la que estamos accediendo.

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

El siguiente resultado confirma que se accedió correctamente a la tabla interna.

Usar atributos como predicados

Si el elemento está escrito profundamente en el código HTML de manera que el número a usar para el predicado es muy difícil de determinar, podemos usar el atributo único de ese elemento en su lugar.

En el siguiente ejemplo, la celda "Nueva York a Chicago" está ubicada en lo más profundo Mercury Código HTML de la página de inicio de Tours.

En este caso, podemos utilizar el atributo único de la tabla (ancho=”270″) como predicado. Los atributos se utilizan como predicados anteponiéndolos con el símbolo @. En el ejemplo anterior, la celda "Nueva York a Chicago" está ubicada en el primer del cuarto , por lo que nuestro XPath debería ser como se muestra a continuación.

Recuerda que cuando ponemos el código XPath en Java, debemos utilizar el carácter de escape barra invertida “\” para las comillas dobles en ambos lados de “270” para que el argumento de cadena de By.xpath() no finalice prematuramente.

Ahora estamos listos para acceder a esa celda usando el siguiente código.

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

Acceso directo: utilice el elemento Inspeccionar para acceder a tablas en Selenium

Si el número o atributo de un elemento es extremadamente difícil o imposible de obtener, la forma más rápida de generar el código XPath es utilizando Inspeccionar elemento.

Considere el siguiente ejemplo de Mercury Página de inicio de excursiones.

Paso 1:

Utilice Firebug para obtener el código XPath.

Paso 2:

Busque el primer elemento principal "tabla" y elimine todo lo que esté a su izquierda.

Paso 3:

Anteponga la parte restante del código con una doble barra diagonal “//” y cópielo en su código WebDriver.

El código WebDriver a continuación podrá recuperar con éxito el texto interno del elemento al que estamos accediendo.

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

Resumen

• By.xpath() se usa comúnmente para acceder a elementos de WebTable en Selenium.
• Si el elemento está escrito profundamente dentro del código HTML de modo que el número a usar para el predicado es muy difícil de determinar, podemos usar el atributo único de ese elemento en su lugar para Selenium obtener elemento de tabla.
• Los atributos se utilizan como predicados anteponiéndolos con el símbolo @.
• Utilice el elemento Inspeccionar para acceder a WebTable en Selenium