Escolher o seletor certo para Web Scraping: CSS ou XPath
Sabe qual é o seletor correto a utilizar na recolha de dados da Web? O Web scraping tem sido bastante popular na última década para extrair dados da Internet. Ajuda as empresas a adquirir e analisar dados para tomar melhores decisões comerciais. Graças às tecnologias automatizadas, a recolha de dados da Web nunca foi tão fácil como agora.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
No entanto, independentemente da ferramenta ou da estrutura selecionada, deve tomar uma decisão crucial para garantir que o seu scraper extrai os dados de forma educada. Trata-se de saber se deve extrair elementos Web utilizando XPath ou selectores CSS, o que aprenderá neste artigo.
Vamos mergulhar em alguns exemplos existentes.
O que é um seletor XPath?
XPath é a sigla de XML Path Language. No entanto, utiliza uma sintaxe não XML para selecionar etiquetas ou grupos de etiquetas de um documento XML ou HTML, como acontece com o web scraping. O XPath permite-lhe escrever expressões para aceder diretamente a um elemento HTML ou XML sem percorrer toda a árvore HTML.
Para compreender como se pode aceder a um elemento utilizando o XPath, vamos aprofundar o assunto com um código HTML. Presumo que já conhece algumas noções básicas de HTML.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Pode escrever o código acima num editor à sua escolha e guardá-lo como products.html. Em seguida, pode visualizá-lo num browser (de preferência, o Google Chrome, uma vez que é com ele que vamos analisar este exemplo).
Quando o browser executa este código, enuncia o HTML e cria uma representação em árvore dos elementos. É conhecida como DOM (Document Object Model) na seguinte forma:
Pode ler mais sobre o DOM na hiperligação indicada. Agora o nosso foco aqui é o XPath sobre como navegar para cada um destes elementos diretamente sem percorrer toda a árvore. Então, vamos começar com a terminologia básica do Xpath.
O que são nós?
Com o XPath, o elemento mais fundamental é um nó. Bem, os nós são simplesmente os elementos individuais que acabou de ver na árvore DOM. À medida que avançamos neste artigo, descobrirá que os nós são constituídos por elementos de etiqueta, atributos, valores de cadeias de caracteres que lhes são atribuídos e assim por diante. Existem sete em cada página XML ou HTML, e vamos analisar cada tipo de nó com atenção.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
Embora os três acima referidos sejam os mais importantes, é também vital conhecer os quatro seguintes, a título informativo.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Comentários: São a parte dos comentários de um documento HTML ou XML que o compilador ou um analisador não processa.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
Qual é a relação entre os nós?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
Como encontrar o XPath de um elemento HTML?
Há duas formas de o fazer. Primeiro, vamos demonstrá-lo ou codificar um exemplo. Como referi acima, espero que o tenha guardado no seu disco local e que esteja pronto para ser visualizado no seu browser.
Quando a página carregar, passe o rato sobre o item 1 e clique com o botão direito do rato sobre ele. Em seguida, seleccione Inspecionar a partir dos itens de menu que aparecem, como mostra a captura de ecrã abaixo:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Depois de o colar num ficheiro de texto ou noutro local, obterá:
/html/body/ul/li[1]
Este é conhecido como o caminho absoluto. Em seguida, explicarei como o derivou.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Caminho absoluto
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Embora o método acima pareça ser longo, ajudá-lo-á a compreender como construir o XPath completo. Passemos agora ao método relativo.
Trajetória relativa
//*[@id="product-list"]/li[1]
As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
A diferença entre caminhos relativos e absolutos
As diferenças significativas são que o XPath completo não é legível e é difícil de manter. A outra preocupação óbvia é que, se houver alterações em qualquer elemento a partir do elemento raiz, o XPath absoluto não será válido. Por isso, faz sentido usar o XPath relativo.
No entanto, antes de comentar mais sobre isso, vejamos primeiro as vantagens e desvantagens.
Vantagens e desvantagens do XPATH
Vantagens
Com o XPath, não tem de se preocupar se não souber o nome de um elemento porque pode utilizar a função contains para procurar correspondências prováveis. Por conseguinte, pode subir no DOM ao procurar itens para extrair.
A outra vantagem significativa das CSS é o facto de funcionarem em browsers antigos, como versões desactualizadas do Internet Explorer.
Desvantagens
Como aprendeu acima, a sua desvantagem mais significativa é ser mais fácil de quebrar quando altera os elementos no caminho. Pode ser difícil de compreender, em comparação com os selectores CSS que irá descobrir a seguir.
Além disso, ao recuperar elementos a partir do XPath, o seu desempenho é bastante mais lento do que o do CSS.
O que é um seletor CSS?
Como já sabe, CSS significa Cascading Style Sheets (folhas de estilo em cascata), utilizadas de forma proeminente para estilizar elementos HTML numa página Web. Estes estilos incluem a aplicação de cores ao tipo de letra, imagens de fundo e cores, alinhamento e posicionamento de elementos e aumento/diminuição de espaços entre parágrafos.
Para definir um estilo para um elemento HTML, é necessário especificá-lo através de um Seletor CSS. Vamos começar com um exemplo simples a partir da marcação na secção seguinte.
Como são criados os selectores CSS?
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
Aqui está o seletor CSS para o elemento acima:
- <h1>-selects by the element name <h1>
- #main-heading - #especifica o id do elemento
- .header-styles - O ponto indica o nome da classe
- [name="h1name"] - Pode especificar os atributos entre parênteses rectos.
Também é possível combiná-los:
h1.header-styles-Este seletor CSS selecciona elementos h1 com a classe header-styles.
Selectores avançados
O operador > é utilizado para selecionar filhos. Em contrapartida, o operador + selecciona o primeiro irmão e o operador ~ é utilizado para selecionar todos os irmãos. Alguns exemplos são os seguintes:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Vantagens e desvantagens da utilização de selectores CSS
Vantagens
Ao contrário do XPath, que o Beautiful Soup não suporta, os selectores CSS são suportados pelas bibliotecas de scraping mais eficazes. Além disso, ao contrário do XPath, os selectores CSS são mais fáceis de aprender e manter. Quase todos os browsers o suportam, exceto os browsers antigos abaixo da versão 8 do Internet Explorer. No entanto, as pessoas raramente utilizam esses browsers nos dias de hoje.
Desvantagens
Mesmo retirando as versões mais antigas do Internet Explorer da equação, ainda podem existir inconsistências na forma como são apresentadas em diferentes navegadores.
Uma vez que existem várias versões de CSS, estas podem criar confusão entre os programadores e os principiantes.
Outro fator vital na tecnologia Web atual é a segurança do CSS.
Quais são as diferenças entre seletores CSS e XPath?
A diferença aparente entre XPath e CSS é que XPath é bidirecional. Isto significa que é possível percorrer a árvore DOM em ambas as direcções. No entanto, só é possível percorrer do nó pai para os nós filhos com CSS, conhecido como fluxo unidirecional.
Tal como referido nas secções anteriores, o XPath é mais difícil de manter e não é um bom candidato para uma legibilidade eficaz. Por outro lado, embora o XPath possa funcionar em browsers antigos, a forma como é apresentado difere de um browser para outro.
Por conseguinte, nesse aspeto, o CSS está em vantagem.
O que deve escolher entre os dois?
O XPATH destaca-se pelo facto de as CSS só poderem passar dos pais para os filhos em áreas específicas, como a subida da árvore DOM. No que respeita à velocidade, as CSS estão em vantagem.
No entanto, a diferença de velocidade entre XPath e CSS não conta muito quando se trata de recolha de dados da Web. Há outros factores a considerar, como a latência da rede na recolha de dados da Web.
As CSS seriam a primeira escolha quando se trata de Beautiful Soup, uma vez que não suportam o XPath.
Conclusão
Não existe uma resposta exacta sobre quais os selectores a utilizar no seu projeto de recolha de dados da Web. Como descobriu neste artigo, o XPath tem vantagem em determinadas situações, enquanto o CSS se destaca noutras.
Por isso, é necessário ter em conta pontos vitais específicos, como a travessia, o suporte do browser e algumas das capacidades técnicas que discutimos. Esperamos que ponha em prática o que aprendeu e fique atento a mais artigos.