Escolhendo o seletor certo para a Web Scraping: CSS ou XPath
Você sabe qual é o seletor correto a ser usado na Web scraping? A Web scraping tem sido bastante popular na última década para extrair dados da Internet. Ela ajuda as empresas a adquirir e analisar dados para tomar melhores decisões comerciais. Graças às tecnologias automatizadas, a Web scraping 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, você deve tomar uma decisão crucial para garantir que seu scraper extraia os dados de forma educada. Essa decisão consiste em extrair elementos da Web usando XPath ou seletores CSS, o que você aprenderá neste artigo.
Vamos nos aprofundar em alguns exemplos existentes.
O que é um seletor XPath?
XPath significa XML Path Language. No entanto, ele usa sintaxe não XML para selecionar tags ou grupos de tags de um documento XML ou HTML, como na Web scraping. O XPath permite que você escreva expressões para acessar um elemento HTML ou XML diretamente sem percorrer toda a árvore HTML.
Para entender como você pode acessar um elemento usando o XPath, vamos nos aprofundar em um código HTML. Presumo que você já conheça um pouco de HTML básico.
<!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>
Você pode digitar o código acima em um editor de sua escolha e salvá-lo como products.html. Em seguida, você pode visualizá-lo em um navegador (de preferência no Google Chrome, pois vamos analisar este exemplo com ele).
Quando o navegador executa esse código, ele codifica o HTML e cria uma representação em árvore dos elementos. Ela é conhecida como DOM (Document Object Model) na seguinte forma:
Você pode ler mais sobre o DOM no link fornecido. Agora, nosso foco aqui é o XPath, ou seja, como navegar para cada um desses elementos imediatamente sem percorrer a árvore inteira. 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 você acabou de ver na árvore DOM. À medida que avançarmos neste artigo, você descobrirá ainda mais que os nós consistem em elementos de tag, atributos, valores de cadeias de caracteres atribuídos a eles e assim por diante. Há sete em cada página XML ou HTML, e vamos examinar cada tipo de nó de perto.
- 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 sejam os mais importantes, também é fundamental conhecer os quatro seguintes, apenas para fins informativos.
- 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 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 maneiras de fazer isso. Primeiro, vamos demonstrá-lo ou codificar um exemplo. Como mencionei acima, espero que você o tenha salvo em seu disco local e esteja pronto para ser visualizado no navegador.
Quando a página for carregada, passe o mouse sobre o item 1 e clique com o botão direito do mouse nele. Em seguida, selecione Inspect (Inspecionar) nos itens de menu que aparecem, conforme mostrado na captura de tela 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:
Então, depois de colá-lo em um arquivo de texto ou em algum lugar, você obteria:
/html/body/ul/li[1]
Isso é conhecido como caminho absoluto. Explicarei a seguir como você 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 longo, ele o ajudará a entender como criar o XPath completo. Agora, vamos ao método relativo.
Caminho 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.
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. Portanto, faz sentido usar o XPath relativo.
No entanto, antes de comentar mais sobre isso, vamos primeiro dar uma olhada nas vantagens e desvantagens.
Vantagens e desvantagens do XPATH
Vantagens
Com o XPath, você não precisa se preocupar se não souber o nome de um elemento, pois pode utilizar a função contains para procurar correspondências prováveis. Portanto, você pode subir no DOM ao consultar itens para scrape.
A outra vantagem significativa do CSS é que ele funciona em navegadores antigos, como versões desatualizadas do Internet Explorer.
Desvantagens
Como você aprendeu acima, sua maior desvantagem é ser mais fácil de quebrar quando você altera os elementos no caminho. Isso pode ser difícil de compreender em comparação com os seletores CSS que você verá a seguir.
Além disso, ao recuperar elementos do XPath, seu desempenho é muito mais lento do que o do CSS.
O que é um seletor CSS?
Como você já sabe, CSS significa Cascading Style Sheets (Folhas de estilo em cascata), usadas com destaque no estilo de elementos HTML em uma página da Web. Esses estilos incluem a aplicação de cores à sua fonte, 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, você precisa especificá-lo por meio de um seletor CSS. Vamos começar com um exemplo simples a partir da marcação na próxima seção.
Como os seletores CSS são criados?
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
Portanto, 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"] - Você pode especificar os atributos entre colchetes.
Você também pode combiná-los:
h1.header-styles - Esse seletor CSS seleciona elementos h1 com estilos de cabeçalho de classe.
Seletores avançados
O operador > é usado para selecionar filhos. Por outro lado, o operador + escolhe o primeiro irmão, e o operador ~ é usado para escolher 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 do uso de seletores CSS
Vantagens
Ao contrário do XPath, ao qual o Beautiful Soup não oferece suporte, os seletores CSS são compatíveis com as bibliotecas scraping mais eficazes. Além disso, ao contrário do XPath, os seletores CSS são mais fáceis de aprender e manter. Quase todos os navegadores são compatíveis, exceto os navegadores antigos abaixo da versão 8 do Internet Explorer. Entretanto, as pessoas raramente usam esses navegadores nos dias de hoje.
Desvantagens
Mesmo que você tire as versões mais antigas do Internet Explorer da equação, ainda pode haver inconsistências na forma como elas são renderizadas em diferentes navegadores.
Como existem várias versões de CSS, elas podem gerar confusão entre os desenvolvedores e os iniciantes.
Outro fator vital na tecnologia da Web atual é a segurança do CSS.
Quais são as diferenças entre os seletores CSS e o XPath?
A diferença aparente entre XPath e CSS é que o XPath é bidirecional. Isso significa que você pode percorrer as duas direções na árvore DOM. Entretanto, com o CSS, você só pode percorrer do nó pai para os nós filhos, o que é conhecido como fluxo unidirecional.
Conforme discutido nas seções anteriores, o XPath é mais difícil de manter e não é um bom candidato para a legibilidade efetiva. Por outro lado, embora o XPath possa funcionar em navegadores antigos, a forma de renderização difere de um navegador para outro.
Portanto, nesse aspecto, o CSS tem a vantagem.
O que você deve escolher entre os dois?
O XPATH se destaca pelo fato de o CSS só poder passar dos pais para os filhos em áreas específicas, como a passagem pela árvore DOM. No que diz respeito à velocidade, o CSS tem a vantagem.
Entretanto, a diferença de velocidade entre XPath e CSS não conta muito quando se trata da Web scraping. Há outros fatores a serem considerados, como a latência da rede na coleta de dados da Web.
O CSS seria sua primeira opção quando se trata de Beautiful Soup, pois ele não é compatível com o XPath.
Conclusão
Não há uma resposta precisa sobre quais seletores usar em seu projeto scraping da Web. Como você descobriu neste artigo, o XPath tem a vantagem em determinadas situações, enquanto o CSS se destaca em outras.
Portanto, você precisa levar em conta pontos vitais específicos, como travessia, suporte ao navegador e alguns dos recursos técnicos que discutimos. Esperamos que você coloque em prática o que aprendeu e fique atento a mais artigos.