The Issue
Validating that an image works is just as important as validating text or a link; having something wrong in your UI is the most immediately noticeable error from a user standpoint. However, we can easily add image validation into our test automation. There are a variety of Watir Webdriver and Selenium commands that let us verify various image properties.
The Answer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# is image loaded? browser.image(:src => "img.gif").loaded? # height browser.image(:src => "img.gif").height # width browser.image(:src => "img.gif").width # click browser.image(:src => "img.gif").click # click 1st image browser.images[0].click |
These Watir Webdriver commands provide a variety of interaction for validating images, which can be utilized in a multitude of ways depending on your test cases.
The Code
Lets use these commands to take a look at an image on the 3Qi Labs website:
|
1 2 3 4 5 6 7 |
#imageinfo.rb require 'rubygems' require 'watir-webdriver' browser = Watir::Browser.new :chrome browser.goto "3qilabs.com" browser.image(:src,"https://3qilabs.com/wp-content/themes/cleanlab-child/customs_images/banner_image.png").loaded? puts "Image Width: #{browser.image(:src,"https://3qilabs.com/wp-content/themes/cleanlab-child/customs_images/banner_image.png").width}" puts "Image Height:#(browser.image(:src,"https://3qilabs.com/wp-content/themes/cleanlab-child/customs_images/banner_image.png").height}" |
The Result
We can save the file (imageinfo.rb) and run it from the command line, with the following result:
- Browser opens
- Browser navigates to the 3Qi Labs homepage
- Validates if image has loaded
- Validates image width
- Validates image height
The Takeaway
As you can see, there are a multitude of ways to validate an image using Watir Webdriver. Ensuring your size dimensions are consistent with expected results is key to validating the UI of your site; even one incorrectly formatted image can throw off the design of an entire page.