Phenquestions
Diferentes navegadores da web usam diferentes mecanismos de renderização para renderizar páginas. Portanto, o mesmo código de front-end pode não ser processado da mesma maneira em todos os navegadores da web. Para corrigir esse problema, pode ser necessário adicionar alguns códigos de front-end específicos do navegador ao seu site. No entanto, essa não é a única parte difícil ao projetar um site compatível com diferentes navegadores e dispositivos. Verificar manualmente a aparência do site em cada um de seus navegadores de destino pode ser demorado. Você teria que abrir todos os seus navegadores de destino, visitar a página da web, esperar a página carregar e comparar as páginas renderizadas entre si. Para economizar tempo, você pode usar o recurso de captura de tela do Selenium para tirar automaticamente capturas de tela do seu site em cada um dos navegadores de destino e comparar as imagens você mesmo. Isso é muito mais rápido do que o método manual. Este artigo mostrará como fazer capturas de tela de janelas do navegador usando Selenium.
Pré-requisitos
Para experimentar os comandos e exemplos discutidos neste artigo, você deve ter:
1) Uma distribuição Linux (de preferência Ubuntu) instalada no seu computador.
2) Python 3 instalado em seu computador.
3) PIP 3 instalado no seu computador.
4) O pacote Python virtualenv instalado no seu computador.
5) Navegadores Mozilla Firefox e Google Chrome instalados em seu computador.
6) Conhecimento de como instalar o Firefox Gecko Driver e o Chrome Web Driver em seu sistema.
Para cumprir os requisitos 4, 5 e 6, você pode ler meu artigo Introdução ao Selenium com Python 3 na Linuxhint.com.
Você pode encontrar muitos outros artigos sobre os tópicos necessários em LinuxHint.com. Certifique-se de verificar estes artigos se precisar de qualquer assistência adicional.
Configurando um Diretório de Projeto
Para manter tudo organizado, crie o novo diretório do projeto selênio-screenshot /, do seguinte modo:
$ mkdir -pv selenium-screenshot / imagens, drivers
Navegue até o selênio-screenshot / diretório do projeto, como segue:
$ cd selenium-screenshot /
Crie um ambiente virtual Python no diretório do projeto, da seguinte maneira:
$ virtualenv .venv
Ative o ambiente virtual da seguinte maneira:
$ source .venv / bin / activate
Instale o Selenium usando PIP3, como segue:
$ pip3 install selenium
Baixe e instale o driver da web necessário no motoristas / diretório do projeto. Expliquei o processo de download e instalação de drivers da web no artigo Introdução ao Selenium com Python 3. Se você precisar de alguma ajuda neste assunto, pesquise LinuxHint.com para este artigo.
Noções básicas de captura de tela com o Selenium
Esta seção lhe dará um exemplo muito simples de como tirar screenshots do navegador com o Selenium.
Primeiro, crie um novo script Python ex01_google-chrome.py e digite as seguintes linhas de códigos no script.
from selenium import webdriverde selênio.driver da web.comum.chaves importar chaves
googleChromeOptions = webdriver.cromada.opções.Opções ()
googleChromeOptions.sem cabeça = verdadeiro
googleChromeOptions.add_argument ('- window-size = 1280,720')
googleChrome = webdriver.Chrome (executable_path = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
googleChrome.get (pageUrl)
googleChrome.save_screenshot ('images / w3schools_google-chrome.png ')
googleChrome.perto()
Quando terminar, salve o ex01_google-chrome.py Script Python.
A linha 4 cria um Opções objeto para o navegador Google Chrome.
A linha 5 ativa o modo sem cabeça para o Google Chrome.
A linha 6 define o tamanho da janela para 1280 × 720 pixels.
A linha 8 cria um objeto de navegador usando o driver do Chrome e o armazena no googleChrome variável.
A linha 10 define um URL da página variável. O URL da página variável contém o URL da página da web que o Selenium irá capturar.
A linha 11 carrega o URL da página no navegador.
A linha 12 usa o save_screenshot () método para salvar uma captura de tela da janela do navegador no arquivo w3schools_google-chrome.png no imagens / diretório do projeto.
Finalmente, a linha 14 fecha o navegador.
Em seguida, execute o ex01_google-chrome.py Script Python, da seguinte maneira:
$ python3 ex01_google-chrome.py
Na execução bem-sucedida do script, a captura de tela será salva no arquivo de imagem w3schools_google-chrome.png no imagens / diretório do projeto, como você pode ver na imagem abaixo.
Para fazer uma captura de tela do mesmo site, mas no navegador Firefox, crie o novo script Python ex01_firefox.py e digite as seguintes linhas de códigos no script.
from selenium import webdriverde selênio.driver da web.comum.chaves importar chaves
firefoxOptions = webdriver.Raposa de fogo.opções.Opções ()
firefoxOptions.sem cabeça = verdadeiro
firefoxOptions.add_argument ('- largura = 1280')
firefoxOptions.add_argument ('- height = 720')
firefox = webdriver.Firefox (executable_path = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Raposa de fogo.get (pageUrl)
Raposa de fogo.save_screenshot ('images / w3schools_firefox.png ')
Raposa de fogo.perto()
Quando terminar, salve o ex01_firefox.py Script Python.
A linha 4 cria um Opções objeto para o navegador Firefox.
A linha 5 ativa o modo sem cabeça para o Firefox.
A linha 6 define a largura da janela do navegador para 1280 pixels e a linha 7 define a altura da janela do navegador para 720 pixels.
A linha 9 cria um objeto de navegador usando o driver Firefox Gecko e o armazena no Raposa de fogo variável.
A linha 11 define um URL da página variável. O URL da página variável contém o URL da página da web que o Selenium irá capturar.
A linha 13 carrega o URL da página no navegador.
A linha 14 usa o save_screenshot () método para salvar uma captura de tela da janela do navegador no arquivo w3schools_firefox.png no imagens / diretório do projeto.
Finalmente, a linha 15 fecha o navegador.
Em seguida, execute o ex01_firefox.py Script Python, da seguinte maneira:
$ python3 ex01_firefox.py
Após a execução bem-sucedida do script, a captura de tela deve ser salva no arquivo de imagem w3schools_firefox.png no imagens / diretório do projeto, como você pode ver na imagem abaixo.
Captura de tela de diferentes resoluções de tela
Esta seção mostrará como fazer capturas de tela da mesma página da web em diferentes resoluções de tela. Nesta seção, estarei usando o navegador Google Chrome, mas você pode usar o Firefox ou qualquer outro navegador para esta seção.
Primeiro, crie o novo script Python ex02.py e digite as seguintes linhas de código no script.
from selenium import webdriverde selênio.driver da web.comum.chaves importar chaves
pageUrl = "https: // www.w3schools.com / ";
resoluções = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
para resolução em resoluções:
print ("Tirando a captura de tela para a resolução% s…"% (resolução.substituir (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
chromeOptions.sem cabeça = verdadeiro
chromeOptions.add_argument ('- window-size =' + resolução)
chrome = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = chromeOptions)
cromada.get (pageUrl)
outputImage = 'images / homepage_chrome_' + resolução.substituir (',', '_') + '.png '
cromada.save_screenshot (outputImage)
cromada.perto()
imprimir ('Salvo em% s.'% (outputImage))
Quando terminar, salve o ex02.py Script Python.
A linha 4 define um URL da página variável que contém o URL da página da qual eu gostaria de fazer capturas de tela em diferentes resoluções de tela.
A linha 5 define um resoluções lista que contém uma lista das resoluções que eu gostaria de fazer.
A linha 7 itera através de cada um dos resoluçãos no resoluções Lista.
Dentro do loop, a linha 8 imprime uma mensagem significativa no console.
As linhas 10-15 criam um objeto de navegador com o resolução da iteração do loop atual e armazena-o no cromada variável.
A linha 17 carrega o URL da página no navegador.
A linha 19 gera um caminho de imagem, onde a captura de tela será salva e armazena a imagem no outputImage variável.
A linha 20 tira uma captura de tela da janela do navegador e a armazena no caminho outputImage.
A linha 21 fecha o navegador.
A linha 22 imprime uma mensagem significativa no console e termina o loop.
Então, o loop começa novamente com a próxima resolução de tela (i.e., o próximo item da lista).
Em seguida, execute o ex02.py Script Python, da seguinte maneira:
$ python3 ex02.py
O script Python ex02.py deve fazer capturas de tela do URL fornecido em cada uma das resoluções de tela escolhidas.
Captura de tela de w3schools.com em 320 pixels de largura.
Captura de tela de w3schools.com em 500 pixels de largura.
Captura de tela de w3schools.com em 720 pixels de largura.
Captura de tela de w3schools.com em 1366 pixels de largura.
Captura de tela de w3schools.com em 1920 pixels de largura.
Se você comparar as capturas de tela, deverá ver que a IU muda com a largura da janela do navegador. Usando o recurso de captura de tela do Selenium, você pode ver como seu site fica em diferentes resoluções de tela de forma rápida e fácil.
Conclusão
Este artigo mostrou a você alguns dos princípios básicos de como fazer capturas de tela usando Selenium e os drivers da web do Chrome e do Firefox. O artigo também mostrou como fazer capturas de tela em diferentes resoluções de tela. Isso deve ajudá-lo a começar com o recurso de captura de tela do Selenium.
