Using Selenium to check for the presence of an image

I spent a little bit of time yesterday trying to figure out how to use Selenium to check for the presence or absense of a specific image used as the background of an HTML table.  It wasn’t that hard to do in the end, but I got a little tripped up trying to check for the wrong thing.  Pretty cool once I got it done, so I figured I’d share here.

What I tried to do:

At first I tried to grab the HTML text inside the TD and verify the presence of the filename of the image as text.

What I should have done all along:

What ended up working was that I knew the table row and cell in which I was expecting the image, and I had to do a “verifyElementPresent” instead. (Thanks to Dean for helping me figure that out)



The only thing I don’t like about that approach (vs. checking for text) is that I can’t do a wildcard search for the text.  I have to exactly check for the full path to the file.  So, if we decide to re-organize the directory structure and move some images to a “saltwater” and some to a “freshwater” subdirectory, the selenium test is then fragile and breaks.  But chances are the images are going to remain pretty static, so I am happy enough with this approach.

Posted in code. 6 Comments »

6 Responses to “Using Selenium to check for the presence of an image”

  1. Peabody Says:

    This isn’t testing that the image actually exists, does it? It seems that it’s just checking that the background attribute contents match what it expects.

    So, if it isn’t verifying that the image exists, restructuring the physical image folders wouldn’t break the Selenium tests. The test would only break if the page’s html was updated to reflect the changed folder structure. Right?

  2. Gayle Says:

    Right, it’s checking that the HTML has a specific background image, not checking that it exists. As with any contrived example it is, well, contrived. So let me be more specific, hopefully this will help clear it up.

    Imagine there’s a page that shows the current contents of the aquarium. It has a specific list of fish that might or might not be in the fish tank at any given time. Then, on the server there’s an “if/else” around the “td” tag that decides which image to use for the background image. Something like this PSEUDOcode:

    <% if aquarium.has_clownfish() %>
     <td background="/images/fish/clownfish.jpg" />
    <% else %>
     <td background="/images/fish/no_fish_of_this_type_icon.jpg" />
    <% end %>

    <!-- repeat this for all types of fish -->

    Then let’s say I have a Selenium test that does the following:
    1. user logs in
    2. user adds clown fish to the aquarium
    3. user navigates to page that shows contents of aquarium
    4. selenum test asserts that the “clownfish” icon *IS* present in that table cell, not the “no fish of this kind” icon. The clownfish icon better be there since the user added a clown fish in step 2.

    That’s what this is meant to test.

    So if the images folders were restructured, then the code for the “td” would change to:

    <td background="/images/fish/saltwater/clownfish.jpg" />

    Thus the Selenium test would break, because it’s so fragile that it depends on a specific folder structure. The Selenium test can of course be updated to reflect the folder structure change. I’m just saying it would be nice to check something like “assert that the background uses clownfish.jpg regardless of what folder the files is in” instead of having to know the whole path. Because… “ideally”, tests should break if FUNCTIONALITY changes, but not fail for minor stuff like restructuring your directories, if possible.

  3. Peabody Says:

    OK. I get it. I agree with what you’re saying about ideals.

    I think you could use a class attribute on the TD to get the same kind of test so Selenium would look for the class attribute instead of background… and then you wouldn’t need to change tests due to a folder restructuring.

    If you get really curious, you could use the CSS to set the background image without needing to explicitly put a background attribute on the td at all, so a folder restructuring would only require a change to the CSS and not what potentially could be multiple pages.

  4. Gayle Says:

    Yep, that’s a good point, CSS would be a good option here. Hmm, other part of our app use CSS for images, but not the part I was working with the other day. I guess that might be a good opportunity for a refactor 🙂

  5. Gadge+ Says:

    Also, if you need to check that image not only defined as element on the page, but also exists – you could send your own simple http request by image’s url and analyze it’s response.

    I’ve done the same here:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: