Modulo 023 – Integração Python – Automação Web (Parte 1)

– Integração Python – Automação Web – Instalação e Configurações Importantes  do Selenium

Neste módulo, vamos aprender uma das ferramentas mais interessantes para automatizar processos que envolvam sites da internet.
Existem algumas bibliotecas que desempenham a mesma função ou similar, mas o SELENIUM (doc) é uma das bibliotecas mais conhecidas e utilizadas.
E em alguns casos, você verá o termo web scraping essencialmente o que significa e o que faremos com o Selenium é “ler” uma pagina Web e conseguir extrair informações, navegar entre as páginas, etc.
Assim como a maioria das bibliotecas que vimos até agora, vamos iniciar importando essa biblioteca. Como este não é um pacote padrão do Jupyter, será necessário instalá-lo usando no prompt do anaconda:
pip install --upgrade selenium

Esta forma de instalação garante que se você já tiver alguma versão anterior do selenium, ela será atualizada. Isto é importante porque o selenium passou por uma atualização significativa e houve alterações em alguns comandos.

 A T E N Ç Ã O ! 
Para fazer scraping e usar o Selenium, use o Google Chrome! Apesar de o Selenium funcionar também em outros navegadores, é fortemente recomendado que você use o Chrome. Ele é o melhor navegador em termos de compatibilidade e é otimizado para diferentes sites da internet. E muitos problemas que acontecem com outros navegadores ao fazer scraping, não acontecem no Chrome.

Se você não tiver o Chrome instalado, você pode fazer o download neste link: https://www.google.com/chrome/
Com o Chrome já instalado, precisamos verificar a versão dele clicando nos 3 pontinhos no canto superior, depois em 
Ajuda > Sobre o Google Chrome ou acessando no Chrome o link: chrome://settings/help
Versão do Chrome: Os dígitos antes do ponto (.) são os que mais importam, nesse caso 101

O Selenium para funcionar, precisa também do webdriver que no Chrome se chama chromedriver. O webdriver é o que vai permitir o Selenium comandar o navegador.
Para fazer o download do chromedriver acesse este link: https://chromedriver.chromium.org/downloads

1. Baixe a versão do ChromeDriver compatível com o seu navegador.
2. Selecione a opção que está de acordo com o seu sistema operacional.
3. Extraia o arquivo chromedriver.exe existente dentro do arquivo compactado.
4. Cole o arquivo Chromedriver.exe na mesma pasta do executável do Python (python.exe).

→ Geralmente o arquivo python.exe está na pasta Usuários>nome do seu usuário>anaconda3

Esse processo todo de instalação do Selenium e baixar o ChromeDriver deverá ser feito 1 única vez, a não ser que o Google Chrome atualize. Se o Google Chrome atualizar, aparecerá uma mensagem de erro quando você for rodar os seus códigos, e então você precisará baixar o ChromeDriver novamente.
Pronto! A configuração está feita e agora você pode seguir todas as aulas deste módulo.
Para garantir que a configuração está correta, devemos rodar o seguinte código:

 from selenium import webdriver 
              
 driver = webdriver.Chrome() 

→ Cria um navegador controlado pelo Python.
→ Após rodar o código acima, uma nova janela controlada pelo Selenium deverá ser aberta.

Caso não tenha funcionado o código do slide anterior, é provável que o Python tenha te apresentado algum erro. Vamos falar agora dos principais erros que você pode encontrar até aqui.
FileNotFoundError
Nesse caso, o erro acontece porque o arquivo do ChromeDriver não está no local correto ou você não extraiu o ChromeDriver da pasta ZIP. Se você colocou o arquivo no local errado, você pode passar o caminho do ChromeDriver através do código, como na imagem abaixo.

 from selenium import webdriver 
 from selenium.webdriver.chrome.service import Service 
                
 servico = service(r'C:Users\Downloads\chromedriver.exe'
 # Lembre-se que se você usa Linux ou Mac o arquivo do chromedriver não possui .exe no final. 
 driver = webdriver.Chrome(service=servico) 

Esse código já deve resolver o erro. Porém se o Selenium não estiver na versão mais atualizada, ele irá gerar um erro por não reconhecer o argumento “service”. Nesse caso, você precisará atualizar o Selenium. Abra o prompt do anaconda e rode o seguinte comando:
pip install –-upgrade selenium
Depois clique em Kernel > Restart

Existe também, uma forma de o ChromeDriver ser constantemente atualizado, para que você não se preocupe em ficar baixando o ChromeDriver cada vez que o Google Chrome atualizar. Essa forma é através do webdriver-manager que é uma biblioteca que faz o gerenciamento do ChromeDriver. Para isso, teremos que instalar essa biblioteca. Abra o prompt do anaconda e rode o seguinte comando:

 pip install webdriver-manager 

Após a instalação, vamos rodar o seguinte código:

 from selenium import webdriver 
 from selenium.webdriver.chrome.service import Service 
 from webdriver_manager.chrome import ChromeDriverManager
                
 servico = service(ChromeDriverManager().install()) 
 driver = webdriver.Chrome(service=servico) 

(ChromeDriverManager().install()): Instala o ChromeDriver e passa o local da instalação para servico.
driver: servico é passado para o Selenium e um navegador (driver) é criado a partir do ChromeDriver que foi instalado.

– Diferença do Selenium no Google Colab

Para usar o Selenium com o Python no Google Colab, você precisará tomar alguns cuidados. Isto porque o Google Colab usa um computador na nuvem para rodar os códigos enquanto que o Selenium abre o navegador do seu computador. E no computador
remoto não tem esse navegador. A solução é rodar um conjunto de códigos que vão nos permitir usar o Selenium.

 !pip install Selenium 
 !apt-get update # to update ubuntu to correctly run apt install 
 !apt install chromium-chromedriver 
 !cp /usr/lib/chromium-browser/chromedriver /usr/bin 

Instala o Selenium e o driver do Chrome
Quando o código tem essas exclamações é como se estivesse no prompt do anaconda para fazer uma instalação.

Após a instalação, iremos executar o seguinte código:

 import sys 
 sys.path.insert(0,'/usr/lib/chromium-browser/chromedriver'
                 
 from selenium import webdriver 
 chrome_options = webdriver.ChromeOptions() 
 chrome_options.add_argument('--headless'
 chrome_options.add_argument('--no-sandbox'
 chrome_options.add_argument('--disable-dev-shm-usage'
 wd = webdriver.Chrome('chromedriver',options=chrome_options) 
                  
 wd.get("https://www.hashtagtreinamentos.com"
 print(wd.title) 
_______________________________
 Hashtag Treinamentos Aprenda TUDO de Excel, VBA e Power BI Aqui! 

– Como acessar uma página com o selenium

Lembrando que sempre iremos utilizar o código do webdriver-manager para que ele sempre verifique se é necessária a atualização do chromedriver, e assim garantir que tudo o que fizermos com o selenium funcione.

 from selenium import webdriver 
 from selenium.webdriver.chrome.service import Service 
 from webdriver_manager.chrome import ChromeDriverManager
                
 servico = service(ChromeDriverManager().install()) 
 driver = webdriver.Chrome(service=servico) 

Para acessar uma página de um site com o Selenium, usaremos a variável navegador que foi configurada na página anterior

 navegador.get("https://www.hashtagtreinamentos.com"

O navegador.get() permite tanto abrir páginas da internet como também abrir um arquivo html no seu computador como veremos abaixo com um arquivo teste.

 navegador.get(r'C:Users\Downloads\teste.html'

Uma página do site da Hashtag foi exportada de forma completa e foi disponibilizada em um link na descrição do vídeo desta aula. Estão disponíveis uma pasta chamada “Pagina Hashtag_files” e um arquivo chamado “Pagina Hashtag”. Tanto o arquivo como a pasta não podem estar em um arquivo zipado. Você deve extrair o conteúdo do arquivo zip e colocar na pasta Downloads

 navegador.get(r'C:Users\Downloads\Pagina Hashtag.html'

– Métodos de Seleção do Selenium

Nesta aula vamos aprender a selecionar objetos com o Selenium usando a página que vimos na aula anterior. O primeiro passo é sempre escrever primeiro o código que cria o navegador. Lembrando que mesmo que esse código não seja demonstrado de forma explícita aqui nas próximas aulas, ele sempre deve ser a primeira parte do seu código.

 from selenium import webdriver 
 from selenium.webdriver.chrome.service import Service 
 from webdriver_manager.chrome import ChromeDriverManager
                
 servico = service(ChromeDriverManager().install()) 
 driver = webdriver.Chrome(service=servico) 

Agora precisaremos colocar o arquivo HTML “Pagina Hashtag” e a pasta “Pagina Hashtag_files” na mesma pasta do arquivo em python. Pois aprenderemos como abrir o arquivo HTML que está na mesma pasta do nosso código em Python. Usaremos a biblioteca os, que trabalha com arquivos do computador.

 import os 
 caminho = os.getcwd() 
 arquivo = caminho + r"\Pagina Hashtag.html" 
 navegador.get(arquivo) 

O Selenium possui várias formas de selecionar um elemento em uma página. Como por exemplo:
• ID
• Xpath
• Class_name
• Text
• Tipo de informação
O método de seleção recomendado para se começar é o ID, porque o ID de um elemento geralmente não é repetido e normalmente não é modificado ao longo do tempo.

Para selecionar um elemento no Selenium, você tem 2 métodos
navegador.find_element (seleciona 1 único elemento e dá como resposta 1 item)
navegador.find_elements (seleciona vários elementos e dá como resposta uma lista)

E se quisermos selecionar os campos de nome e e-mail na nossa página HTML, como faremos? Como iremos usar a seleção pelo ID, devemos descobrir quais são os IDs desses campos . Para isso, devemos clicar com o botão direito do mouse em qualquer lugar da
página e selecionar Inspecionar.

Clique na seta até que ela fique azul como na imagem e depois selecione o elemento do seu interesse na página:

Inspecionando o ID do campo nome e escrevendo no campo nome podemos ver que o ID do campo nome é “fullname”.

 from selenium.webdriver.common,by import By 
 campo_nome = navegador.find_element(By.ID, 'fullname'
 campo_nome.send_keys("Lira"

"Lira" Seleciona o campo nome através do seu ID (fullname) e escreve “Lira” através do método send_keys(). Em vez de 2 linhas, esse código poderia ter sido escrito em 1 linha como na imagem abaixo.

 from selenium.webdriver.common,by import By 
                    
 navegador.find_element(By.ID, 'fullname').send_keys("Lira"

Inspecionando o ID do campo e-mail e escrevendo no campo e-mail. Podemos ver que o ID do campo e-mail é “email

 navegador.find_element(By.ID, 'email').send_keys('pythonimpressionador@gmail.com'

Seleciona o campo e-mail através do seu ID (email) e escreve “pythonimpressionador@gmail.com” através do método send_keys()

Inspecionando o ID do botão Enviar e clicando nele. Podemos ver que o ID do botão Enviar é “_form_176_submit”.

 navegador.find_element(By.ID, '_form_176_submit').click() 

Seleciona o botão Enviar através do seu ID (_form_176_submit) e clica nele através do método click()

Página foi redirecionada para o Minicurso básico de Excel após o preenchimento dos dados, o que significa que o nosso código funcionou.
Código com as seleções e preenchimento dos campos e clique no botão Enviar, em uma única célula.

 from selenium.webdriver.common,by import By 
                    
 navegador.find_element(By.ID, 'fullname').send_keys("Lira"
 navegador.find_element(By.ID, 'email').send_keys('pythonimpressionador@gmail.com'
 navegador.find_element(By.ID, '_form_176_submit').click() 

– Seleção por Class Name e XPATH

Nesta aula veremos outros métodos de seleção de elementos, mas antes precisamos ver um pouco da estrutura do HTML. Na aula passada, ao descobrirmos o ID de cada elemento que selecionamos, pudemos observar uma estrutura bem parecida em cada um desses elementos (entre os sinais de menor e maior <> que se chamam tags como o <div> por exemplo), que é a estrutura do HTML.

O HTML é uma linguagem de marcação que é responsável pela estruturação de uma página

Por exemplo no caso do div, ele possui uma estrutura que você abre com uma tag <div> e fecha com uma tag </div>, assim como o <p> (parágrafo). O conteúdo deve ficar entre essas tags de abertura e fechamento.

<div>
<p>
Exemplo de parágrafo
</p>
</div>

ou

<span class=“titulo” id=“primeiro-titulo” style=“”>
Título
</span>

Nesse caso, tudo que está dentro das tags <p> é um parágrafo, que também está dentro do elemento <div>. Existem alguns elementos que não usam tags de fechamento, como <img>.

Nas tags você pode ter várias características como class, id, style, entre outos. Na aula anterior estávamos procurando o elemento cujo ID fosse igual a um valor específico. Poderíamos ter usado também outros métodos de seleção como CLASS e XPATH.

Na documentação do Selenium, em locating elements, é possível ver os métodos de seleção disponíveis.
Métodos de seleção mais usados e que resolvem a maioria dos casos:

ID = "id"
NAME = "name"
XPATH = "xpath"
LINK_TEXT = "link text"
PARTIAL_LINK_TEXT = "partial link text"
TAG_NAME = "tag name"
CLASS_NAME = "class name"
CSS_SELECTOR = "css selector"

Sempre que um elemento tiver o ID, é recomendado que se use o ID como método de seleção, porque o ID costuma ser único em uma página, mas nem sempre isso vai acontecer. Mas se não for possível selecionar usando o ID, tente usar a CLASS_NAME como método se seleção. Se ainda assim não conseguir, use o XPATH.

Vamos agora tentar selecionar a logo da mesma página que acessamos na aula anterior.
Mais de 1 classe associada a este elemento. As classes são separadas por espaço. Elas são custom-logo e lazyloaded.

Neste caso, o elemento não possui ID. Então tentaremos fazer a seleção pela classe dele. No método de seleção por classe, você deve se perguntar se a classe é única para este elemento ou se ela está sendo usada para outros elementos da página. Olhando rapidamente, podemos perceber que a classe custom-logo tem mais a ver com o elemento que selecionamos do que a classe lazyloaded, e também parece ser uma classe única para este elemento.

 from selenium.webdriver.common,by import By 
                 
 navegador.find_element(By.ID, 'custom-logo').click() 

Após clicarmos na logo usando a classe como método de seleção, seremos redirecionados para a página inicial da Hashtag.

Se o elemento não possuir uma classe única ou não possuir classe, podemos usar o XPATH como método de seleção. Para descobrir o XPATH do nosso elemento, devemos clicar com o botão direito do mouse na página, selecionar inspecionar, clicar na seta até que ela fique azul, selecionar o nosso elemento e depois clicar com o botão direito do mouse no código do nosso elemento e selecionar COPY > COPY XPATH.

 from selenium.webdriver.common,by import By 
                 
 navegador.find_element(By.XPATH, '//*[@id="header"]/div/div/div[1]/a/img').click() 

Colocar o texto do XPATH sempre entre aspas simples, porque assim se o texto do XPATH contiver aspas duplas, o python conseguirá rodar o código sem problemas.

– Outras formas de selecionar um elemento no Selenium

Nesta aula veremos alguns métodos alternativos para selecionar um elemento em uma página.
• Selecionar pela TAG (vamos selecionar o título)
A tag h2 é uma tag que geralmente não se repete muito em uma página.

 from selenium.webdriver.common,by import By 
                 
 titulo = navegador.find_element(By.TAG_NAME, 'h2').text 
 print(titulo) 
__________________________
 TODOS OS CURSOS DA HASHTAG TREINAMENTOS 

Nesta aula veremos alguns métodos alternativos para selecionar um elemento em uma página.
• Selecionar pelo Partial Link Text ou Link Text (vamos pegar o número de Whatsapp de contato)
O método de seleção Partial Link Text permite selecionar por uma parte do texto de um link enquanto que o Link Text permite selecionar pelo texto do link, mas tem que saber o texto inteiro do link.

 from selenium.webdriver.common,by import By 
                 
 numero_whatsapp = navegador.find_element(By.PARTIAL_LINK_TEXT, 'WhatsApp').text 
 print(numero_whatsapp) 
__________________________
 (21) 99865-8852 (WhatsApp) 

• Procura em todos os links da página se algum deles possui a palavra ‘WhatsApp’ dentro do texto do link. Lembrando que o Python faz diferença entre letra maiúscula e minúscula.
• Obtém o texto do elemento.

Nesta aula veremos alguns métodos alternativos para selecionar um elemento em uma página.
• Selecionar pelo Name

 from selenium.webdriver.common,by import By 
                       
 navegador.find_element(By.NAME, 'email').send_keys('pythonimpressionador@gmail.com'

• Seleciona o campo e-mail através do seu name (email) e preenche “pythonimpressionador@gmail.com” através do método send_keys().

– Selecionando vários elementos de uma vez

Nas aulas anteriores vimos como fazer a seleção de um elemento usando o .find_element e agora veremos como fazer a seleção de vários elementos usando o .find_elements. Lembrando que o .find_elements nos retornará uma lista de elementos com determinada característica. Por exemplo, poderíamos extrair o link associado a cada uma das imagens de um site.
Por exemplo, e se quiséssemos selecionar o botão “BLOG” do Menu da página em que estamos trabalhando?

 <a title="Blog" href="https://www.hashtagtreinamentos.com/blog" class="nav-link">Blog</a> == $0 

Podemos perceber que esse elemento não possui ID, só possui uma classe chamada nav-link. Mas será que essa classe é única? Como esse botão está em uma barra de navegação, podemos supor que essa classe não é única. Mas vamos imaginar que você não soubesse disso e tentasse selecionar este elemento usando o .find_element

Como podemos ver abaixo.

 from selenium import webdriver 
 from selenium.webdriver.chrome.service import Service 
 from webdriver_manager.chrome import ChromeDriverManager 
 from selenium.webdriver.common.by import By 
                    
 servico = Service(ChromeDriverManager().install()) 
 navegador = webdriver.Chrome(service=servico) 
_________________________
 ====== WebDriver manager ====== 
 Current google-chrome version is 98.0.4758 
 Get LATEST chromedriver version for 98.0.4758 google-chrome 
 Driver has been saved in cache [C:\Users\joaol\.wdm\drivers\chromedriver\win32\98.0.4758.102] 

• Importações necessárias para usar o Selenium e os métodos de seleção.
• Redirecionou para a página Curso de Excel Online, pois o botão clicado foi CURSO EXCEL ONLINE em vez de BLOG.

 import os 
                     
 caminho = os.getcwd() 
 arquivo = caminho + r"\Pagina Hashtag.html" 
 navegador.get(arquivo) 

 navegador.find_elements(By.CLASS_NAME, 'nav-link'

Todos os botões da barra de navegação incluindo CURSO EXCEL ONLINE e CURSO POWER BI ONLINE possuem a mesma classe que o botão BLOG, Classe nav-link. Quando tentamos fazer a seleção de um elemento usando o .find_element, por achar que um elemento é único na página, mas na verdade não é, o elemento selecionado será o primeiro elemento que satisfaça o critério de seleção.
Por exemplo, tentamos selecionar o botão BLOG achando que sua classe nav-link fosse única, por isso usamos o .find_element. Como essa classe não é única, o find_element nos retornou o primeiro elemento encontrado na página com a classe nav-link, que foi o botão
CURSO EXCEL ONLINE.

CURSO EXCEL ONLINE
 <a title="Curso Excel Online" href="https://www.hashtagtreinamentos.com/curso-de-excel-online" class="nav-link" data-wpmeteor-mouseover="truedata-wpmeteor-mouseout="true">Curso Excel Online</a> 

CURSO POWER BI ONLINE
 <a title="Curso Power Bi Online" href="https://www.hashtagtreinamentos.com/curso-power-bi" class="nav-link">Curso Power Bi Online</a> 

Se você tentar clicar usando o .find_elements, você não irá conseguir pois esse método de seleção retorna uma lista de elementos e lista não possui um método .click().

O que podemos fazer é tentar adivinhar a posição do botão. Mesmo que isso dê certo, se o botão mudar de posição teremos que mudar o palpite. Então, o que queremos é selecionar o botão do BLOG independentemente da sua posição no site, porque não queremos que o nosso código pare de funcionar se a posição dos elementos for alterada.
Se o método de seleção for por XPATH, caso o elemento tenha a posição no site alterada, o nosso código também irá parar de funcionar. Abaixo podemos ver esse código que seleciona o botão BLOG independentemente da sua posição no site, e como ele funciona.

 lista_elementos = navegador.find_elements(By.CLASS_NAME, 'nav-link'
 for elemento in lista_elementos: 
     if "blog" in elemento.text.lower(): 
         elemento.click() 
         break 

• Lista de Elementos que possuem a Classe nav-link.
• Percorre cada elemento da lista lista_elementos e verifica se existe a palavra “blog” dentro do texto de cada elemento. Se sim, clica no elemento e sai do for.
• Usamos o método .lower() porque não sabemos de que forma o texto do elemento se encontra, se em letras maiúsculas ou minúsculas. Esse método garante que no momento da comparação, o texto do elemento esteja todo em letras minúsculas.
• Usamos o break para sair do for caso o resultado do if seja verdadeiro e o elemento seja clicado, pois após clicar no elemento, o navegador será redirecionado para outra página e se deixarmos o for rodando, poderá acontecer um erro no código

Graças a este método de seleção, conseguimos clicar no botão BLOG, cuja classe não era única.

– Pegando atributos ou texto de um elemento

Nesta aula veremos como utilizar o Selenium para pegar atributos de um elemento, que é diferente de pegar o texto de um elemento.
Estrutura de um link:

 <a href="https://hashtagtreinamentos.com"> 
     Texto do Link 
 </a> 

• Atributo href do elemento, que diz o endereço para o qual somos redirecionados quando clicamos no elemento.
• Se quisermos extrair o texto desse elemento, devemos utilizar o parâmetro .text desse elemento.

Agora vamos extrair o link e o texto de um elemento
Link do WhatsApp:
Podemos ver na imagem da página anterior que esse elemento não tem Classe, não tem ID, então vamos selecioná-lo pelo XPATH.
Extrair texto do link do WhatsApp

 texto = navegador.find_element(By.XPATH, '/html/body/footer/div/div[1]/div[2]/div/a[2]').text 
 print(texto) 
_____________________________
 (21) 99865-8852 (WhatsApp) 

Extrair link do WhatsApp
Para extrairmos o link de um elemento, precisamos pegar, nesse caso, o atributo href do elemento. Para isso, usaremos o método .get_attribute(). Então ficaria .get_attribute(“href”). Se quiséssemos pegar o atributo classe de um elemento, ficaria
.get_attribute(“class”), por exemplo.

 texto = navegador.find_element(By.XPATH, '/html/body/footer/div/div[1]/div[2]/div/a[2]').get_attribute('href'
 print(texto) 

Vamos fazer o mesmo com as imagens dos cursos que estão na página
Imagens dos Cursos:
Como o nosso interesse é pegar o link para o qual seremos redirecionados ao clicarmos na imagem, teremos que pegar o atributo href da tag <a> na qual a imagem está contida. Para isso selecionaremos esse elemento pelo XPATH.

 link = navegador.find_element(By.XPATH, '/html/body/section[2]/div/div[4]/figure/a').get_attribute('href'
 print(link) 
__________________
 https://hashtagtreinamentos.com/curso-de-excel-online 

Comparando o link extraído através da seleção acima com a imagem da página anterior, podemos perceber que é exatamente o mesmo link para o qual seremos redirecionados se clicarmos na imagem Excel Impressionador.

– Estrutura da Árvore HTML

A estrutura do HTML funciona com tags, como já vimos anteriormente. Essas tags podem ser comparadas com pastas, onde a pasta html (tag html) é a principal, e tudo que está dentro de um site fica dentro dessa tag. Por exemplo, podemos ver a estrutura da página da Hashtag.

Podemos perceber que a página começa e termina com a tag <html>. Podemos concluir que a “pasta” maior é a “pasta” html.

Normalmente, dentro da “pasta” html existem outras 2 “pastas”: head e body

 <html> 
      
    <head> 
    </head> 
      
    <body> 
    </body> 
      
 </html> 

• Dentro do head fica a parte não visual da sua página, como códigos em Javascript, códigos em CSS, cookies de rastreio, entre outras coisas.
• Dentro do body fica a parte visual da sua página, como textos, imagens, botões, entre outros.

Quando selecionamos um elemento específico, por exemplo o elemento h2 da página hashtag, podemos ver que as setas e as indentações nos mostram quais elementos estão dentro de outros elementos. No caso do elemento h2, ele está dentro de div que está dentro de section que está dentro de body.

Podemos perceber também que section e header não estão indentados um em relação ao outro, por isso um não está contido dentro do outro.

O importante é que você entenda que nessa estrutura um elemento fica dentro do outro, como se fossem pastas. Você pode clicar em inspecionar na página da hashtag e clicar nas setas e ver quais elementos estão dentro do outro. Vamos agora olhar a imagem que vimos na última aula.

Podemos ver que a tag img está dentro de a que está dentro de figure que está dentro de div, e se rolarmos a barra de rolagem para cima poderemos ver que esta div está dentro de outra div que está dentro de section que está dentro de body.

Na aula passada tentamos selecionar o link da imagem, que está na tag <a>. É importante saber que tudo que está dentro da tag <a>, será afetado por <a>. Essa tag <a> permite criar um link na página.

 <a href="httsps://hashtagtreinamentos.com" 
     <img> 
     Lira Lira Lira 
     <div> 
         <img> 
     </div> 
 </a> 

• Se nessa tag <a> você aplicar um link, todos os elementos dentro da tag <a> terão esse mesmo link.
• Dentro da tag <a>, você pode colocar os elementos que você quiser.

Quando percorremos uma página com o objetivo de extrair o link de uma ou mais imagens, precisamos entender que talvez este link não esteja diretamente na imagem, mas pode ser que ele esteja em uma “pasta” anterior ou uma pasta logo acima, onde a imagem está contida. A “pasta” que contém uma outra “pasta” é chamada de parent (Pai), e a “pasta” que está dentro de outra “pasta” é chamada de child (filho).

 <div> 
     <img> 
 </div> 

<div> é um parent de <img>.
<img> é um child de <div>.

Nenhum comentário:

Postar um comentário