Como lidar com a tabela da Web em Selenium

Como ler uma tabela web HTML

Muitas vezes, os testadores precisam acessar elementos, geralmente valores de texto, localizados dentro de tabelas HTML. No entanto, os web designers raramente fornecem um atributo `id` ou `name` em células individuais. Portanto, métodos como `By.id()`, `By.name()` ou `By.cssSelector()` raramente funcionam. Nesse cenário, a opção mais confiável é `By.xpath()`, pois percorre as relações pai-filho dentro da tag da tabela.

Como lidar com a tabela da Web em Selenium

Considere o código HTML abaixo para lidar com tabelas da web em Selenium.

Nós vamos usar XPath para obter o texto interno da célula que contém o texto “quarta célula”.

Passo 1 – Definir o Elemento Pai (tabela)

Os localizadores XPath no WebDriver sempre começam com uma barra dupla “//” seguida pelo elemento pai.. Como estamos lidando com tabelas da web em Selenium, o elemento pai deve ser sempre o marcação. A primeira parte do nosso Selenium O localizador de tabela XPath deve, portanto, começar com “//table”.

Passo 2 – Adicione os elementos filhos

O elemento diretamente abaixo é , então é filho de . Por outro lado, é o pai de Todos os elementos filhos em XPath são colocados à direita do elemento pai, separados por uma barra "/", como mostrado abaixo.

Passo 3 – Adicionar Predicados

O O elemento contém dois etiquetas. Estas duas tags são filhos de , então é o pai de ambos. Os dois Os elementos são irmãos. Irmãos são elementos filhos que compartilham o mesmo progenitor..

Para chegar ao que contém a “quarta célula”, primeiro precisamos acessar a segundo , não o primeiro. Escrever apenas “//table/tbody/tr” teria como alvo o primeiro. marcação.

Então, como acessamos o segundo? A resposta é usar Predicados. Os predicados são números ou atributos HTML delimitados por colchetes “[ ]” que distinguem um elemento filho de seus elementos irmãos.Como a linha que precisamos é a segunda, usamos “[2]” como predicado.

Se omitirmos o predicado, o XPath retorna o primeiro elemento irmão. Portanto, qualquer um dos códigos XPath abaixo alcançará o primeiro elemento irmão. .

Etapa 4 – Adicione os elementos filhos subsequentes usando os predicados apropriados

O próximo elemento de que precisamos é o segundo Aplicando as regras das etapas 2 e 3, chegamos ao XPath mostrado abaixo.

Agora que temos o localizador XPath correto, podemos acessar a célula e ler seu texto interno usando o código abaixo. Isso pressupõe que você tenha salvo a página HTML como “newhtml.html” na sua unidade 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();
}

Acessando tabelas aninhadas

Os mesmos princípios se aplicam a tabelas aninhadas. Tabelas aninhadas são tabelas colocadas dentro de outra tabela.. Um exemplo é mostrado abaixo.

Para acessar a célula com o texto “4-5-6” usando os conceitos de pai/filho e predicado da seção anterior, podemos compor o XPath mostrado abaixo.

O código WebDriver abaixo recupera o texto interno da célula selecionada.

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

A saída abaixo confirma que a tabela interna foi acessada com sucesso.

Usando atributos como predicados

Se o elemento estiver localizado em uma posição muito profunda no HTML, onde contar os elementos irmãos se torna trabalhoso, podemos usar o atributo único desse elemento.

No exemplo abaixo, a célula “Nova York para Chicago” está enterrada bem no interior da Mercury Página inicial de passeios.

Podemos usar o atributo único da tabela (width=”270″) como predicado. Os atributos são usados ​​como predicados prefixando-os com o símbolo @No exemplo acima, a célula “Nova York para Chicago” está localizada na primeira posição. do quarto Portanto, nosso XPath deve ser semelhante ao mostrado abaixo.

Lembre-se disso quando você inserir o XPath dentro Java, escape as aspas duplas em torno de “270” com uma barra invertida para que a string By.xpath() não seja encerrada prematuramente.

Agora estamos prontos para acessar essa célula usando o código abaixo.

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

Atalho: use o elemento Inspecionar para acessar tabelas em Selenium

Se o índice ou atributo de um elemento for difícil de obter, a maneira mais rápida de gerar o XPath é usando a opção "Inspecionar elemento" nas ferramentas de desenvolvedor dos navegadores modernos.

Considere o exemplo abaixo do Mercury Página inicial de passeios.

Etapa 1

Clique com o botão direito do mouse na célula desejada e selecione "Inspecionar" para visualizar o caminho DOM. Em seguida, copie o XPath completo.

Etapa 2

Procure o primeiro elemento pai “tabela” e exclua tudo à esquerda dele.

Etapa 3

Adicione um prefixo de barra dupla “//” ao XPath restante e copie-o para o seu código WebDriver.

O código WebDriver abaixo recupera o texto interno do elemento profundamente aninhado.

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

Como contar linhas e colunas em uma tabela web dinâmica

Tabelas web dinâmicas, como dashboards ou resultados de pesquisa, renderizam um número diferente de linhas a cada carregamento. Para lidar com isso, use findElements para buscar cada Em seguida, insira os dados em uma lista e percorra-a para ler cada célula. O trecho de código abaixo conta as linhas e lê todas as células de uma tabela cujo ID é "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());
    }
}

Envolva o localizador em um WebDriverWait com as visibilityOfAllElementsLocatedBy Quando a tabela é carregada por AJAX. Isso evita referências obsoletas a elementos em grades de renderização lenta.

Selenium 4 Localizadores Relativos para Tabelas Web

Selenium A versão 4 introduziu localizadores relativos que direcionam elementos por posição visual. Eles são úteis quando os índices XPath falham devido à reordenação das linhas. Os métodos above(), below(), toLeftOf(), toRightOf() e near() Todos aceitam um elemento Web de âncora.

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

Os localizadores relativos permanecem legíveis mesmo quando a ordem das colunas muda. Combine-os com esperas explícitas para obter os melhores resultados em páginas baseadas em dados.

Ferramentas de IA para lidar com tabelas web dinâmicas

Plataformas de teste assistidas por IA reduzem a necessidade de manutenção de localizadores em redes que sofrem alterações frequentes. Ferramentas como Testim, Mabl e Funcionalizar Utilizam visão computacional e modelos DOM para detectar mudanças de coluna e localizar elementos de forma automática. Identificam linhas pelo texto do cabeçalho e similaridade entre células, em vez de índices XPath fixos.

Para puro Selenium projetos, bibliotecas como Healenium Encapsule o WebDriver e reescreva os localizadores quebrados em tempo de execução. Combine essas ferramentas com o WebDriverWait para manter os scripts de tabelas dinâmicas estáveis, sem precisar reescrever os seletores após cada alteração na interface do usuário.

Resumo

• By.xpath() é a maneira mais confiável de acessar células de uma tabela da Web em Selenium.
• Se contar irmãos for difícil, use um atributo único como predicado, prefixado com o símbolo @.
• findElements retorna uma lista. que suporta a contagem de linhas em tabelas dinâmicas.
• Selenium Quatro localizadores relativos (acima, abaixo, próximo) reduzem a dependência do XPath posicional.
• A opção "Inspecionar elemento" nas Ferramentas de Desenvolvedor acelera a geração de XPath para células profundamente ocultas.
• ferramentas de IA como Testim, Mabl e Healenium são localizadores de autorrecuperação para mudanças de grades.

Perguntas Frequentes