Image Verification

Report
Question

Please briefly explain why you feel this question should be reported .

Report Cancel

Hi all,

When doing automation test, sometimes we need to verify if an image is displayed correctly or not? Is there any technical/tool that supports this feature?

Thanks,
Lan Huynh

in progress 0
Automation 8 Answer 1450 views 1

Answers ( 8 )

  1. Phuoc Nguyen
    0
    June 26, 2015 at 5:07 pm

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    @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
    1
    June 27, 2015 at 6:09 pm

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    1
    June 28, 2015 at 8:40 am

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    1
    June 28, 2015 at 8:47 am

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    1
    June 28, 2015 at 9:49 am

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    2
    June 28, 2015 at 6:14 pm

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    1
    June 29, 2015 at 11:15 am

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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
    2
    July 1, 2015 at 9:46 am

    Please briefly explain why you feel this answer should be reported .

    Report Cancel
    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 :D

Leave an answer

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

lanhuynh R

About [lanhuynh]

A QA engineer who interesting in Software Development, especially in Software Testing. Willing to learn/research new technology and share knowledge with everyone.