Forum Discussion
Hi,
> I want to check if alt tag is visible on the page
Unfortunately, there is no uniform way to do this and the answer is completely specific to your tested application.
The case is that there are a lot of tricks that can be used to make web element to be invisible on web page. For example, element can be set as hidden, or with width or/and height set to zero, or overlapped by some other element. In addition, web element can be hidden by its parent element (i.e. while all properties of web element tell that the element should be visible, element is effectively invisible because some of its parents is set to be hidden). And vise versa - all parent elements can be invisible but the element itself can be explicitly made visible. CSS styling and transformations.
To add on top of the above, modern web applications with as little attention paid to their design as possible, can combine all those techniques within one page. I.e. one element can be no visible because of width set to zero, while another element on the same page can be hidden because its parent is not visible.
So the answer to your question would be: investigate your tested application using Object Browser, talk to your developers and find out the verification approach that will work in your given case.
Thanks AlexKaras for a well thought response. I checked with the developers, there are no hidden elements on the page. All images load successfully in a happy path scenario and all have alt tags. If you can suggest something along these lines or otherwise it would be very helpful. Thanks
- AlexKaras3 years agoChampion Level 3
Hi,
Again, exact implementation depends on your given tested application, but might be like this (untested JScript pseudocode):
var arImages = page.FindAllChildren("ObjectType", "Image", 100).toArray();
var boolAltMissed = false;
var oImage;
for (var i = 0; i < arImages.length; i++) {
oImage = arImages[i];
if ("" == oImage.alt) {
boolAltMissed = true;
Log.Error("alt property is empty for image", oImage.outerHTML, pmNormal, null, oImage.Picture());
}
}
if (!boolAltMissed)
Log.Checkpoint("All images have non-empty alt property", "", pmNormal, null, page.PagePicture());
- SS013 years agoOccasional ContributorAlexKaras, thanks for the pseudocode, if I am not wrong , this code checks if any image has a missing alt tag, which can be used as a prestep. I want to check if the alt tag is displaying on the page which normally does if an image has not loaded, how to verify that? Thanks
- AlexKaras3 years agoChampion Level 3
Hi,
> this code checks if any image has a missing alt tag
Yes, correct.
> I want to check if the alt tag is displaying on the page which normally does if an image has not loaded
I would put it this way: it is browser that renders either image itself or the content of image's alt attribute (alt is an attribute of Image tag). So, unless you are checking browser itself, I would expect that the content of alt attribute will be rendered by the browser if it fails to load the image.
If for some reason you really need to check what happens when the image fails to load (for example, to check that page layout is not broken), then you need to install some proxy (ProxyMob is mentioned often in Selenium/Appium world) and setup this proxy to block all or certain image requests.
I am not sure as for subsequent validation: it is my expectation that page markup will still contain <img> tag for images that failed to load and I am not sure that it will be easy to check with TestComplete what is actually rendered on the screen - the image itself or the text from alt attribute. This is something that you will need to investigate.
Image comparison might work, but it depends on physical parameters of the hardware where the test is executed and thus is not always reliable. Third-party service like Applitools should work well, but it is commercial and requires additional licensing.
Related Content
- 9 years ago
- 8 years ago
- 2 years ago