Проверить что background-image загрузился на странице

webdriver
, , ,
#1

Нужно проверить что картинка отображается на странице.
Вот как выглядит код страницы:

<div class="myboard-background">
<div class="myboard-hero" style="background-image:url(https://myurl/cb4329e7a2d3adec617b1196056c221b75beceba.jpg);">

Автоматизация проэкта пишется на python + webdriver, но как я понял в данном случае нужно выполнять javascript.
Я пробовал

execute_script("return arguments[0].complete && typeof arguments[0].naturalWidth != \"undefined\" && arguments[0].naturalWidth > 0", ImageFile);

Этот метод работает только когда у меня есть image tag
А каким образом проверять когда тэга нет как в моем случае?

Проблема не в том чтобы получить атрибут элемента. проблема проверить, что картинка реально отображается на странице.

Проверки вида $(“img”).getAttribute(“src”).shouldHave(text(“pic_trulli.jpg”)) или что style содержит url пройдут успешно, даже если урл битый и картинка не загрузилась.

#2

я работаю с C#, но точно знаю, что селениум объект WebElement обладает методом GetAttribute:

		/// <summary>
		/// Gets the value of the specified attribute for this element.
		/// </summary>
		/// <param name="attributeName">The name of the attribute.</param>
		/// <returns>The attribute's current value. Returns a <see langword="null" /> if the
		/// value is not set.</returns>
		/// <remarks>The <see cref="M:OpenQA.Selenium.IWebElement.GetAttribute(System.String)" /> method will return the current value
		/// of the attribute, even if the value has been modified after the page has been
		/// loaded. Note that the value of the following attributes will be returned even if
		/// there is no explicit attribute on the element:
		/// <list type="table"><listheader><term>Attribute name</term><term>Value returned if not explicitly specified</term><term>Valid element types</term></listheader><item><description>checked</description><description>checked</description><description>Check Box</description></item><item><description>selected</description><description>selected</description><description>Options in Select elements</description></item><item><description>disabled</description><description>disabled</description><description>Input and other UI elements</description></item></list></remarks>
		/// <exception cref="T:OpenQA.Selenium.StaleElementReferenceException">Thrown when the target element is no longer valid in the document DOM.</exception>
		string GetAttribute(string attributeName);

найдите как этот метод называется на pythonи, потом распарсите значение атрибута

#3 
attr_value = driver.find_element_by_css_selector('.myboard-hero').get_attribute('style')

P.S. Проверять кроме картинок нечего что ли уже ?

1 лайк
#4

проблема не в том чтобы получить атрибут элемента. проблема проверить, что картинка реально отображается на странице.

Проверки вида $(“img”).getAttribute(“src”).shouldHave(text(“pic_trulli.jpg”)) или что style содержит url пройдут успешно, даже если урл битый и картинка не загрузилась.

1 лайк
#5

не пробовали как то типа


@"
String imageReadyScript = 

var selector = arguments[0];
var nodes = element.parentNode.querySelectorAll(selector);
var element = nodes[0];

return element.complete && typeof element.naturalWidth != "undefined" && element.naturalWidth > 0
"
return execute_script(imageReadyScript , bodySelector /* "/body" ? */ );
#6

попробовал - не работает с body - что то типа

 DOMException: Failed to execute 'postMessage' on 'Window': HTMLBodyElement object could not be cloned.
#7

@osipov_boris Спасибо, да вы действительно правы, проблема проверить что картинка действительно загрузилась и отображена на странице

#8

Возникла необходимость аналогичной проверки. Нашли ли тогда решение?

#9

Aleksej_Smiyan по моему сравнить кусочек скриншота страницы с возможно битым и отсутствующим бэкграундом с эталонным файлом того же места когда бэкграунд был можно приспособить для проверки есть или нет.
или вам нужно прямо готовое решение ?

1 лайк
#10

Привет, уже нету доступа к этому коду. Использовать скриншот библиотеку которая проверяла эталонное изображение с загрзившимся. Погугли должно быть достаточно много решений сейчас: snapshot comparison

1 лайк
#11

Спасибо. Все идет к тому, что придется искать решения со сравнением скриншотов.

#12

я использовал GitHub - swtestacademy/VisualAutomationImageMagickSelenium: Visual Test Automation with ImageMagick, Selenium Webdriver and AShot

1 лайк
#13

Когда-то решал подобную задачу и мне очень помогла библиотека ashot. Вот тут отличная статья о том, как ее использовать: Как заставить тесты «видеть» ошибки: элегантный способ автоматизации тестирования

1 лайк
#14

Я в свое время использовал sikuli для работы с изображениями. https://m.habr.com/ru/post/163883/

#15

Сегодня наткнулся на статью по теме на медиуме:

П.С. сорри только увидел что сверху уже поделились ссылкой :slight_smile:

1 лайк