Phenquestions
Разные веб-браузеры используют разные механизмы визуализации для отображения веб-страниц. Таким образом, один и тот же код внешнего интерфейса может не отображаться одинаково во всех веб-браузерах. Чтобы решить эту проблему, вам может потребоваться добавить на свой веб-сайт некоторые коды внешнего интерфейса для конкретного браузера. Однако это не единственная сложная часть при разработке веб-сайта, совместимого с различными браузерами и устройствами. Проверка того, как сайт выглядит в каждом из ваших целевых браузеров вручную, может занять много времени. Вам нужно будет открыть все целевые веб-браузеры, посетить веб-страницу, дождаться загрузки страницы и сравнить обработанные страницы друг с другом. Чтобы сэкономить время, вы можете использовать функцию скриншотов Selenium, чтобы автоматически делать скриншоты вашего веб-сайта в каждом из ваших целевых браузеров и самостоятельно сравнивать изображения. Это намного быстрее, чем ручной метод. Эта статья покажет вам, как делать скриншоты окон браузера с помощью Selenium.
Предпосылки
Чтобы опробовать команды и примеры, обсуждаемые в этой статье, у вас должны быть:
1) Дистрибутив Linux (желательно Ubuntu), установленный на вашем компьютере.
2) Python 3 установлен на вашем компьютере.
3) PIP 3 установлен на вашем компьютере.
4) Пакет Python virtualenv установлен на вашем компьютере.
5) Веб-браузеры Mozilla Firefox и Google Chrome, установленные на вашем компьютере.
6) Знание того, как установить драйвер Firefox Gecko и веб-драйвер Chrome в вашей системе.
Чтобы выполнить требования 4, 5 и 6, вы можете прочитать мою статью Введение в Selenium с Python 3 в Linuxhint.ком.
Вы можете найти много других статей по нужным темам на LinuxHint.ком. Обязательно ознакомьтесь с этими статьями, если вам понадобится дополнительная помощь.
Настройка каталога проекта
Чтобы все было организовано, создайте новый каталог проекта селен-скриншот /, следующим образом:
$ mkdir -pv selenium-screenshot / изображения, драйверы
Перейдите к селен-скриншот / каталог проекта, как показано ниже:
$ cd selenium-screenshot /
Создайте виртуальную среду Python в каталоге проекта, как показано ниже:
$ virtualenv .Venv
Активируйте виртуальную среду следующим образом:
$ источник .Venv / bin / активировать
Установите Selenium с помощью PIP3 следующим образом:
$ pip3 установить селен
Загрузите и установите необходимый веб-драйвер в драйверы / каталог проекта. Я объяснил процесс загрузки и установки веб-драйверов в статье Введение в Selenium с Python 3. Если вам нужна помощь по этому поводу, ищите LinuxHint.ком для этой статьи.
Основы создания снимков экрана с помощью Selenium
В этом разделе вы найдете очень простой пример создания снимков экрана браузера с помощью Selenium.
Сначала создайте новый скрипт Python ex01_google-chrome.ру и введите следующие строки кода в скрипт.
из selenium import webdriverиз селена.webdriver.общий.ключи импорт Ключи
googleChromeOptions = webdriver.хром.параметры.Параметры()
googleChromeOptions.headless = Правда
googleChromeOptions.add_argument ('- размер окна = 1280,720')
googleChrome = webdriver.Chrome (исполняемый_путь = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
Гугл Хром.получить (pageUrl)
Гугл Хром.save_screenshot ('images / w3schools_google-chrome.png ')
Гугл Хром.Закрыть()
Как только вы закончите, сохраните ex01_google-chrome.ру Скрипт Python.
Строка 4 создает Параметры объект для веб-браузера Google Chrome.
Строка 5 включает безголовый режим для Google Chrome.
Строка 6 устанавливает размер окна 1280 × 720 пикселей.
Строка 8 создает объект браузера с помощью драйвера Chrome и сохраняет его в Гугл Хром Переменная.
Строка 10 определяет pageUrl Переменная. В pageUrl переменная содержит URL-адрес веб-страницы, скриншот которой Selenium сделает.
Строка 11 загружает pageUrl в браузере.
В строке 12 используется save_screenshot () метод сохранения скриншота окна браузера в файл w3schools_google-chrome.PNG в изображений/ каталог проекта.
Наконец, строка 14 закрывает браузер.
Затем запустите ex01_google-chrome.ру Скрипт Python, как показано ниже:
$ python3 ex01_google-chrome.ру
При успешном выполнении скрипта скриншот будет сохранен в файл изображения w3schools_google-chrome.PNG в изображений/ каталог проекта, как вы можете видеть на скриншоте ниже.
Чтобы сделать снимок экрана того же веб-сайта, но в веб-браузере Firefox, создайте новый скрипт Python ex01_firefox.ру и введите в скрипт следующие строки кодов.
из selenium import webdriverиз селена.webdriver.общий.ключи импорт Ключи
firefoxOptions = webdriver.Fire Fox.параметры.Параметры()
firefoxOptions.headless = Правда
firefoxOptions.add_argument ('- ширина = 1280')
firefoxOptions.add_argument ('- высота = 720')
firefox = webdriver.Firefox (исполняемый_путь = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Fire Fox.получить (pageUrl)
Fire Fox.save_screenshot ('images / w3schools_firefox.png ')
Fire Fox.Закрыть()
Как только вы закончите, сохраните ex01_firefox.ру Скрипт Python.
Строка 4 создает Параметры объект для веб-браузера Firefox.
Строка 5 включает безголовый режим для Firefox.
Строка 6 устанавливает ширину окна браузера на 1280 пикселей, а строка 7 устанавливает высоту окна браузера на 720 пикселей.
Строка 9 создает объект браузера с помощью драйвера Firefox Gecko и сохраняет его в Fire Fox Переменная.
Строка 11 определяет pageUrl Переменная. В pageUrl переменная содержит URL-адрес веб-страницы, снимок экрана которой будет сделан Selenium.
Строка 13 загружает pageUrl в браузере.
В строке 14 используется save_screenshot () метод сохранения скриншота окна браузера в файл w3schools_firefox.PNG в изображений/ каталог проекта.
Наконец, строка 15 закрывает браузер.
Затем запустите ex01_firefox.ру Скрипт Python, как показано ниже:
$ python3 ex01_firefox.ру
При успешном выполнении скрипта снимок экрана должен быть сохранен в файл изображения w3schools_firefox.PNG в изображений/ каталог проекта, как вы можете видеть на скриншоте ниже.
Создание скриншотов с разным разрешением экрана
В этом разделе показано, как делать скриншоты одной и той же веб-страницы при разных разрешениях экрана. В этом разделе я буду использовать веб-браузер Google Chrome, но вы можете использовать Firefox или любой другой браузер для этого раздела.
Сначала создайте новый скрипт Python ex02.ру и введите следующие строки кода в скрипт.
из selenium import webdriverиз селена.webdriver.общий.ключи импорт Ключи
pageUrl = "https: // www.w3schools.com / ";
разрешения = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
для разрешения в разрешениях:
print ("Снимок экрана с разрешением% s…"% (разрешение.replace (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
chromeOptions.headless = Правда
chromeOptions.add_argument ('- размер окна =' + разрешение)
chrome = webdriver.Chrome (исполняемый_путь = "./ drivers / chromedriver ", options = chromeOptions)
хром.получить (pageUrl)
outputImage = 'images / homepage_chrome_' + разрешение.заменить (',', '_') + '.png '
хром.save_screenshot (outputImage)
хром.Закрыть()
print ('Сохранено в% s.'% (outputImage))
Как только вы закончите, сохраните ex02.ру Скрипт Python.
Строка 4 определяет pageUrl переменная, содержащая URL-адрес веб-страницы, с которой я хотел бы сделать снимки экрана в разных разрешениях экрана.
Строка 5 определяет резолюции список, содержащий список разрешений, для которых я хотел бы сделать скриншоты.
Строка 7 проходит по каждому из разрешающая способностьс в резолюции список.
Внутри цикла строка 8 выводит на консоль значимое сообщение.
Строки 10-15 создают объект браузера с разрешающая способность текущей итерации цикла и сохраняет его в хром Переменная.
Строка 17 загружает pageUrl в браузере.
Строка 19 генерирует путь к изображению, где будет сохранен снимок экрана, и сохраняет изображение в outputImage Переменная.
Строка 20 делает снимок экрана окна браузера и сохраняет его в пути outputImage.
Строка 21 закрывает браузер.
Строка 22 выводит на консоль содержательное сообщение и завершает цикл.
Затем цикл начинается снова со следующим разрешением экрана (i.е., следующий пункт списка).
Затем запустите ex02.ру Скрипт Python, как показано ниже:
$ python3 ex02.ру
Скрипт Python ex02.ру должен делать скриншоты данного URL в каждом из выбранных разрешений экрана.
Снимок экрана w3schools.ком в ширину 320 пикселей.
Скриншот w3schools.ком шириной 500 пикселей.
Снимок экрана w3schools.ком в ширину 720 пикселей.
Снимок экрана w3schools.ком в ширину 1366 пикселей.
Снимок экрана w3schools.ком в ширину 1920 пикселей.
Если вы сравните скриншоты, вы увидите, что пользовательский интерфейс меняется в зависимости от ширины окна браузера. Используя функцию скриншота Selenium, вы можете быстро и легко увидеть, как ваш сайт выглядит при разных разрешениях экрана.
Заключение
В этой статье показаны некоторые основы создания снимков экрана с помощью Selenium и веб-драйверов Chrome и Firefox. В статье также было показано, как делать скриншоты в разных разрешениях экрана. Это должно помочь вам начать работу с функцией скриншота Selenium.
