Как найти сломанные изображения с помощью селена Webdriver?
Пользовательский опыт веб -продукта – один из ключевых элементов, которые помогают в сборе пользователей и пользователю RET … Tagged с селенами, селенаубдривером, Java, Python.
Пользовательский опыт веб -продукта является одним из ключевых элементов, которые помогают в сборе пользователей и удержании пользователей. Хотя огромное внимание должно быть уделено проектированию и разработке новых функций продукта, непрерывные часы должны храниться на общем пользовательском опыте. Подобно 404 страницам (или мертвым ссылкам), разбитые изображения на веб-сайте (или веб-приложение) также могут раздражать конечных пользователей. Ручная проверка и удаление сломанных изображений не являются осуществимым и масштабируемым подходом. Вместо использования сторонних инструментов для проверки сломанных изображений, вы должны использовать Тестирование автоматизации селена И посмотрите, как найти разбитые изображения, используя селена Webdriver на вашем сайте.
В этой части Учебник селена , мы смотрим, как найти разбитые изображения на веб -сайтах, используя Selenium Webdriver. С точки зрения конечного пользователя, даже одно сломанное изображение на странице может быть демпфиром опыта-главной причиной для поиска сломанных изображений на веб-сайтах.
К концу этого блога вы сможете найти сломанные изображения, используя Selenium webdriver с Python , Java, C#и Php.
Что такое разбитые изображения в веб -тестировании?
Сломанное изображение-это ссылка/изображение, которое не отображается как изображение, нажав на то, что переносит конечный пользователь к невнимательному изображению. Пользователь встречается с ошибкой 404 при нажатии на сломанное изображение. Эта ошибка означает, что существует проблема с URL -адресом изображения, и изображение не загружается должным образом (по разным причинам).
Ниже показан пример разбитых изображений на веб -сайте:
С точки зрения опыта и удержания конечного пользователя, исправление сломанных изображений следует считать одинаково важным, как исправление разбитых ссылок на веб-сайтах. Selenium WebDriver можно использовать для поиска сломанных изображений на веб -сайтах. Внутренняя логика для поиска разбитых изображений может варьироваться в зависимости от того, как изображения извлекаются с сервера.
Вот два способа считывания изображений с сервера:
Абсолютный путь – Как указывает имя, веб -сайт использует абсолютный путь (или полный путь) в атрибуте «SRC», который определяет путь к предполагаемому изображению. Тег в HTML создает пространство для удержания для указанного изображения.
Ниже показан пример использования абсолютного пути в атрибуте «SRC» тег:
Изображение, показанное выше, получено из абсолютного местоположения (то есть имя хоста используется в атрибуте ):
Относительный путь – На многих веб -сайтах относительное изображение на пути помещается в атрибут. Относительный путь всегда относится к корню документа (то есть веб -сайт/веб -приложение).
Вот образец использования относительного пути в атрибуте тега :
Вам было бы любопытно узнать, что приводит к сломанным изображениям на веб -сайте. Давайте посмотрим на «почему часть» разбитых изображений?
Основные причины разбитых изображений на веб -странице
Вот некоторые из заметных причин, которые приводят к сломанным изображениям (т. Е. Файл, не найденные или 404 ошибки для изображений) на веб -сайте (или веб -приложения):
Неправильный формат изображения – Если вы загрузили изображение в формате .jpg, но изображение идентифицируется как формат .png в коде, оно приводит к ошибке при отображении изображения. Необходимо убедиться, что форматы изображений совпадают при загрузке на сервер и ссылке на то же самое в коде.
Неправильный URL -адрес изображения – При рендеринге указанного изображения браузер считывает местоположение изображения из атрибута в теге . Если в атрибуте упоминается неверный путь изображения или неправильное имя файла, это приводит к проблемам отображения изображения (и 404 ошибок).
Удаленный файл изображения – Ссылка на код HTML может относиться к файлу, который либо неправильно написан в коде, либо больше не существует на сервере.
Перемещение сайта – После перемещения сайта из одного поставщика в другой следует провести тщательную проверку, чтобы проверить, доступны ли все активы сайта и доступны на новом сервере.
301 перенаправление – Во время деятельности по перепроектированию веб -сайта 301 перенаправление должно быть сделано для содержания сайта и изображений, используемых на сайте. Наряду с перенаправлением URL -адресов следует уделять перенаправление изображений, которые находятся в этих URL -адресах.
Недоступность сервера – В сценариях, где сервер не дает ответа в течение определенного времени, изображения не появятся на сайте.
Как и разбитые ссылки, следует уделять внимание, чтобы ваш веб -продукт был свободен от разбитых изображений.
Почему вы должны проверять на наличие сломанных изображений?
Вот две основные причины проверки сломанных изображений на веб -сайтах:
Разбитые изображения на веб-сайте забивают опыт конечного пользователя, что может негативно повлиять на рост продукта.
Изображения являются неотъемлемой частью стратегии контент -маркетинга. Однако разбитые изображения могут создавать проблемы SEO. Изображения с отсутствующими альт -тегами и разбитыми внутренними изображениями проблематичны с точки зрения SEO и должны рассматриваться на высоком приоритете.
Как найти сломанные изображения с помощью селена Webdriver?
Когда пользователь посещает веб -сайт, запрос пользователя отправляется на сервер веб -сайта, который обрабатывает запрос. В ответ на запрос браузера сервер отправляет трехзначный код, называемый кодом состояния HTTP в браузер.
Некоторые из широко используемых классов кодов состояния HTTP являются 1xx, 2xx, 3xx, 4xx и 5xx. Чтобы найти разбитые изображения с использованием селена WebDriver, мы будем использовать класс 4XX кода состояния, указывая, что конкретная страница или полный веб -сайт не доступны. Код состояния класса 2XX (особенно 200) предполагает, что запрос, отправленный веб -браузером, был успешным, а соответствующий ответ был отправлен в браузер.
Независимо от того, что язык программирования используется для обнаружения сломанных изображений, основные принципы остаются прежними. Вот некоторые из шагов, которые можно выполнить, чтобы найти разбитые изображения на веб -сайтах:
Используйте тег , чтобы собрать детали изображений, присутствующих на странице.
Для каждого тега получите атрибут из тега.
Преобразуйте путь, полученный из атрибута в «абсолютный путь». Преобразование в абсолютный путь может не потребоваться для селена Java, Selenium C#и Selenium Python. Преобразование «относительного пути» изображения (ы) в «абсолютный путь» является обязательным при использовании Selenium PHP.
Отправьте HTTP -запрос по ссылке изображения, полученной с шага (3), и захватить код ответа, полученный в ответ на запрос.
На основании кода ответа, отправленного сервером, вы должны подтвердить, сломано ли изображение. Код ответа 200 (то есть, httpstatuscode. ОК) означает, что изображение доступно на сервере.
Убедитесь, нарушена ли ссылка или не на основе кода ответа, отправленного сервером.
Повторите шаги (2-6) для каждого изображения, присутствующего на странице.
Атрибут NaturalWidth возвращает исходную ширину изображения, и он равен нулю для сломанного изображения. Для селена с Java вы также можете проверить, является ли атрибут естественной ширины изображения или нет.
В этом учебном пособии Selenium мы демонстрируем, как найти сломанные изображения, используя селенс Webdriver в Java, Python, C#и PHP. Тесты запускаются на последней версии браузера Chrome на платформе Windows 10. Выполнение выполняется в облачной селене селен, предоставленной LambDatest.
Чтобы начать работу с rambdatest, вы должны создать учетную запись на веб-сайте и отметить имени пользователя и ключ доступа из Раздел профиля на rambdatest Анкет Возможности браузера генерируются с использованием генератора LambDatest.
Вот тестовый сценарий, чтобы найти сломанные изображения на веб -сайте:
package brokenimages;
import java.io.IOException;
import java.net.MalformedURLException;
import java.util.List;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.HttpClientBuilder;
import org.openqa.selenium.By;
import java.net.URL;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
public class test_brokenimages
{
/* protected static ChromeDriver driver; */
WebDriver driver = null;
String URL = "https://the-internet.herokuapp.com/broken_images";
public static String status = "passed";
String username = "user-name";
String access_key = "access-key";
@BeforeClass
public void testSetUp() throws MalformedURLException {
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("build", "[Java] Finding broken images on a webpage using Selenium");
capabilities.setCapability("name", "[Java] Finding broken images on a webpage using Selenium");
capabilities.setCapability("platform", "Windows 10");
capabilities.setCapability("browserName", "Chrome");
capabilities.setCapability("version","latest");
capabilities.setCapability("tunnel",false);
capabilities.setCapability("network",true);
capabilities.setCapability("console",true);
capabilities.setCapability("visual",true);
driver = new RemoteWebDriver(new URL("http://" + username + ":" + access_key + "@hub.lambdatest.com/wd/hub"),
capabilities);
System.out.println("Started session");
}
@Test(description="Approach 1: Find broken images on a web page using Selenium WebDriver", enabled=true)
protected void test_selenium_broken_images_appr_1()
{
Integer iBrokenImageCount = 0;
driver.navigate().to(URL);
driver.manage().window().maximize();
try
{
iBrokenImageCount = 0;
List image_list = driver.findElements(By.tagName("img"));
/* Print the total number of images on the page */
System.out.println("The page under test has " + image_list.size() + " images");
for (WebElement img : image_list)
{
if (img != null)
{
HttpClient client = HttpClientBuilder.create().build();
HttpGet request = new HttpGet(img.getAttribute("src"));
HttpResponse response = client.execute(request);
/* For valid images, the HttpStatus will be 200 */
if (response.getStatusLine().getStatusCode() != 200)
{
System.out.println(img.getAttribute("outerHTML") + " is broken.");
iBrokenImageCount++;
}
}
}
}
catch (Exception e)
{
e.printStackTrace();
status = "failed";
System.out.println(e.getMessage());
}
status = "passed";
System.out.println("The page " + URL + " has " + iBrokenImageCount + " broken images");
}
@Test(description="Approach 2: Find broken images on a web page using Selenium WebDriver", enabled = true)
protected void test_selenium_broken_images_appr_2()
{
Integer iBrokenImageCount = 0;
driver.navigate().to(URL);
driver.manage().window().maximize();
try
{
iBrokenImageCount = 0;
List image_list = driver.findElements(By.tagName("img"));
/* Print the total number of images on the page */
System.out.println("The page under test has " + image_list.size() + " images");
for (WebElement img : image_list)
{
if (img != null)
{
if (img.getAttribute("naturalWidth").equals("0"))
{
System.out.println(img.getAttribute("outerHTML") + " is broken.");
iBrokenImageCount++;
}
}
}
}
catch (Exception e)
{
e.printStackTrace();
status = "failed";
System.out.println(e.getMessage());
}
status = "passed";
System.out.println("The page " + URL + " has " + iBrokenImageCount + " broken images");
}
@AfterClass
public void tearDown()
{
if (driver != null) {
((JavascriptExecutor) driver).executeScript("lambda-status=" + status);
driver.quit();
}
}
}
Прохождение кода [подход – 1]
1. Импортировать необходимые пакеты
Библиотека Apache HTTPClient используется для обработки HTTP -запросов. Чтобы использовать последнюю версию библиотеки httpclient, Зависимость Для библиотеки добавляется в файл сборки Maven (pom.xml).
org.apache.httpcomponentshttpclient4.5.13
Чтобы найти разбитые изображения на тестируемой странице, библиотека HTTPClient используется для проверки кодов состояния изображений, присутствующих на странице. Необходимые пакеты импортируются таким образом, чтобы его методы могли использоваться в реализации.
Метод Findelements в селене используется для получения деталей всех изображений, присутствующих на странице. Изображения расположены с использованием Tagname ‘img.’
Изображения размещены в списке, который будет дальше, чтобы найти разбитые изображения на странице.
List image_list = driver.findElements(By.tagName("img"));
System.out.println("The page under test has " + image_list.size() + " images");
3. Создайте новый экземпляр HttpClient
Класс httpclient предлагает API, который в основном состоит из трех основных классов – httpclient, httprequest и httpresponse. Httpresponse описывает результат вызова httprequest. Для чтения тела ответа мы создаем новый экземпляр HTTPClient и запросим объекты. Новый экземпляр класса создается с помощью метода Build () класса httpclientbuilder.
Closablehttpclient Предоставляет метод выполнения для отправки и получения данных. Метод выполнения использует параметр типа httpurirequest, который имеет много подклассов, включая Httpget и Httppost.
Сначала мы создаем новый объект httpget с httpurirequest, установленным на пути, полученным путем чтения атрибута SRC в IMG WebElement.
HttpGet request = new HttpGet(img.getAttribute("src"));
Например – getAttribute («src») для изображения “Fork me on github” вернет/iimg/forkme_right_green_007200.png.
5. Получить объект ответа
Метод выполнения выполняет HTTP -запрос, используя контекст по умолчанию. Он возвращает тело ответа (то есть httpresponse).
HttpResponse response = client.execute(request);
6. Прочитайте код состояния
Метод GetStatusline класса HTTPResponse получает строку состояния ответа [полученная с шага (5)]. Метод GetStatuscode возвращает Httpstatus в целочисленном формате. Код ответа 200 (SC_OK) означает, что HTTP -запрос был успешно выполнен.
if (response.getStatusLine().getStatusCode() != 200)
{
System.out.println(img.getAttribute("outerHTML") + " is broken.");
iBrokenImageCount++;
}
Если httpstatus составляет 200, соответствующее изображение не сломано, тогда как httpstatus для сломанного изображения составляет 404. Шаги (3) через ‘(6) повторяются для всех записей WebElement в списке изображений. Атрибут OUTERHTML для сломанных изображений напечатан для справки на терминале.
Прохождение кода [подход – 2]
1. Найдите все изображения на странице
Подобно шагу (2) в подходе – 1, метод Findelements в селене используется для получения деталей изображений, присутствующих на изображении. Tagname IMG используется с методом Findelements для достижения того же самого.
Атрибут естественной ширины WebElements, идентифицированных на шаге (1), читается. Для сломанных изображений естественная ширина будет нулевой, а для нормальных изображений она не нулевая.
if (img.getAttribute("naturalWidth").equals("0"))
{
System.out.println(img.getAttribute("outerHTML") + " is broken.");
iBrokenImageCount++;
}
Шаг (2) повторяется для всех веб -размеров в списке Image_list, который был получен на шаге (1). Переменная ibrokenimagecount указывает количество сломанных изображений на странице.
Исполнение
Ниже показаны снимки подхода – 1 и подход – 2. Как и ожидалось, мы видим, что на тестируемой веб -странице есть два разбитых изображения.
Как найти сломанные изображения с помощью Selenium Python?
Реализация
Имя файла – test_brokenimages.py
import requests
import urllib3
import pytest
from requests.exceptions import MissingSchema, InvalidSchema, InvalidURL
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
capabilities = {
"build": "[Python] Finding broken images on a webpage using Selenium",
"name": "[Python] Finding broken images on a webpage using Selenium",
"platform": "Windows 10",
"browserName": "Chrome",
"version": "latest"
}
user_name = "user-name"
app_key = "access-key"
URL = "https://the-internet.herokuapp.com/broken_images"
iBrokenImageCount = 0
urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
remote_url = "http://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub"
driver = webdriver.Remote(command_executor=remote_url, desired_capabilities=capabilities)
driver.maximize_window()
driver.get(URL)
image_list = driver.find_elements(By.TAG_NAME, "img")
print('Total number of images on '+ URL + ' are ' + str(len(image_list)))
for img in image_list:
try:
response = requests.get(img.get_attribute('src'), stream=True)
if (response.status_code != 200):
print(img.get_attribute('outerHTML') + " is broken.")
iBrokenImageCount = (iBrokenImageCount + 1)
except requests.exceptions.MissingSchema:
print("Encountered MissingSchema Exception")
except requests.exceptions.InvalidSchema:
print("Encountered InvalidSchema Exception")
except:
print("Encountered Some other Exception")
driver.quit()
print('The page ' + URL + ' has ' + str(iBrokenImageCount) + ' broken images')
Прохождение кода
1. Импортные модули
Модуль запросов импортируется таким образом, чтобы мы могли отправлять HTTP -запросы на целевой URL. В случае, если модуль запросов не установлен на машине DEV, запустите запросы на установку PIP Command для установки.
import requests
import urllib3
from requests.exceptions import MissingSchema, InvalidSchema, InvalidURL
2. Получите подробности об изображениях, представленных на странице
Вебели с тегом «IMG» читаются с использованием метода find_elements в Selenium.
Метод get () в модуле запроса отправляет запрос GET на URL, переданный ему. Атрибут SRC в теге IMG содержит местоположение изображения на сервере. Это передается методу запроса. Поток в методе get () устанавливается на TRUE, поэтому ответ на HTTP -запрос немедленно загружается.
Взамен мы получаем запросы. Объект response (), который содержит ответ сервера на HTTP -запрос.
4. Прочитайте код состояния из объекта ответа
Свойство status_code в запросах. Объект ответа () указывает состояние HTTP -запроса. Код состояния HTTP 200 означает, что изображение не сломано, тогда как изображение нарушается, если код состояния составляет 404.
if (response.status_code != 200):
print(img.get_attribute('outerHTML') + " is broken.")
iBrokenImageCount = (iBrokenImageCount + 1)
Повторите шаги (3) через (4) для всех записей WebElement в списке (то есть, image_list).
Исполнение
Мы запускаем файл, запустив команду Python на терминале. Как показано ниже, на тестируемой странице были обнаружены два разбитых изображения.
Как найти сломанные изображения, используя селен C#?
Реализация
Имя файла – BrokenImageTest.cs
using OpenQA.Selenium;
using OpenQA.Selenium.Remote;
using OpenQA.Selenium.Chrome;
using NUnit.Framework;
using System.Threading;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using OpenQA.Selenium.Remote;
using System;
using System.Threading;
using System.Net.Http;
using System.Threading.Tasks;
namespace TestBrokenImages
{
[TestFixture("chrome", "latest", "Windows 10")]
public class TestBrokenImages
{
private String browser;
private String version;
private String os;
IWebDriver driver;
public TestBrokenImages(String browser, String version, String os)
{
this.browser = browser;
this.version = version;
this.os = os;
}
[SetUp]
public void Init()
{
String username = "user-name";
String accesskey = "access-key";
String gridURL = "@hub.lambdatest.com/wd/hub";
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.SetCapability("user", username);
capabilities.SetCapability("accessKey", accesskey);
capabilities.SetCapability("browserName", browser);
capabilities.SetCapability("version", version);
capabilities.SetCapability("platform", os);
capabilities.SetCapability("build", "[C#] Finding broken images on a webpage using Selenium");
capabilities.SetCapability("name", "[C#] Finding broken images on a webpage using Selenium");
driver = new RemoteWebDriver(new Uri("https://" + username + ":" + accesskey + gridURL), capabilities, TimeSpan.FromSeconds(600));
System.Threading.Thread.Sleep(2000);
}
[Test]
public async Task LT_Broken_Images_Test()
{
int broken_images = 0;
String test_url = "https://the-internet.herokuapp.com/broken_images";
driver.Url = test_url;
using var client = new HttpClient();
var image_list = driver.FindElements(By.TagName("img"));
/* Loop through all the images */
foreach (var img in image_list)
{
try
{
/* Get the URI */
HttpResponseMessage response = await client.GetAsync(img.GetAttribute("src"));
/* Reference - https://docs.microsoft.com/en-us/dotnet/api/system.net.httpwebresponse.statuscode?view=netcore-3.1 */
if (response.StatusCode == HttpStatusCode.OK)
{
System.Console.WriteLine("Image at the link " + img.GetAttribute("src") + " is OK, status is "
+ response.StatusCode);
}
else
{
System.Console.WriteLine("Image at the link " + img.GetAttribute("src") + " is Broken, status is "
+ response.StatusCode);
broken_images++;
}
}
catch (Exception ex)
{
if ((ex is ArgumentNullException) ||
(ex is NotSupportedException))
{
System.Console.WriteLine("Exception occured\n");
}
}
}
/* Perform wait to check the output */
System.Threading.Thread.Sleep(2000);
Console.WriteLine("\nThe page " + test_url + " has " + broken_images + " broken images");
}
[TearDown]
public void Cleanup()
{
if (driver != null)
driver.Quit();
}
}
}
Httpclient Класс предоставляет базовый класс, используемый для отправки HTTP -запросов и получения соответствующего ответа из ресурса, идентифицированного URI.
Рекомендуется использовать httpclient вместо httpwebrequest (системы. Сеть. Httpwebrequest -пространство имен) для обнаружения сломанных изображений с использованием селена Webdriver.
using System.Net.Http;
using System.Threading.Tasks;
2. Создайте метод, который возвращает асинхронную задачу
Метод GetAsync используется для отправки запроса GET в указанный URI в качестве асинхронной операции.
[Test]
public async Task LT_Broken_Images_Test()
{
3. Создайте экземпляр HttpClient
Создан экземпляр HTTPClient. Методы, предлагаемые классом HTTPClient, будут дополнительно использованы для получения деталей изображений, представленных на тестируемой странице.
using var client = new HttpClient();
4. Прочитайте изображения, представленные на странице
Детали изображений, присутствующих на странице, извлекаются путем поиска веб -размеров с свойством Tagname ‘img’.
var image_list = driver.FindElements(By.TagName("img"));
Метод Findelements возвращает список, который является итерацией, чтобы проверить разбитые изображения на странице.
5. Итерация через список изображений, чтобы проверить разбитые изображения
Метод GetAsync в классе httpclient отправляет асинхронную getRequest в соответствующий URI. Значение атрибута «SRC» якоря, собранного с использованием метода getAttribute, передается в методе GetAsync.
foreach (var img in image_list)
{
try
{
/* Get the URI */
HttpResponseMessage response=await client.GetAsync(img.GetAttribute("src"));
6. Прочитайте код HTTPStatus
По завершении асинхронной операции на шаге (5), Httpresponsemessage возвращается. Ответ включает в себя данные и код состояния. Код ответа httpstatuscode. OK (то есть 200) указывает, что изображение было расположено на сервере, и оно было успешно прочитано. Мы держим счетчик количества сломанных изображений на странице.
if (response.StatusCode == HttpStatusCode.OK)
{
System.Console.WriteLine("Image at the link " + img.GetAttribute("src") + " is OK, status is "+ response.StatusCode);
}
else
{
System.Console.WriteLine("Image at the link " + img.GetAttribute("src") + " is Broken, status is "+ response.StatusCode);
broken_images++;
}
Исключения NotSupportedException и ArgementNullexception обрабатываются как часть обработки исключений.
catch (Exception ex)
{
if ((ex is ArgumentNullException) || (ex is NotSupportedException))
{
System.Console.WriteLine("Exception occured\n");
}
}
Исполнение
Вот снимок выполнения, который указывает на то, что на тестируемой странице присутствовало два разбитых изображения.
Как найти сломанные изображения с помощью Selenium PHP?
"[PHP] Finding broken images on a webpage using Selenium",
"name" => "[PHP] Finding broken images on a webpage using Selenium",
"platform" => "macOS High Sierra",
"browserName" => "MicrosoftEdge",
"version" => "latest"
);
return $capabilities;
}
public function setUp(): void
{
$capabilities = $this->build_browser_capabilities();
/* Download the Selenium Server 3.141.59 from
https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar
*/
$url = "https://". $GLOBALS['LT_USERNAME'] .":" . $GLOBALS['LT_APPKEY'] ."@hub.lambdatest.com/wd/hub";
$this->webDriver = RemoteWebDriver::create($url, $capabilities);
}
public function tearDown(): void
{
$this->webDriver->quit();
}
/*
* @test
*/
public function test_searchbrokenimages()
{
$test_url = "https://the-internet.herokuapp.com/broken_images";
# For site with absolute path
# $test_url = "https://www.lambdatest.com/blog";
# End - For site with absolute path
$base_url = "https://the-internet.herokuapp.com/";
$driver = $this->webDriver;
$driver->get($test_url);
$this->assertEquals("The Internet", $driver->getTitle());
# For site with absolute path
# $this->assertEquals("LambdaTest | A Cross Browser Testing Blog", $driver->getTitle());
# End - For site with absolute path
$driver->manage()->window()->maximize();
$iBrokenImageCount = 0;
/* file_get_contents is used to get the page's HTML source */
$html = file_get_contents($test_url);
/* Instantiate the DOMDocument class */
$htmlDom = new DOMDocument;
/* The HTML of the page is parsed using DOMDocument::loadHTML */
@$htmlDom->loadHTML($html);
/* Extract the links from the page */
$image_list = $htmlDom->getElementsByTagName('img');
/* The DOMNodeList object is traversed to check for its validity */
foreach($image_list as $img)
{
$img_path = $img->getAttribute('src');
# Convert relative path to absolute path
$search_path = "/" . $img_path;
$abs_path = relative2absolute($search_path, $base_url);
# When absolute path is used for fetching the images
# For site with absolute path
# $abs_path = $img_path;
# For site with absolute path
$response = @get_headers($abs_path);
if (preg_match("|200|", $response[0]))
{
print($abs_path . " is not broken\n");
}
else
{
print($abs_path . " is broken\n");
$iBrokenImageCount = $iBrokenImageCount + 1;
}
}
print("\nThe page " . $test_url . " has " . $iBrokenImageCount . " broken images");
}
}
?>
0; $abs_path=preg_replace($repl, '/', $abs_path, -1, $counter)) {}
/* absolute URL is ready! */
return $scheme.'://'.$abs_path;
}
?>
Прохождение кода
Чтобы найти разбитые изображения с Selenium PHP, мы будем использовать структуру PhpUnit с селеном. Обратитесь к нашему Подробный учебник Selenium PHP Для быстрого резюме на селене с фпунитом.
Запустите Command Composer Tress на терминале для установки пакетов, упомянутых в Composer.json.
Вот общее прохождение исходного кода:
1. Прочтите источник страницы
HTML Источник тестирования страницы (т.е. https://the-internet.herokuapp.com/ ) читается с использованием функции file_get_contents в php. Источник HTML читается в локальной строковой переменной $ html.
$html = file_get_contents($test_url);
2. Создать воспитание класса Domdocument
Весь документ HTML представлен в классе DomDocument. Это также служит корнем дерева источника.
$htmlDom = new DOMDocument;
3. Parse HTML -источник страницы
Domdocument:: loadhtml () Функция в PHP анализирует источник HTML, доступный в строковой переменной $ html. Функция возвращает объект Domdocument при успешном выполнении.
@$htmlDom->loadHTML($html);
4. Извлеките изображения, используя тег «IMG»
Записи в теге HTML читаются с использованием метода GetElementsByTagName класса DomDocument. Поскольку мы ищем разбитые изображения, поиск основан на теге из проанализированного источника HTML.
Возьмем, как Lambdatest Blog Case, изображения в блогах читаются с использованием абсолютного пути изображений на сервере. Ниже показан пример того, как абсолютный путь изображения используется в атрибуте «SRC» тега :
Мы создали новую функцию Onterbate2abSolute (), которая принимает следующие аргументы – относительный путь, полученный из атрибута и корневого документа тестирования URL -адреса.
Если в атрибуте используется абсолютный путь, абсолютный путь и относительный путь будут одинаковыми. В таком сценарии шаг (6) становится необязательным.
Мы придумали относительную функцию 2Absolute при поддержке сообщества StackOverflow ☺.
7. Преобразовать относительный путь в абсолютный путь
Функция get_headers () используется для извлечения всех заголовков, отправленных сервером в ответ на HTTP -запрос. Для сломанного изображения код состояния HTTP составляет 404, тогда как код состояния составляет 200, если изображение присутствует на сервере.
Функция preg_match () в PHP выполняет нечувствительный к случаю поиск «200» (код состояния HTTP, если запрос успешно выполнен) в коде ответа. Локальная переменная ibrokenimagecount увеличивается, когда на странице присутствует сломанное изображение.
$response = @get_headers($abs_path);
if (preg_match("|200|", $response[0]))
{
print($abs_path . " is not broken\n");
}
else
{
print($abs_path . " is broken\n");
$iBrokenImageCount = $iBrokenImageCount + 1;
}
Исполнение
Чтобы запустить тест, который использует структуру Phpunit, запустите следующую команду из корневой папки:
Мы провели тот же тест против Lambdatest Blog После минимальных изменений в Кодексе под комментарием «для сайта с абсолютным путем».
Сайт использует абсолютный путь в атрибут тега IMG. Как видно ниже, в блоге Lambdatest есть нулевые разбитые изображения.
Это все люди
Как и разбитые ссылки на веб -страницах, разбитые изображения также могут препятствовать общему пользовательскому опыту. Это также создает негативное влияние на рейтинг поиска, тем самым препятствуя вашим усилиям SEO. Вместо того, чтобы полагаться на сторонние инструменты, где вы ставите на карту конфиденциальность и данные, вы должны найти разбитые изображения с помощью Selenium Webdriver. В этом учебном пособии Selenium мы посмотрели, как найти сломанные изображения, используя селенс Webdriver с Java, Python, C#и PHP -языками.
Какую стратегию вы соблюдаете для поиска сломанных изображений на веб -странице (ы)? Оставьте свои мысли в разделе комментариев …
; Путь Image.jpg относительно корня. Если URL веб -сайта https://www.someexample.com , относительный путь изображения (image.jpg) будет соответствовать https://www.someexample.com/assets/img/image.jpg