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.
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.
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.
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 escrever 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 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 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 strings 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.
Embora os três acima sejam os mais importantes, também é fundamental conhecer os quatro seguintes, apenas para fins informativos.
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.
Etapa 1 => li[1] //Aqui, um representa o primeiro elemento li
Etapa 2 => /li[1]
Etapa 3 => ul/li[1]
Etapa 4 => /ul/li[1]
Etapa 5 => body/ul/li[1]
Etapa 6 => /body/ul/li[1]
Etapa 7 => html/body/ul/li[1]
Etapa 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 longo, ele o ajudará a entender como criar o XPath completo. Agora, vamos 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. Portanto, faz sentido usar o XPath relativo.
No entanto, antes de comentar mais sobre isso, vamos primeiro dar uma olhada nas vantagens e desvantagens.
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.
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.
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.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Portanto, aqui está o seletor CSS para o elemento acima:
Você também pode combiná-los:
h1.header-styles - Esseseletor CSS seleciona elementos h1 com estilos de cabeçalho de classe.
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:
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.
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.
A diferença aparente entre XPath e CSS é que 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 operar em navegadores antigos, a forma de renderização difere de um navegador para outro.
Portanto, nesse aspecto, o CSS tem a vantagem.
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.
No entanto, 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.
Não há uma resposta exata 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 consideração 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.