Hovering an element using Lucky Flow

sign_out.cr

def sign_out
  visit ThatPageYouWant

  hover_el = el("@your-hover-element")
  
  # Calculate where we should move the mouse to on the page
  # here we are using the x coordinate + half of the width of the element to be hovered
  # and the same logic for the y position
  hover_el_rect = hover_el.rect

  if (hover_el_rect_x = hover_el_rect.x) && (hover_el_rect_width = hover_el_rect.width)
    move_to_x = (hover_el_rect_x + (hover_el_rect_width / 2)).to_i
  end

  if (hover_el_rect_y = hover_el_rect.y) && (hover_el_rect_height = hover_el_rect.height)
    move_to_y = (hover_el_rect_y + (hover_el_rect_height / 2)).to_i
  end

  if move_to_x && move_to_y
    # Selenium to perform the actions, need a action sequence, that is an array
    # os sequences, and then we create a single sequence, that only contains
    # our action that move the pointer to the calculated coordinates
    actions = [
      Selenium::Action.new("pointerMove", x: move_to_x, y: move_to_y)
    ]

    # I'm not sure what ID to use here, so I just used `my_id`, should use any other?
    sequence = Selenium::InputSourceActionSequence.new("pointer", "my_id", actions)

    action_sequence = Selenium::ActionSequence.new
    action_sequence << sequence

    LuckyFlow::Server::INSTANCE.session.perform_actions(action_sequence)

    # sleeping because when hover, the dropdown has an animation to appear
    # trying to click the `sign_out_button` was returning the
    # `element not interactable` error - YMMV
    sleep 0.3
  end

  sign_out_button.click
end

zz_lucky_flow_element_monkeypatch.cr

# you can add in your spec/spec_helper
class LuckyFlow::Element
  delegate rect, to: element
end

# we could also add to give a better api
delegate x, y, width, height, to: rect