Cómo manejar la tabla web en Selenium Controlador web

¿Qué es una tabla web en Selenium?

A Tabla web in Selenium es un WebElement utilizado para la representación tabular de datos o información. Los datos o información que se muestranyed puede ser estático o dinámico. Se puede acceder a la tabla web y sus elementos mediante las funciones y localizadores de WebElement en Selenium. Un ejemplo típico de una tabla web sería la visualización de especificaciones del producto.yed en una plataforma de comercio electrónico.

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.

Cómo escribir XPath para una tabla en Selenium

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

Cómo escribir XPath para una tabla en Selenium

Paso 1: configurar el elemento principal (tabla)

Los localizadores XPath en WebDriver siempre comienzan con un double barra diagonal “//” y luego seguida 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”.

Selenium Ejemplo de tabla web

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.

Selenium Ejemplo de tabla web

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 segundo 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 numbers o atributos HTML encerrados en un par de cuadrados brackets “[ ]” que distingue un elemento hijo de sus hermanos. Dado que el al que necesitamos acceder es el segundo, usaremos “[2]” como predicado.

Selenium Ejemplo de tabla web

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.

Selenium Tabla web usando 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.

Tabla web en Selenium usando XPath

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.

Tabla web en Selenium usando XPath

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

Tabla web en Selenium usando XPath

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.

Cómo acceder a tablas anidadas en Selenium

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

Cómo acceder a tablas anidadas en Selenium


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

Accediendo a tablas anidadas en Selenium

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

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

Accediendo a tablas anidadas en Selenium

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" se encuentra en lo más profundo del código HTML de la página de inicio de Mercury Tours.

Selenium Ejemplo de tabla web usando atributos como predicados

Selenium Ejemplo de tabla web usando atributos como predicados

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.

Selenium Ejemplo de tabla web con atributos como predicados

Recuerde que cuando ponemos el código XPath en Java, debemos usar el carácter de escape barra invertida “\” para el double comillas a ambos lados de “270” para que el argumento de cadena de By.xpath() no termine prematuramente.

Selenium Ejemplo de tabla web con atributos como predicados

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

Selenium Ejemplo de tabla web con atributos como predicados

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

Selenium Ejemplo de tabla web con atributos como predicados

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 la página de inicio de Mercury Tours.

Selenium Ejemplo de tabla web con atributos como predicados

Paso 1

Utilice Firebug para obtener el código XPath.

Selenium Ejemplo de tabla web con atributos como predicados

Paso 2

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

Selenium Ejemplo de tabla web con atributos como predicados

Paso 3

Anteponga la parte restante del código con double barra diagonal “//” y cópiela en su código WebDriver.

Selenium Ejemplo de tabla web con atributos

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

Selenium Ejemplo de tabla web con atributos

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

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