Cómo manejar la tabla web en Selenium

Lectura de una tabla web HTML

En muchas ocasiones, los evaluadores necesitan acceder a elementos, generalmente valores de texto, ubicados dentro de tablas HTML. Sin embargo, los diseñadores web rara vez proporcionan un atributo `id` o `name` a las celdas individuales. Por lo tanto, métodos como `By.id()`, `By.name()` o `By.cssSelector()` rara vez funcionan. En este caso, la opción más confiable es `By.xpath()`, ya que recorre las relaciones padre-hijo dentro de la etiqueta de tabla.

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 doble barra inclinada “//” seguida del elemento padre.. 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 tabla XPath debe comenzar con “//table”.

Paso 2: agregue los elementos secundarios

El elemento que se encuentra directamente debajo es , entonces es el hijo de . En cambio, es el padre de . Todos los elementos secundarios en XPath se colocan a la derecha de su elemento principal, separados por una barra inclinada “/” como se muestra a continuación.

Paso 3: agregar predicados

El el elemento contiene dos etiquetas. Estas dos Las etiquetas son hijos de , entonces es el padre de ambos. Los dos Los elementos son hermanos. Los hermanos son elementos hijos que comparten el mismo padre..

Para llegar al que contiene “cuarta celda”, primero debemos acceder a la second , no el primero. Escribir solo “//table/tbody/tr” apuntaría al primero. etiqueta.

Entonces, ¿cómo accedemos al segundo? ¿La respuesta es usar? Predicados. Los predicados son números o atributos HTML encerrados entre corchetes “[ ]” que distinguen un elemento hijo de sus elementos hermanos.. Dado que la fila que necesitamos es la segunda, usamos “[2]” como predicado.

Si omitimos el predicado, XPath devuelve el primer hermano. Por lo tanto, cualquiera de los códigos XPath a continuación llegará al primero. .

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

El siguiente elemento que necesitamos es el segundo Aplicando las reglas de los pasos 2 y 3, llegamos a la ruta XPath que se muestra a continuación.

Ahora que tenemos el localizador XPath correcto, podemos acceder a la celda y leer su texto interno usando el código que aparece a continuación. Esto supone que has guardado la página HTML como “newhtml.html” en tu 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 se aplican a las tablas anidadas. Las tablas anidadas son tablas colocadas dentro de otra tabla.. A continuación se muestra un ejemplo.

Para acceder a la celda con el texto “4-5-6” utilizando las ideas de padre/hijo y predicado de la sección anterior, podemos componer la ruta XPath que se muestra a continuación.

El código WebDriver que se muestra a continuación recupera el texto interno de la celda seleccionada.

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 se encuentra en lo profundo del HTML, donde contar los elementos hermanos se vuelve complicado, podemos usar el atributo único de ese elemento en su lugar.

En el ejemplo siguiente, la celda “Nueva York a Chicago” está enterrada muy adentro de la Mercury Página de inicio de excursiones.

Podemos usar el atributo único de la tabla (width=”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” se encuentra en la primera del cuarto , por lo que nuestra ruta XPath debería verse como la que se muestra a continuación.

Recuerda que cuando coloques el XPath dentro Java, escapa las comillas dobles alrededor de “270” con una barra invertida para que la cadena By.xpath() no se termine 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 resulta difícil obtener el índice o atributo de un elemento, la forma más rápida de generar la ruta XPath es utilizando la función Inspeccionar elemento de las herramientas para desarrolladores de los navegadores modernos.

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

Paso 1

Haz clic con el botón derecho en la celda de destino y selecciona Inspeccionar para ver la ruta DOM; a continuación, copia la ruta XPath completa.

Paso 2

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

Paso 3

Anteponga al resto de la ruta XPath una doble barra inclinada “//” y cópiela en su código WebDriver.

El código WebDriver que se muestra a continuación recupera el texto interno del elemento anidado profundamente.

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

Cómo contar filas y columnas en una tabla web dinámica

Las tablas web dinámicas, como los paneles de control o los resultados de búsqueda, muestran un número diferente de filas en cada carga. Para manejarlas, utilice findElements para traer cada en una lista, luego itera para leer cada celda. El fragmento a continuación cuenta las filas y lee cada celda en una tabla cuyo ID es "clientes".

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Envuelva el localizador en un WebDriverWait con visibilityOfAllElementsLocatedBy cuando la tabla se carga mediante AJAX. Esto evita referencias a elementos obsoletos en cuadrículas de renderizado lento.

Selenium 4 Localizadores relativos para tablas web

Selenium 4 introdujo localizadores relativos que apuntan a elementos por posición visual. Son útiles cuando los índices XPath se rompen porque las filas se reordenan. Los métodos above(), below(), toLeftOf(), toRightOf(), y near() Todos aceptan un elemento web de anclaje.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Los localizadores relativos se mantienen legibles cuando cambia el orden de las columnas. Combínelos con esperas explícitas para obtener los mejores resultados en páginas basadas en datos.

Herramientas de IA para el manejo de tablas web dinámicas

Las plataformas de prueba asistidas por IA reducen el mantenimiento de los localizadores en cuadrículas que cambian con frecuencia. Herramientas como Testim, Mabel, y Funcionalizar Utilizan visión artificial y modelos DOM para detectar desplazamientos de columnas y localizadores autorreparables. Identifican las filas mediante el texto del encabezado y la similitud de las celdas, en lugar de índices XPath fijos.

Por puro Selenium proyectos, bibliotecas como Healenium Envuelve el WebDriver y reescribe los localizadores defectuosos en tiempo de ejecución. Combina estas herramientas con WebDriverWait para mantener estables los scripts de tablas dinámicas sin tener que reescribir los selectores después de cada cambio en la interfaz de usuario.

Resumen

• By.xpath() es la forma más confiable de acceder a las celdas de una tabla web en Selenium.
• Si resulta difícil contar los hermanos, utilice un atributo único como predicado, precedido por el símbolo @.
• findElements devuelve una lista. que admite el conteo de filas en tablas dinámicas.
• Selenium Cuatro localizadores relativos (arriba, abajo, cerca) reducen la dependencia de la ruta XPath posicional.
• La función Inspeccionar elemento en DevTools acelera la generación de XPath para celdas profundamente enterradas.
• Herramientas de IA como Testim, Mabl y Healenium son localizadores de autorreparación para cuadrículas cambiantes.

Preguntas Frecuentes