'Test case to test the styles associated with a button when hovering in robot framework

I am trying to achieve the below validation in robot framework.

  1. The cursor changing to a hand when button is hovered
  2. a highlighting border created around the button when hovered on the button. both happens at the same time when hovering the button.

Can anyone please help me with the keyword and respective values to be passed.

Also, I want to mention that all of these were defined inside the class like below :

for example :

and selector had all these kind of information:
.gMpiYI
    cursor: pointer;
    border-radius: 2px;
    color: #FFFFFF;
    background: #C25608;
    padding: 0.75rem 1rem;
    min-height: 2.5rem;
    font-weight: 700;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1rem;
    border: none;
  
.gMpiYI:hover, .gMpiYI:focus
    color: #FFFFFF;
    border-color: transparent;
    background: #aa4b07;
    box-shadow: 0 0 0 2px #FFFFFF,0 0 0 5px #aa4b07;
    outline: none;
My button had inspect element like this :

<button type="button" class="uitk-button Buttoncomponent__Button-uuuau7-1 gMpiYI"><span>Default</span></button>
csshoverrobotframework


Solution 1:[1]

as per your current code snippet, I can only suggest you compare the class name using the get element attribute keyword

${textToCompare}   Get Element attribute ${locator}@class
should be equal as string  ${textToCompare}   uitk-button Buttoncomponent__Button-uuuau7-1 gMpiYI:hover

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ankit Bijlwan

Related Questions