Como configurar seletores CSS para extrair conteúdo no Telematic.Pro

Introdução

Ao configurar fontes no Telematic.pro, é fundamental configurar corretamente os seletores CSS. Eles permitem:

Extrair links para artigos da página inicial do site.
Encontrar e extrair o conteúdo principal de cada artigo.
Excluir elementos desnecessários (por exemplo, anúncios, rodapés e menus laterais).

Para extrair conteúdo com eficiência, é importante saber encontrar os seletores corretos usando as DevTools do navegador. Neste artigo, veremos como fazer isso.

Como usar as DevTools para encontrar seletores

1. Abrir as DevTools

No Google Chrome ou Firefox, pressione F12 ou Ctrl + Shift + I (no Mac: Cmd + Option + I) para abrir as Ferramentas do desenvolvedor (DevTools).

1741617980612_devtools-collection-product-hover-dd23c141bea5f9739410eaa06e83ee80.jpg

2. Identificar o seletor dos links

1741617980537_select-an-element-63e42331a0df1985c597ffc8ead02a0f.jpg
1741617980612_selected-element-652798a29828d5b1a4d893c2de7a0e75.jpg

Suponha que queremos extrair links para artigos da página inicial do blog "https://example.com/news".

Abra as DevTools e selecione a aba Elements.
Passe o cursor sobre o título de um artigo e clique com o botão direito em Inspect (Inspecionar elemento).
No código da página, encontre a tag <a> mais próxima que contém o link para o artigo.
Veja quais são as classes, os IDs ou outros atributos dela.
Para copiar um seletor pronto, clique com o botão direito no elemento → Copy → Copy selector.

Exemplo de código HTML:

<article class="news-item">
    <a href="/news/article-123" class="news-link">Título do artigo</a>
</article>

Portanto, o seletor CSS dos links será:

.news-item .news-link

No Telematic.pro, informe esse seletor no campo Seletor CSS dos links.

3. Identificar o seletor do conteúdo

1741617980612_devtools-collection-product-hover-dd23c141bea5f9739410eaa06e83ee80-2.jpg

Depois de obter a lista de links, o sistema acessa cada artigo e extrai o conteúdo. Precisamos indicar onde ele está.

Abra as DevTools na página do artigo.
Encontre o contêiner principal com o texto (geralmente uma <div>, <article> ou <section>).
Verifique as classes ou o ID dele.
Selecione o contêiner desejado e clique em botão direito → Copy → Copy selector para obter rapidamente o seletor CSS.

Exemplo de código HTML:

<article class="article-content">
    <h1>Título do artigo</h1>
    <p>Texto do artigo...</p>
</article>

Seletor CSS do conteúdo:

.article-content

Informe-o no campo Seletor CSS do conteúdo no Telematic.pro.

4. Excluir elementos desnecessários

1741617980612_devtools-collection-product-name-49124d4c5af086ac2577f349e1ffd989.jpg

Às vezes, elementos desnecessários acabam incluídos no artigo: blocos de anúncios, botões de redes sociais, links para outros conteúdos.

Use as DevTools para encontrar o código HTML dos elementos desnecessários.
Identifique as classes ou os IDs deles.
Selecione o elemento e clique em botão direito → Copy → Copy selector para obter o seletor CSS.
Verifique o seletor nas DevTools: abra o console (aba Console) e digite:
```
document.querySelectorAll('seletor')
```
Se vários elementos forem encontrados, talvez seja necessário refinar o seletor.

Exemplo de código HTML com elementos indesejados:

<article class="article-content">
    <h1>Título do artigo</h1>
    <p>Texto do artigo...</p>
    <div class="related-posts">Outros artigos</div>
    <div class="ad-banner">Anúncio</div>
</article>

Seletores CSS para excluir:

.related-posts, .ad-banner

Adicione-os ao campo Seletores CSS de exclusão no Telematic.pro.

Exemplo completo de configuração no Telematic.pro

Suponha que estamos configurando uma fonte para o blog com o URL https://example.com/news. As configurações no Telematic.pro serão:

Seletor CSS dos links: .news-item .news-link
Seletor CSS do conteúdo: .article-content
Seletores CSS de exclusão: .related-posts, .ad-banner

Conclusão

A configuração dos seletores CSS permite extrair os dados desejados com precisão e excluir elementos desnecessários. Use as DevTools para encontrar os seletores corretos, copie-os pelo menu de contexto e teste-os no console antes de adicioná-los ao Telematic.pro.

Como configurar seletores CSS para extrair conteúdo no Telematic.Pro | Blog | Telematic.Pro