Como tirar uma captura de tela com selênio
Diferentes navegadores da web usam diferentes motores de renderização para renderizar páginas da web. Portanto, o mesmo código de front -end pode não render a 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 em seu site. No entanto, essa não é a única parte difícil ao projetar um site compatível com diferentes navegadores e dispositivos. Verificando manualmente como o site fica em cada um dos seus navegadores direcionados pode ser demorado. Você teria que abrir todos os seus navegadores da Web segmentados, 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 capturas de tela automaticamente do seu site em cada um dos seus navegadores segmentados e comparar as imagens você mesmo. Isso é muito mais rápido que o método manual. Este artigo mostrará como tirar capturas de tela de janelas do navegador usando o 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) Mozilla Firefox e Google Chrome Web navegadores instalados no seu computador.
6) Conhecimento de como instalar o driver do Firefox Gecko e o Chrome Web Driver em seu sistema.
Para atender aos requisitos 4, 5 e 6, você pode ler meu artigo Introdução ao selênio com Python 3 no Linuxhint.com.
Você pode encontrar muitos outros artigos sobre os tópicos necessários no Linuxhint.com. Certifique -se de verificar esses artigos se precisar de alguma 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 do Python no diretório do projeto, como segue:
$ virtualenv .Venv
Ative o ambiente virtual, como segue:
$ fonte .venv/bin/ativar
Instale o selênio usando o PIP3, como segue:
$ PIP3 Instale o selênioBaixar e instalar 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 selênio com Python 3. Se você precisar de alguma assistência sobre este assunto, pesquise Linuxhint.com Para este artigo.
Noções básicas de tirar capturas de tela com selênio
Esta seção lhe dará um exemplo muito simples de tomar capturas de tela do navegador com selênio.
Primeiro, crie um novo script python EX01_GOOGEL-CROMO.py e digite as seguintes linhas de códigos no script.
do selênio importar webdriverde selênio.WebDriver.comum.teclas de importação
googlechromeoptions = webdriver.cromada.opções.Opções ()
googlechromeoptions.sem cabeça = verdadeiro
googlechromeoptions.add_argument ('-size de janela = 1280.720')
googlechrome = webdriver.Chrome (executável_path = "./Drivers/Chromedriver ",
opções = googlechromeoptions)
Pageurl = "https: // www.W3schools.com ";
googlechrome.Get (Pageurl)
googlechrome.Save_screenshot ('Images/W3schools_google-Chrome.png ')
googlechrome.fechar()
Depois de terminar, salve o EX01_GOOGEL-CROMO.py Script Python.
A linha 4 cria um Opções Objeto do navegador do Google Chrome.
A linha 5 permite 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 armazenam -o no googlechrome variável.
Linha 10 define um URL da página variável. O URL da página A variável contém o URL da página da web que o Selenium será exibido.
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 para o arquivo W3schools_google-chrome.png no imagens/ Diretório do projeto.
Finalmente, a linha 14 fecha o navegador.
Em seguida, execute o EX01_GOOGEL-CROMO.py Script Python, como segue:
$ python3 ex01_google-chrome.pyNa 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 captura de tela abaixo.
Para tirar uma captura de tela do mesmo site, mas no navegador da Web do Firefox, crie o novo script Python EX01_FIREFOX.py e digite as seguintes linhas de códigos no script.
do selênio importar webdriverde selênio.WebDriver.comum.teclas de importação
FirefoxOptions = WebDriver.Raposa de fogo.opções.Opções ()
FirefoxOptions.sem cabeça = verdadeiro
FirefoxOptions.add_argument ('-largura = 1280')
FirefoxOptions.add_argument ('-altura = 720')
Firefox = WebDriver.Firefox (executável_path = "./Drivers/Geckodriver ", Options = FirefoxOptions)
Pageurl = "https: // www.W3schools.com ";
Raposa de fogo.Get (Pageurl)
Raposa de fogo.save_screenshot ('imagens/w3schools_firefox.png ')
Raposa de fogo.fechar()
Depois de terminar, salve o EX01_FIREFOX.py Script Python.
A linha 4 cria um Opções Objeto do navegador da Web do Firefox.
A linha 5 permite 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 do 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 A variável contém o URL da página da web que o Selenium será exibido.
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 para o 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, como segue:
$ python3 ex01_firefox.pyNa 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 captura de tela abaixo.
Tomando capturas de tela de diferentes resoluções de tela
Esta seção mostrará como tirar capturas de tela da mesma página da web em diferentes resoluções de tela. Nesta seção, usarei o navegador do 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.
do selênio importar webdriverde selênio.WebDriver.comum.teclas de importação
Pageurl = "https: // www.W3schools.com/";
Resoluções = ['320,1080', '500.1080', '720.1080', '1366.1080', '1920.1080']
Para resolução nas resoluções:
impressão ("Tirando 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 (executável_path = "./Drivers/Chromedriver ", Options = Chromeoptions)
cromada.Get (Pageurl)
outputImage = 'Images/homepage_chrome_' + Resolução.substituir (',', '_') + '.png '
cromada.Save_Screenshot (outputImage)
cromada.fechar()
impressão ('salvo para %s.' % (outputImage))
Depois de 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 web que eu gostaria de tirar 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 tirar capturas de tela de.
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.
Linhas 10-15 Crie um objeto de navegador com o resolução da iteração atual do loop e a armazena 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 recebe 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 da tela (i.e., o próximo item da lista).
Em seguida, execute o ex02.py Script Python, como segue:
$ python3 ex02.pyO script python ex02.py deve tirar 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, largura de pixels.
Se você comparar as capturas de tela, deverá ver que a interface do usuário 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 conceitos básicos de tirar capturas de tela usando o Selenium e os drivers da Web Chrome e Firefox. O artigo também mostrou como tirar capturas de tela em diferentes resoluções de tela. Isso deve ajudá -lo a começar com o recurso de captura de tela de selênio.