How to Test for Broken Images
Intro
Selenium is built to mimic human action (e.g., clicking, typing, dragging, dropping, etc.). So how do you use it to test for broken images?
A Solution
Out of the box, Selenium is not equipped to handle this. But regardless, there are several ways to accomplish this. We can use...
- an HTTP library
- JavaScript
- a proxy server, or the network features of WebDriver BiDi, to watch the responses of the images as the page loads
Let's look at an example of the first two.
Example
Our example page from
the-internet has a few images, and two of them are broken on purpose
(asdf.jpg and hjkl.jpg). So our tests check that they find exactly those two.
In both tests we load the page and find all the images on it.
- With an HTTP library: for each image, we perform a
GETrequest for its URL (thesrcof the image) and check the response status code. The images that don't return a200are broken. There are additional requests being made, but it doesn't need any extra setup. - With JavaScript: for each image, we ask the browser if it finished loading and has a width (an image that failed
to load has a
naturalWidthof0). This is the leanest approach since it requires no additional setup or extra requests.
Expected Behavior
- Open the browser
- Find all images on the page
- Iterate through each image, and check it with an HTTP request (first test) or JavaScript (second test)
- Store the images that fail the check in a collection
- Assert that the collection has the broken images we expect
- Close the browser
Summary
Your circumstance may vary, so choose the approach that works best for you and your team.
A big thanks to Brian Goad for the JavaScript solution and pointing me towards the StackOverflow post where he first came across this.
Happy Testing!
Authors
