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.
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.
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 analisar alguns exemplos existentes.
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.
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.
Embora os três acima referidos sejam os mais importantes, é também vital conhecer os quatro seguintes, a título informativo.
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.
Passo 1 => li[1] //Aqui um representa o primeiro elemento li
Passo 2 => /li[1]
Passo 3 => ul/li[1]
Passo 4 => /ul/li[1]
Passo 5 => body/ul/li[1]
Passo 6 => /body/ul/li[1]
Passo 7 => html/body/ul/li[1]
Passo 8 => /html/body/ul/li[1]
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.
//*[@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.
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.
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.
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.
Como já sabe, CSS significa Cascading Style Sheets (folhas de estilo em cascata), utilizadas de forma proeminente no estilo de 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.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Aqui está o seletor CSS para o elemento acima:
Também é possível combiná-los:
h1.header-styles-Esteseletor CSS selecciona elementos h1 com a classe header-styles.
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:
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.
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.
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 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.
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.