How to masks gif icons?

[ameyanatu]

I want to know how to mask GIF icons on the web page.

[Lakitna]

This is an old topic, I know. For future reference, this is how I solved this:

I made a keyword that uses BrowserLibrary. It takes an element locator and returns an element mask. This way, you can mask an element by it's locator. This includes the option of masking images who's src ends with .gif.

*** Settings ***
Library    Browser

*** Keywords ***
Get Element Mask From Page
    [Arguments]    ${locator}
    ${mask} =    Get BoundingBox    ${locator}
    ${mask} =    Create Dictionary
    ...  page=all
    ...  name=${locator}
    ...  type=coordinates
    ...  unit=px
    ...  &{mask}
    RETURN    ${mask}

Basic usage example that masks the <header> and <footer> elements.

*** Test Cases ***
Amazing test
    ${page_header_mask} =    Get Element Mask From Page    //header
    ${page_footer_mask} =    Get Element Mask From Page    //footer
    VAR  @{masks} =    ${page_header_mask}    ${page_footer_mask}

    Compare Images    ./screenshot_a.png    ./screenshot_b.png    mask=${masks}