Seletores XPath vs. CSS

XPath vs CSS

Como entusiasta de web scraping, provavelmente já se deparou com os termos XPath e seletores CSS. Estas são duas formas populares de navegar e extrair elementos de um documento HTML ou XML, mas o que são exatamente e em que diferem? Neste artigo, vou apresentar-lhe uma comparação lado a lado entre o XPath e os seletores CSS, discutindo as suas funcionalidades e casos de utilização.

Começaremos com uma breve visão geral dos seletores XPath e CSS e usaremos exemplos para mostrar como podem ser utilizados para navegar e extrair elementos de um documento HTML. Exploraremos as diferenças na sintaxe e nas capacidades, analisaremos as várias funções integradas que o XPath oferece e veremos como obter os mesmos resultados utilizando CSS e JavaScript. Também discutiremos as vantagens e desvantagens de cada método e como decidir qual usar no seu projeto.

Por isso, pega num caderno, afia o lápis e prepara-te para mergulhar no mundo dos seletores XPath e CSS!

Visão geral dos seletores

XPath, abreviatura de XML Path Language, é uma linguagem de consulta utilizada para navegar num documento XML. Foi introduzida pela primeira vez em 1999 como uma forma de fornecer um método padrão para aceder a elementos dentro de um documento XML. A linguagem baseia-se no conceito de «caminho», que é utilizado para selecionar elementos específicos com base na sua posição dentro do documento.

Uma das principais características do XPath é a utilização da notação de caminho. Esta notação permite selecionar elementos com base na sua localização na árvore do documento. Por exemplo, num documento HTML, o caminho «html/body/p» selecionaria todos os elementos p que são filhos diretos do elemento body, que por sua vez é um filho direto do elemento html.

A sintaxe do XPath é bastante simples:

//tagname[@attribute='value']

Onde «tagname» é o tipo de elemento HTML que procura (por exemplo, div, a, p), «attribute» é uma propriedade do elemento HTML pretendido pela qual o nosso localizador realiza a pesquisa (por exemplo, class) e «value» é o valor específico que pretende encontrar

Os seletores CSS, abreviatura de Cascading Style Sheets, são utilizados para selecionar elementos com base nas suas propriedades, tais como class, id e atributos. São mais fáceis de ler e compreender do que o XPath, mas têm uma capacidade limitada de navegar pelo documento. Os seletores CSS são utilizados principalmente para estilização e layout, mas também podem ser utilizados para extrair informações de uma página web:

<html> <body> <p class="highlight">Hello, world!</p> </body> </html>

Para selecionar o texto «Hello, world!» utilizando seletores CSS, teremos de utilizar Javascript:

let p_tag = document.querySelector(“p.highlight”)

let p_text = p_tag.innerText

O XPath, por outro lado, foi especificamente concebido para fornecer uma linguagem de consulta para documentos XML e inclui uma vasta gama de funções integradas. Estas funções podem ser utilizadas para realizar cálculos e extrair informações específicas dos elementos. Por exemplo, com a função text() do XPath, pode selecionar diretamente o valor do texto de um elemento:

<html> <body> <p>Hello, world!</p> </body> </html>

Para selecionar o texto "Hello, world!" utilizando a função text() no XPath, a expressão seria:

/html/body/p/text()

Recursos adicionais

Se pretende aprofundar-se no mundo dos seletores XPath e CSS, temos alguns artigos que podem ajudar. Este primeiro artigo aborda os conceitos básicos dos seletores XPath, incluindo a sintaxe, as funções e como navegar na árvore DOM. Este segundo artigo aprofunda os conceitos básicos dos seletores CSS, incluindo os diferentes tipos de seletores.

Configurar um exemplo

Para ilustrar claramente as principais diferenças entre os seletores XPath e CSS, vamos analisar uma estrutura HTML simulada:

<!doctype html>

<html>

    <head>

        <title>Top News</title>

        <meta charset="utf-8" />

    </head>

    <body>

        <h1>Top News Stories</h1>

        <div class="container">

            <div class="news-story">

                <h2> <a href="https://edition.cnn.com/2022/12/28/weather/buffalo-winter-storm-new-york-blizzard-wednesday/index.html">Winter Storm</a> </h2>

                <p>Winter storm death toll rises to 37 in Buffalo as criticism arises over handling of storm and cleanup</p>

            </div>

            <div class="news-story">

                <h2> <a href="https://www.nbcnews.com/politics/politics-news/spacex-leader-reassured-nasa-chief-elson-musk-rcna61189">SpaceX</a> </h2>

                <p>NASA chief: SpaceX leader says Elon Musk’s Twitter drama is ‘nothing to worry about’.</p>

            </div>

        </div>

    </body>

</html>

Testar os seletores nas Ferramentas do Desenvolvedor

Testar os seletores XPath e CSS nas ferramentas de programador é uma forma rápida e fácil de verificar se os seus seletores estão a funcionar corretamente. O processo é semelhante na maioria dos navegadores modernos, mas para efeitos deste exemplo, iremos utilizar o Google Chrome.

Para começar, abra a página web na qual pretende testar os seus seletores no Google Chrome. Em seguida, clique com o botão direito do rato num elemento que pretenda selecionar e escolha «Inspecionar» no menu de contexto. Isto irá abrir a janela das ferramentas de programador:

Na janela das ferramentas de desenvolvimento, verá o código-fonte HTML da página web no lado esquerdo e a página web renderizada correspondente no lado direito.

Para encontrar o XPath completo e o seletor CSS de um elemento, clique com o botão direito do rato no elemento no HTML e selecione «Copiar > Copiar XPath completo» ou «Copiar > Copiar seletor». Isto irá copiar o caminho completo para o elemento, incluindo todos os elementos pai, para a sua área de transferência. Pode então colar este caminho no seu código ou na barra de pesquisa das ferramentas de desenvolvimento (ctrl+f) para aceder ao elemento.

Por exemplo, se quisesse selecionar todas as tags h2 do HTML de exemplo fornecido acima, teria de digitar «//h2» na barra de pesquisa e premir Enter.

Principais conclusões

Uma das principais diferenças entre o XPath e o CSS é que o XPath pode selecionar elementos com base na sua posição no documento. Os seletores CSS limitam-se a selecionar elementos com base nas suas propriedades.

Por exemplo, no XPath, podemos selecionar o segundo elemento div com a classe news-story utilizando a expressão //div[@class='news-story'][2]. Com os seletores CSS, só podemos selecioná-lo utilizando div.news-story:nth-child(2).

div.news-story:nth-child(2) selecionará o segundo elemento div entre todos os elementos div que tenham a classe “news-story” e sejam filhos do mesmo elemento contêiner.

//div[@class='news-story'][2] permite-lhe selecionar o elemento com base na sua posição em todo o documento. O elemento não tem de ser filho de um elemento contêiner específico:

<html>

  <body>

    <div class="container">

      <div class="news-story">

        <h2>News Story 1</h2>

      </div>

    </div>

    <div class="container">

      <div class="news-story">

        <h2>News Story 2</h2>

      </div>

    </div>

  </body>

</html>

Neste exemplo específico, div[@class='news-story'][2] seleciona a segunda notícia.

div.news-story:nth-child(2) não seleciona nada, uma vez que cada elemento contêiner tem apenas um filho direto.

Maior flexibilidade

O XPath permite maior flexibilidade na navegação pela árvore DOM. Inclui a capacidade de se deslocar para cima e para baixo na árvore. Os seletores CSS permitem apenas a navegação para baixo. Isto torna o XPath mais poderoso e versátil, mas também mais complexo.

Com o XPath, pode utilizar eixos como os eixos pai e antepassado para aceder ao pai ou antepassado de um elemento, o que não é possível com os seletores CSS.

Por exemplo, a expressão XPath //div[@class='news-story'][1]/parent::*//h2 seleciona o primeiro elemento div com a classe "news-story". Em seguida, navega até ao seu elemento pai utilizando o operador parent::* e, depois, seleciona o elemento h2 dentro desse elemento pai.

Em alternativa, pode utilizar parênteses retos para selecionar o elemento pai do primeiro elemento div com a classe "news-story" e, em seguida, selecionar o elemento h2 dentro desse elemento pai utilizando //div[@class='news-story'][1]/..//h2.

Funções integradas

Outra diferença importante entre o XPath e os seletores CSS é que o XPath possui uma vasta gama de funções integradas, tais como count(), sum(), string(), substring() e contains(). Estas funções podem ser utilizadas para manipular elementos e extrair dados.

A função count() pode ser utilizada para contar o número de elementos que correspondem a determinados critérios. Por exemplo, para contar o número de elementos div com a classe news-story, podemos utilizar a expressão XPath count(//div[@class='news-story']).

A contraparte em CSS e JavaScript seria:

document.querySelectorAll('div.news-story').length

A função sum() pode ser utilizada para calcular a soma de um determinado valor para um conjunto de elementos que correspondam a determinados critérios. Por exemplo, para calcular o número total de caracteres no conteúdo de texto de todos os elementos p, podemos utilizar a expressão XPath sum(//p/text()/string-length()).

As contrapartes em CSS e JavaScript seriam:

var sum = 0;

var elements = document.querySelectorAll('p');

elements.forEach(function(element) {

  sum += element.innerText.length;

});

console.log(sum);

substring() pode ser usado para extrair uma subcadeia de caracteres de uma cadeia de caracteres. Por exemplo, para extrair o segundo ao quinto caractere do conteúdo de texto de um determinado elemento, podemos usar a expressão XPath substring(//p/text(), 2, 5).

As contrapartes em CSS e JavaScript:

document.querySelector('p').innerText.substring(2, 5)

contains() pode ser usado para verificar se uma string contém uma determinada sub-string. Por exemplo, para verificar se o conteúdo de texto de um determinado elemento p contém a palavra «Winter», podemos usar a expressão XPath //p[contains(text(),"Winter")]

Vantagens dos seletores CSS

Os seletores CSS têm várias vantagens em relação ao XPath que os tornam uma excelente escolha para determinados projetos. Uma das principais vantagens dos seletores CSS é a sua simplicidade e legibilidade. Ao contrário do XPath, que pode ser complexo e difícil de ler, os seletores CSS são fáceis de compreender e utilizar.

Outra vantagem dos seletores CSS é o seu desempenho. Como os seletores CSS apenas navegam para baixo na árvore DOM, são geralmente mais rápidos do que o XPath, que pode navegar para cima e para baixo na árvore.

Por fim, os seletores CSS também são mais amplamente utilizados no desenvolvimento web. Isto significa que os programadores web estão mais provavelmente familiarizados com eles e podem estar mais dispostos a ajudá-lo nos seus projetos.

Conclusão

Em resumo, o XPath e os seletores CSS são ambos ferramentas poderosas que permitem navegar e extrair elementos de um documento HTML. O XPath é poderoso e flexível, mas pode ser difícil de ler, enquanto os seletores CSS são mais fáceis de ler, mas têm uma capacidade limitada de navegar pelo documento.

Ao escolher entre o XPath e os seletores CSS, considere a estrutura do documento e as informações que pretende extrair. Se pretende extrair dados com base na posição dos elementos, o XPath é a melhor escolha. No entanto, se pretende extrair dados com base em propriedades como classe ou id, os seletores CSS são a melhor opção.

Se estiver interessado em saber mais sobre como o web scraping pode ajudar a sua empresa, convido-o a contactar-nos na WebScrapingAPI. Teremos todo o prazer em responder a todas as suas perguntas!