Автор оригинала: Nishant Choudhary.
Получение источника страницы исследуемого веб-сайта является повседневной задачей для большинства инженеров по автоматизации тестирования. Анализ источника страницы помогает устранить ошибки, выявленные в ходе регулярного тестирования пользовательского интерфейса веб-сайта, функционального тестирования или тестирования безопасности. В чрезвычайно сложном процессе тестирования приложений сценарии тестирования автоматизации могут быть написаны таким образом, что если в программе обнаруживаются ошибки, то это происходит автоматически.
- сохраняет исходный код этой конкретной страницы.
- уведомляет лицо, ответственное за URL-адрес страницы.
- извлекает HTML-источник определенного элемента или блока кода и делегирует его ответственным органам, если ошибка произошла в одном конкретном независимом HTML-веб-элементе или блоке кода.
Это простой способ отслеживать, исправлять логические и синтаксические ошибки в интерфейсном коде. В этой статье мы сначала разберемся в терминологии, а затем рассмотрим, как получить исходный код страницы в Selenium WebDriver с помощью Python.
Что Такое Источник HTML-Страницы?
В нетехнической терминологии это набор инструкций для браузеров по отображению информации на экране в эстетическом виде. Браузеры интерпретируют эти инструкции по-своему для создания экранов браузера на стороне клиента. Они обычно пишутся с использованием Языка разметки гипертекста (HTML), Каскадных таблиц стилей (CSS) и Javascript.
Весь этот набор HTML-инструкций, которые создают веб-страницу, называется источником страницы или источником HTML, или просто исходным кодом. Исходный код веб-сайта-это набор исходного кода с отдельных веб-страниц.
Вот пример исходного кода для базовой страницы с заголовком, формой, изображением и кнопкой отправки.
Page Source Example - LambdaTest Debug selenium testing results : LambdaTest
Что Такое Веб-Элемент HTML?
Проще всего описать веб-элемент HTML следующим образом: “Любой HTML-тег, составляющий исходный код HTML-страницы, является веб-элементом.” Это может быть блок HTML – кода, независимый HTML-тег, такой как , медиа-объект на веб-странице-изображение, аудио, видео, функция JS или даже объект JSON, завернутый в теги .
В приведенном выше примере – является веб-элементом HTML, поэтому
и дочерними элементами тегов body также являются веб-элементы HTML, т. Е. , и т. Д.
Как Получить Исходный Код Страницы В Selenium WebDriver С Помощью Python?
Selenium WebDriver является надежным инструментом тестирования автоматизации и предоставляет инженерам по тестированию автоматизации широкий набор готовых к использованию API. И чтобы сделать Selenium WebDriver getpagesource, привязки Selenium Python предоставляют нам функцию драйвера под названием page_source для получения HTML-источника текущего активного URL-адреса в браузере.
Кроме того, мы также можем использовать функцию “GET” библиотеки запросов Python для загрузки источника страницы. Другой способ – выполнить javascript с помощью функции драйвера execute_script и заставить Selenium WebDriver получить исходный код страницы на Python. Не рекомендуется использовать XPath в тандеме с URL-адресом “view-source:”. Давайте рассмотрим примеры этих четырех способов получения исходного кода страницы в Selenium WebDriver с помощью Python –
Мы будем использовать образец небольшой веб-страницы , размещенной на GitHub для всех четырех примеров. Эта страница была создана для демонстрации тестирования перетаскивания в Selenium Python с использованием лямбда-теста.
Получить источник HTML-Страницы С помощью driver.page_source
Мы принесем “pynishant.github.io” в ChromeDriver и сохраните его содержимое в файл с именем “page_source.html.” Это имя файла может быть любым по вашему выбору. Затем мы читаем содержимое файла и печатаем его на терминале, прежде чем закрыть драйвер.
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get("https://pynishant.github.io/") pageSource = driver.page_source fileToWrite = open("page_source.html", "w") fileToWrite.write(pageSource) fileToWrite.close() fileToRead = open("page_source.html", "r") print(fileToRead.read()) fileToRead.close() driver.quit()
При успешном выполнении приведенного выше сценария на выходе вашего терминала появится следующий источник страницы.
Получить Исходный Код HTML-Страницы С помощью driver.execute_javascript
В предыдущем примере мы должны закомментировать (или заменить) строку “driver.page_source” и добавить следующую строку. “driver.execute_script-это API веб-драйвера Selenium Python для выполнения JS в среде Selenium. Здесь мы выполняем сценарий JS, который возвращает элемент тела HTML.
# pageSource = driver.page_source pageSource = driver.execute_script("return document.body.innerHTML;")
Выходной код выглядит следующим образом-
Как вы можете заметить, он возвращает только innerHTML элемента body. Как и в последнем выводе, мы не получаем весь источник страницы. Чтобы получить весь документ, мы выполняем “document.documentElement.outerHTML”. Строка execute_script теперь выглядит следующим образом-
pageSource = driver.execute_script("return document.documentElement.outerHTML;")
Это дает нам именно тот результат, который мы получили с помощью “driver.page_source.”
Извлеките Источник Страницы С Помощью Библиотеки Запросов Python В Selenium WebDriver. Этот метод не имеет ничего общего с Selenium , это чисто “питонический” способ получить источник веб-страницы. Здесь мы используем библиотеку запросов Python, чтобы сделать запрос get на URL-адрес и сохранить ответ запроса, т. Е. источник страницы, в HTML-файл и распечатать на терминале.
Вот сценарий –
import requests url = 'https://pynishant.github.io/' pythonResponse = requests.get(url) fileToWrite = open("py_source.html", "w") fileToWrite.write(pythonResponse.text) fileToWrite.close() fileToRead = open("py_source.html", "r") print(fileToRead.read()) fileToRead.close()
Этот метод можно использовать для быстрого хранения исходного кода веб-страницы без загрузки страницы в браузере, управляемом Selenium. Аналогично, мы можем использовать библиотеку Python urllib для извлечения источника HTML-страницы.
Получить Источник HTML-Страницы С Помощью URL-Адреса “view-source:”
Это редко требуется, но вы можете добавить целевой URL-адрес с “view-source” и загрузить его в окно браузера, чтобы загрузить исходный код и сохранить его в ручном тестировании.
Программно, чтобы взять исходный код скриншотов в Python Selenium (при необходимости), вы можете загрузить страницу с помощью –
driver.get("view-source:https://pynishant.github.io/")
Получить Исходный Код HTML – Страницы В Selenium Python WebDriver С Помощью XPath
Четвертый способ заставить Selenium WebDriver получить источник страницы-использовать XPath для его сохранения. Здесь вместо page_source или выполнения JavaScript мы идентифицируем исходный элемент, т. Е. , и извлекаем его. Закомментируйте логику извлечения источника предыдущей страницы и замените ее следующей-
# pageSource = driver.page_source pageSource = driver.find_element_by_xpath("//*").get_attribute("outerHTML")
В приведенном выше сценарии мы используем метод драйвера “find_element_by_xpath”, чтобы найти HTML-элемент веб-страницы. Мы вводим документ с помощью исходного узла– "//*"
и получите его “внешний HTML”, который является самим документом. Вывод выглядит так же, как мы получили ранее с помощью driver.page_source.
Как Получить HTML-Источник WebElement В Selenium?
Чтобы получить HTML-источник веб-элемента в Selenium WebDriver, мы можем использовать метод get_attribute Selenium Python WebDriver . Во-первых, мы захватываем веб-элемент HTML, используя методы локатора элементов драйвера, такие как (find_element_by_xpath или find_element_by_css_selector). Затем мы применяем метод get_attribute() к этому захваченному элементу, чтобы получить его HTML-источник.
Предположим, из punishment.github.io, и мы хотим захватить и распечатать исходный код div с идентификатором “div1”. Код для этого выглядит следующим образом-
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get("https://pynishant.github.io/") elementSource = driver.find_element_by_id("div1").get_attribute("outerHTML") print(elementSource) driver.quit()
Вот результат –
Аналогично, чтобы получить дочерние элементы или innerHTML веб-элемента –
driver.find_element_by_id("some_id_or_selector").get_attribute("innerHTML")
Существует альтернативный способ сделать это и достичь того же результата –
elementSource = driver.find_element_by_id("id_selector_as_per_requirement") driver.execute_script("return arguments[0].innerHTML;", elementSource)
Как Получить Данные JSON Из Источника HTML-Страницы В Python Selenium WebDriver?
Современные приложения строятся с использованием нескольких API-интерфейсов. И часто эти API динамически изменяют содержимое HTML-элементов. Объекты JSON появились в качестве альтернативы типам ответов XML. Таким образом, для профессионального тестера Selenium python стало необходимым обрабатывать объекты JSON, особенно те, которые встроены в HTML-теги
Чтобы продемонстрировать на примере – мы загружаем “https://www.cntraveller.in/” в драйвере Selenium и обратите внимание на схему SEO, содержащуюся в , чтобы убедиться, что URL-адрес логотипа включен в схему “JSON”. Кстати, если вы чувствуете себя сбитым с толку, эта “схема SEO” полезна для ранжирования веб-страниц в Google. Это не имеет ничего общего с логикой кода или тестированием. Мы используем его только для демонстрации.
Мы будем использовать Лямбда-тест для этой демонстрации-
from selenium import webdriver import json import re username = "hustlewiz247" accessToken = "1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC" gridUrl = "hub.lambdatest.com/wd/hub" desired_cap = { 'platform' : "win10", 'browserName' : "chrome", 'version' : "71.0", "resolution": "1024x768", "name": "LambdaTest json object test ", "build": "LambdaTest json object test", "network": True, "video": True, "visual": True, "console": True, } url = "https://"+username+":"+accessToken+"@"+gridUrl print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"]) driver = webdriver.Remote( desired_capabilities=desired_cap, command_executor= url ) # driver = webdriver.Chrome() driver.maximize_window() driver.get("https://www.cntraveller.in/") jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text') jsonSource = re.sub(";","",jsonSource) jsonSource = json.loads(jsonSource) if "logo" in jsonSource: print("\n logoURL : " + str(jsonSource["logo"])) else: print("JSON Schema has no logo url.") try: if "telephone" in jsonSource: print(jsonSource["telephone"]) else: print("No Telephone - here is the source code :\n") print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML')) except Exception as e: print(e) driver.quit()
Выходные данные содержат источник logoURL и WebElement –
Разбивка кода
Следующие три строки импортируют необходимые библиотеки: Selenium WebDriver, JSON Python и библиотеку re для обработки объектов JSON и использования регулярных выражений.
from selenium import webdriver import json import re
Затем мы настраиваем наш скрипт для его успешного запуска в облаке LambdaTest, что довольно быстро и плавно. Мне потребовалось менее 30 секунд, чтобы начать работу (возможно, потому, что у меня был предыдущий опыт работы с платформой). Но даже если вы новичок, это займет менее 1 минуты. Зарегистрируйтесь и войдите в систему с помощью Google и нажмите на Профиль , чтобы скопировать свое имя пользователя и токен доступа.
username = "your_username_on_lambdaTest" accessToken = "your lambdaTest access token" gridUrl = "hub.lambdatest.com/wd/hub" desired_cap = { 'platform' : "win10", 'browserName' : "chrome", 'version' : "71.0", "resolution": "1024x768", "name": "LambdaTest json object test ", "build": "LambdaTest json object test", "network": True, "video": True, "visual": True, "console": True, } url = "https://"+username+":"+accessToken+"@"+gridUrl
Мы запускаем драйвер в полноэкранном режиме и загружаем домашнюю страницу cntraveller со следующей строкой кода –
driver = webdriver.Remote( desired_capabilities=desired_cap, command_executor= url ) # driver = webdriver.Chrome() driver.maximize_window() driver.get("https://www.cntraveller.in/")
Теперь мы находим объекты JSON, содержащие скрипт, с помощью XPath locator и удаляем ненужные точки с запятой, чтобы правильно загрузить строку в формате JSON.
jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text') jsonSource = re.sub(";","",jsonSource) jsonSource = json.loads(jsonSource)
А затем мы проверяем, присутствует ли URL-адрес логотипа. Если он присутствует, мы его печатаем.
if "logo" in jsonSource: print("\n logoURL : " + str(jsonSource["logo"])) else: print("JSON Schema has no logo url.")
Кроме того, мы проверяем, присутствует ли телефонная информация. Если нет, мы печатаем исходный код веб-элемента.
try: if "telephone" in jsonSource: print(jsonSource["telephone"]) else: print("No Telephone - here is the source code :\n") print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML')) except Exception as e: print(e)
Наконец, мы бросили водителя.
водитель.()
Как Получить Исходный Код Страницы В Виде XML В Selenium WebDriver?
Если вы загружаете веб-сайт, отображаемый в формате XML, вам может потребоваться сохранить XML-ответ. Вот рабочее решение для создания источника XML-страницы Selenium get –
drive.execute_script('return document.getElementById("webkit-xml-viewer-source-xml").innerHTML')
Вывод
Вы можете использовать любой из продемонстрированных выше методов и использовать гибкость и масштабируемость лямбда-теста Selenium Grid cloud для автоматизации процессов тестирования. Он позволяет выполнять тестовые случаи в более чем 2000 браузерах, операционных системах и их версиях. Кроме того, вы можете интегрировать поток автоматизированного тестирования с современными инструментами CI/CD и придерживаться лучших методов непрерывного тестирования.
Итак, начните автоматизировать свои повседневные задачи и сразу же облегчите свою жизнь с помощью лямбда-теста.
Счастливого Тестирования!