Cómo manejar tablas web dinámicas en Selenium

Por: Krishna rungta Krishna rungta
Hours Actualizado

Tabla web en Selenium

Hay dos tipos de tablas HTML publicadas en la web:

  1. tablas estáticas: Los datos son estáticos, es decir, el número de filas y columnas es fijo.
  2. Tablas dinámicas: Los datos son dinámicos, es decir, el número de filas y columnas NO es fijo.

Cómo manejar la tabla dinámica en Selenium

A continuación se muestra un ejemplo de una tabla web dinámica en Selenium en venta. Según los filtros de fecha de entrada, se modificará el número de filas. Por tanto, es de naturaleza dinámica.

Manejar la tabla dinámica en Selenium

Manejar tablas estáticas es fácil, pero manejar tablas dinámicas en Selenium Es un poco difícil ya que las filas y columnas no son constantes.

Uso de X-Path para localizar elementos de tablas web

Antes de ubicar el elemento web, primero comprendamos:

¿Qué es un elemento web?

Los elementos web no son más que elementos HTML como cuadros de texto, botones de opción desplegables, botones de envío, etc. Estos elementos HTML están escritos con comienzo etiqueta y termina con una final </head>.

Por ejemplo,

Mi primer documento HTML.

Pasos para obtener la ruta X del elemento web que queremos localizar.

Paso 1) En Chrome, vaya a https://demo.guru99.com/test/web-table-element.php

Uso de X-Path para localizar elementos de tablas web

Paso 2) Haga clic con el botón derecho en el elemento web cuya ruta x se desea obtener. En nuestro caso, haga clic con el botón derecho en “Empresa” y seleccione la opción Inspeccionar. Se mostrará la siguiente pantalla:

Uso de X-Path para localizar elementos de tablas web

Paso 3) Haga clic derecho en el elemento web resaltado> Seleccione Copiar -> Copiar opción x-path.

Uso de X-Path para localizar elementos de tablas web

Paso 4) Utilice la ruta X copiada “//*[@id=”leftcontainer”]/table/thead/tr/th [1]” en Selenium WebDriver para localizar el elemento.

Ejemplo: obtener el número de filas y columnas de Dynamic WebTable

Mientras que el manejo dinámico de tablas web en Selenium, no podemos predecir su número de filas y columnas.

Usando Selenium controlador web, podemos encontrar

  • Número de filas y columnas de la tabla web en Selenium
  • Datos de la fila X o de la columna Y.

A continuación se muestra el programa para obtener el número total de filas y columnas para manejar la tabla web en Selenium:

Obtener número de filas y columnas

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

Explicación del código:

  • Aquí primero declaramos el objeto del controlador web "wd" y lo inicializamos en el controlador Chrome.
  • Usamos List para calcular el número total de columnas en "col".
  • Los comandos findElements devuelven una lista de TODOS los elementos que coinciden con el localizador especificado.
  • usando findElements y X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th obtenemos todas las columnas
  • Del mismo modo, repetimos el proceso para las filas.

Salida:

Obtener número de filas y columnas

ARTÍCULOS RELACIONADOS

Ejemplo: recuperar el valor de celda de una fila y columna particular de la tabla dinámica

Supongamos que necesitamos 3rd fila de la tabla y los datos de su segunda celda. Vea la tabla a continuación.

Obtener el valor de celda de una fila y columna en particular

En la tabla anterior, los datos se actualizan periódicamente después de un período de tiempo. Los datos que intente recuperar serán diferentes a los de la captura de pantalla anterior. Sin embargo, el código sigue siendo el mismo. Aquí hay un programa de muestra para obtener los 3.rd fila y 2nd datos de la columna.

Obtener el valor de celda de una fila y columna en particular

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

Explicación del código:

  • La tabla se ubica utilizando la propiedad del localizador "tagname".
  • Usando XPath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]” encuentra el 3rd fila y obtiene su texto usando la función getText ()
  • Usando XPath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]/td[2]” encuentre la segunda celda en 2rd fila y obtiene su texto usando la función getText ()

Salida:

Obtener el valor de celda de una fila y columna particular de la tabla dinámica

Ejemplo: obtener el máximo de todos los valores en una columna de tabla dinámica

En este ejemplo, obtendremos el máximo de todos los valores en una columna en particular.

Consulte la siguiente tabla:

Obtenga el máximo de todos los valores en una columna de tabla dinámica

Aqui esta el codigo

Obtenga el máximo de todos los valores en una columna de tabla dinámica

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>

Explicación del código:

  • Usando el controlador Chrome ubicamos la tabla web y obtenemos el número total de filas usando XPath “.//*[@id=’leftcontainer’]/table/tbody/tr/td[1]”
  • Usando el bucle for, iteramos a través del número total de filas y recuperamos los valores uno por uno. Para obtener la siguiente fila usamos (i+1) en XPath
  • Comparamos el valor anterior con el valor nuevo y el valor máximo se imprime al final del bucle for.

Salida

Obtenga el máximo de todos los valores en una columna de tabla dinámica

Ejemplo: Obtener todos los valores de una Tabla Dinámica

Considere la siguiente tabla: https://demo.guru99.com/test/table.html

Obtener todos los valores de una Tabla Dinámica

El número de columnas para cada fila es diferente.

Aquí las filas número 1, 2 y 4 tienen 3 celdas, la fila número 3 tiene 2 celdas y la fila número 5 tiene 1 celda.

Necesitamos obtener valores de todas las celdas.

Aquí está el código:

Obtenga todos los valores de una tabla dinámica

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

Explicación del código:

  • rows_count da el número total de filas
  • para cada fila obtenemos el número total de columnas usando rows_table.get(row).findElements(By.tagName("td"));
  • Repetimos cada columna y cada fila y recuperamos valores.

Salida:

Obtenga todos los valores de una tabla dinámica

Resumen

  • By.xpath() se usa comúnmente para acceder a los elementos de la tabla.
  • Tablas web estáticas en Selenium son consistentes por naturaleza. es decir, tienen un número fijo de filas y datos de celda.
  • Las tablas web dinámicas son inconsistentes, es decir, no tienen un número fijo de filas ni datos de celdas.
  • Usando el controlador web Selenium, podemos manejar tablas web dinámicas fácilmente.
  • Selenium Webdriver nos permite acceder a tablas web dinámicas por su ruta XComprender cómo manejar tablas web en Selenium es crucial para realizar pruebas de automatización efectivas.