Image Verification

8 Comments

1. Phuoc Nguyen

   June 26, 2015 at 5:07 pm

   @lanhuynh:
   Could you tell me more about image displayed correctly or not? You’re mentioning about webapp or app. I just have idea in webapp, and might be can check it by selenium( I use webdriver2).
   If you expect the image should be imageA with path=”../src/main/webapp/image/imageA.jpg” , I think we can get it from “url” or “background-image” attribute in HTML tag.
   But almost Front-end devs, I think they just let class name at tag, and store url in CSS.
   In HTML code:
   LOGO
   In CSS:
   .aui-header-logo-device {
   background-image: url(“data:image…”)

   Therefore, we should use jquery to get background/url in this case. (I refer to http://api.jquery.com/css/) .
   Any comment is welcome.
2. lanhuynh

   June 27, 2015 at 6:09 pm

   Verify the href property is a way to check if the element contains property correct or not. However, we need to verify the image is displayed as the baseline correct or incorrect. It’s not only verify the filepath, it verifies the display of the image.
3. Phuoc Nguyen

   June 28, 2015 at 8:40 am

   You’re mentioning about make sure the image is broken or not, right?
   If that, I think we can use a proxy server or an HTTP library to check status codes of the images. If they don’t load correctly, then they’ll register with a non 200 status code (likely a 404). Alternatively, we can use JavaScript.

   HTTPProxy example:
   Steps:
   1- Find all images on the page
   2- Iterate through each image, finding a match for the src attribute with a 404 status code
   3- Store the broken images in a collection
   4- Assert that the broken images collection is empty
   —————————————————————
   public static void main(String[] args) {
   try {
   driver = new FirefoxDriver();
   driver.get(“http://url.com”);
   invalidImage = 0;
   List listImages = driver.findElements(By.tagName(“img”));
   for (int i = 0; i 0″,webElement);
   ————————————————————-
   Hope this helps. If it’s still not your expected answers, I’m sorry.
4. Phuoc Nguyen

   June 28, 2015 at 8:47 am

   You’re mentioning about make sure the image is broken or not, right?
   If that, I think we can use a proxy server or an HTTP library to check status codes of the images. If they don’t load correctly, then they’ll register with a non 200 status code (likely a 404). Alternatively, we can use JavaScript.

   HTTPProxy example:
   Steps:
   1- Find all images on the page
   2- Iterate through each image, finding a match for the src attribute with a 404 status code
   3- Store the broken images in a collection
   4- Assert that the broken images collection is empty
   —————————————————————
   public static void main(String[] args) {
   try {
   driver = new FirefoxDriver();
   driver.get(“http://yoururl.com”);
   invalidImage= 0;
   List listImages = driver.findElements(By.tagName(“img”));
   for (int i = 0; i 0″, element);

   Hope this helps. If it’s still not your expected answers, I’m sorry.
5. lanhuynh

   June 28, 2015 at 9:49 am

   In general, my question is about how to capture an image on web/app and compare it with a baseline image. There is not only how the browser display a element, this is also cover if dev team use a wrong path for a control’s image, or design team provide QA and Dev team two different images.
6. hiepluong2205

   June 28, 2015 at 6:14 pm

   Up to now I’ve used 2 tools having that ability: SeeTest and Test Architect.

   See Test is amazing for mobile.
   Using a single baseline screenshot, it lets you decide how precise enough is the target screen is.
   If I set the precise rate to 80%, only the actual screenshot which is 79% or less similar to the baseline screenshot will fail the test.
   100% precise rate means the logo must match the color code instead of just the similar color.

   Test Architect at the time I used, it’s not yet support the mobile device.
   It allows you to maintain a collection of baseline screenshots, so every time you run a single test cases, TA will compare the actual screenshot it’ve got to each one of every baseline screenshots you set in the test cases. Match any, it would pass.
   Any question, let me know.
7. lanhuynh

   June 29, 2015 at 11:15 am

   Thanks Hiep, SeeTest or Test Architect is a good tool for Image comparison! Do you know any library that we can use in C#/Java language?
8. hiepluong2205

   July 1, 2015 at 9:46 am

   Unfortunately I didn’t go that deep into configuration and framework setup. You may know a Triet To, he’s not sure too, and suggest using Sikuli 😀