How to hover then click a button in selenium?

Question

I have the following portion of html code in a web page

<div class="action">
   <div class="double-button">
      <button class="widget-button" title="2 people liked this post">2</button>
      <button class="widget-button like" title="like this post">
         <svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
            <use xlink:href="#far-heart"></use>
         </svg>
      </button>
   </div>
</div>

After hovering over the first button the class name change and the code transform to

<div class="action">
   <div class="double-button">
      <button class="widget-button d-hover" title="2 people liked this post">2</button>
      <button class="widget-button like" title="like this post">
         <svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
            <use xlink:href="#far-heart"></use>
         </svg>
      </button>
   </div>
</div>

After clicking over the first button a new div appear that contains people who like the post

<div class="action">
   <div class="double-button">
      <button class="widget-button d-hover" title="2 people liked this post">2</button>
      <button class="widget-button like" title="like this post">
         <svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
            <use xlink:href="#far-heart"></use>
         </svg>
      </button>
   </div>
   <div class="likes">
      <a class="trigger-user" href="/USER1" name="USER1">USER1</a>
      <a class="trigger-user" href="/USER2" name="USER2">USER2</a>
   </div>
</div>

My objective is to select all those users using selenium and python3 so I tried the following code inspired from other stack overflow questions like link1 and link2

driver = webdriver.Chrome(executable_path='./chromedriver_83') #this works fine
driver.get("link_to_the_page") #also I get the link and all contents without problems
likes_button=driver.find_elements_by_xpath("//button[@class='widget-button']") # works fine too
print(likes_button[0].text) # This gives '2', it the right value 
hover = ActionChains(driver).move_to_element(likes_button[0]) #select only the first element in the page for testing
hover.perform() # I think the hover does not work even if this is the right way 
likes_button_hover=driver.find_elements_by_xpath("//button[@class='widget-button d-hover']") # now select the hovered button to be clicked, since I hovered only one button in the whole page the result shoud be one
print(len(likes_button_hover)) # this gives 0 while it should give 1 
likes_button_hover[0].click() # this throw an error 

I get the following error which means the button did not change the class ( the hover did not work)

    raise exception_class(message, screen, stacktrace)
    selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button class="widget-button" title="2 people liked this post">2</button> is not clickable at point (537, 17). Other element would receive the click: <span>...</span>
      (Session info: chrome=83.0.4103.116)

I tried to get into the first button in many means using for example driver.find_elements_by_css_selector("[title*='people liked this post']") but in vain, I think the problem occurs in the hover but I can not see why, and of course I can not get the button and click it without hovering it first. What Am I doing wrong?

Answer 1

I can see two solution here.

1: As button (One you need to click to see all users) is always there but only class is changing. So you can do a direct click without hovering on it.

likes_button=driver.find_elements_by_xpath("//button[contains(@title,'people liked this post')]") # Used contains as number of people liked might change
print(likes_button[0].text) # This gives '2', it the right value 
likes_button[0].click() # If not working try javaScript : driver.execute_script("arguments[0].click();", likes_button[0])

2: If you really want to click only after hovering, i guess you might need to to pause method of Actionchain class. As java script might take some time to load. In your case it is trying to find button with class widget-button d-hover immediately after hovering the mouse.

   likes_button=driver.find_elements_by_xpath("//button[@class='widget-button']") 
   print(likes_button[0].text) 
   ActionChains(driver).move_to_element(likes_button[0]).pause(1).perform() 
    likes_button_hover=driver.find_elements_by_xpath("//button[@class='widget-button d-hover']")
   print(len(likes_button_hover))
   likes_button_hover[0].click()