Como lidar com a tabela da Web em Selenium webdriver

O que é uma tabela da Web Selenium?

A Tabela Web in Selenium é um WebElement usado para a representação tabular de dados ou informações. Os dados ou informações exibidos podem ser estáticos ou dinâmicos. A tabela da Web e seus elementos podem ser acessados usando funções e localizadores do WebElement em Selenium. Um exemplo típico de uma tabela da web seriam as especificações de produtos exibidas em uma plataforma de comércio eletrônico.

Lendo uma tabela da Web HTML

Há momentos em que precisamos acessar elementos (geralmente textos) que estão dentro de tabelas HTML. No entanto, é muito raro um web designer fornecer um atributo id ou name para uma determinada célula da tabela. Portanto, não podemos usar os métodos usuais como “By.id()”, “By.name()” ou “By.cssSelector()”. Neste caso, a opção mais confiável é acessá-los usando o método “By.xpath()”.

Como lidar com a tabela da Web em Selenium

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

Como escrever XPath para tabela em Selenium

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

Como escrever XPath para tabela em Selenium

Passo 1 – Definir o Elemento Pai (tabela)

Os localizadores XPath no WebDriver sempre começam com uma barra dupla “//” e 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 imediatamente abaixo é então podemos dizer que é o “filho” de . E também, é o “pai” de . Todos os elementos filhos em XPath são colocados à direita de seu elemento pai, separados por uma barra “/” como o código mostrado abaixo.

Selenium Exemplo de tabela da web

Passo 3 – Adicionar Predicados

O elemento contém dois Tag. Podemos agora dizer que estes dois tags são “filhos” de . Consequentemente, podemos dizer que é pai de ambos elementos.

Outra coisa que podemos concluir é que os dois elementos são irmãos. Irmãos referem-se a elementos filhos que têm o mesmo pai.

Para chegar ao desejamos acessar (aquele com o texto “quarta célula”), devemos primeiro acessar o segundo e não o primeiro. Se simplesmente escrevermos “//table/tbody/tr”, estaremos acessando o primeiro marcação.

Então, como acessamos o segundo então? A resposta para isso é usar Predicados.

Predicados são números ou atributos HTML entre colchetes “[]” que distinguem um elemento filho de seus irmãos. Desde o que precisamos acessar é o segundo, usaremos “[2]” como predicado.

Selenium Exemplo de tabela da web

Se não usarmos nenhum predicado, o XPath acessará o primeiro irmão. Portanto, podemos acessar o primeiro usando qualquer um desses códigos XPath.

Selenium Tabela Web usando XPath

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

O próximo elemento que precisamos acessar é o segundo . Aplicando os princípios que aprendemos nas etapas 2 e 3, finalizaremos nosso código XPath para ficar como o mostrado abaixo.

Agora que temos o localizador XPath correto, já podemos acessar a célula que desejamos e obter seu texto interno utilizando o código abaixo. Presume-se que você salvou o código HTML acima como “newhtml.html” em sua unidade C.

Tabela da Web em Selenium usando XPath

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

Tabela da Web em Selenium usando XPath

Acessando tabelas aninhadas

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

Como acessar tabelas aninhadas em Selenium

Para acessar a célula com o texto “4-5-6” usando os conceitos “//pai/filho” e predicado da seção anterior, devemos ser capazes de criar o código XPath abaixo.

Como acessar tabelas aninhadas em Selenium

O código do WebDriver abaixo deve ser capaz de recuperar o texto interno da célula que estamos acessando.

Acessando tabelas aninhadas em Selenium

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.

Acessando tabelas aninhadas em Selenium

Usando atributos como predicados

Se o elemento estiver escrito profundamente no código HTML, de modo que o número a ser usado para o predicado seja muito difícil de determinar, podemos usar o atributo exclusivo desse elemento.

No exemplo abaixo, a célula “New York to Chicago” está localizada profundamente Mercury Código HTML da página inicial do Tour.

Selenium Exemplo de tabela da Web usando atributos como predicados

Neste caso, podemos usar o atributo único da tabela (largura=”270″) como predicado. Os atributos são usados como predicados prefixando-os com o símbolo @. No exemplo acima, a célula “New York to Chicago” está localizada no primeiro do quarto e, portanto, nosso XPath deve ser conforme mostrado abaixo.

Lembre-se que quando colocamos o código XPath em Java, devemos usar o caractere de escape barra invertida “\” para as aspas duplas em ambos os lados de “270” para que o argumento de string de By.xpath() não seja encerrado prematuramente.