如何使用javascript触发悬停操作？

Question

我只想用带selenium的javascript来模拟鼠标在这个元素上的站点悬停。

#main > div > div > div.Blockreact__Block-sc-1xf18x6-0.elqhCm > div > div.fresnel-container.fresnel-greaterThanOrEqual-xl.fill-remaining-height > div > div.Blockreact__Block-sc-1xf18x6-0.Flexreact__Flex-sc-1twd32i-0.FlexColumnreact__FlexColumn-sc-1wwz3hp-0.bEcedX.jYqxGr.ksFzlZ > div.Blockreact__Block-sc-1xf18x6-0.duVYOV > div > div.PriceHistory--graph > div > div > div.recharts-wrapper > svg > g.recharts-layer.recharts-bar > g > g:nth-child(80)

我看过很多像这和这。这样的帖子，但是在这个网站上似乎什么都没有。

我试过使用这段代码，但它不能在这个站点上运行。

const mouseoverEvent = new Event('mouseover');
$('#main > div > div > div.Blockreact__Block-sc-1xf18x6-0.elqhCm > div > div.fresnel-container.fresnel-greaterThanOrEqual-xl.fill-remaining-height > div > div.Blockreact__Block-sc-1xf18x6-0.Flexreact__Flex-sc-1twd32i-0.FlexColumnreact__FlexColumn-sc-1wwz3hp-0.bEcedX.jYqxGr.ksFzlZ > div.Blockreact__Block-sc-1xf18x6-0.duVYOV > div > div.PriceHistory--graph > div > div > div.recharts-wrapper > svg > g.recharts-layer.recharts-bar > g > g:nth-child(80)').dispatchEvent(mouseoverEvent)

由于一些问题，我只能使用javascript，而不能像大多数帖子所描述的那样使用Actionchains。没有 ActionChains的任何解决方案都应该可以正常工作。

我只想获取鼠标悬停事件触发后显示的数据。它可以手动完成，也可以使用ActionChains完成，但我希望使用JS来完成。链接到屏幕截图，从图像中可以看到，在鼠标悬停在图形上之后，工具提示就会出现。我可以通过使用这段代码来模拟ActionChains的行为。

#Scroll a little bit to load all the elements
driver.execute_script("window.scrollTo(0, 500);")
 
XPath = "//*[@class='recharts-layer recharts-bar-rectangle']"
bar = driver.find_elements('xpath',XPath)[-1] #Since I want to get the latest data
ActionChains(driver).move_to_element(bar).perform()

#Now get the data
XPATH_TOOLTIP = "//div[@class='PriceHistory--tooltip']"
data = driver.find_element('xpath',XPATH_TOOLTIP).text
print(data)

我希望使用JS显示工具提示。

是否有可能模拟鼠标悬停在元素上？此外，为什么代码在某些站点上工作，而在其他站点上不工作，例如，在这?上工作。

Answer 1

这里有两种方法可以解释你的问题:-

案例1:您只希望触发“元素悬停”事件，而不关心指向自身的鼠标指针遍历元素。

案例2:您希望鼠标指针本身移动到元素所在的位置，并以这种方式(可以说是图形化的)悬停在它上面。

解决方案:-

案例1: --这是您可以使用selenium执行的JavaScript代码：

// - THIS IS FOR DEMO, TO CHECK IF ELEMENT WAS HOVERED -
element.addEventListener('mouseover', function() {
  console.log('Event triggered');
});
// - THIS IS FOR DEMO, TO CHECK IF ELEMENT WAS HOVERED -


// Selecting the Element
var element = document.querySelector('#main > div > div > div.Blockreact__Block-sc-1xf18x6-0.elqhCm > div > div.fresnel-container.fresnel-greaterThanOrEqual-xl.fill-remaining-height > div > div.Blockreact__Block-sc-1xf18x6-0.Flexreact__Flex-sc-1twd32i-0.FlexColumnreact__FlexColumn-sc-1wwz3hp-0.bEcedX.jYqxGr.ksFzlZ > div.Blockreact__Block-sc-1xf18x6-0.duVYOV > div > div.PriceHistory--graph > div > div > div.recharts-wrapper > svg > g.recharts-layer.recharts-bar > g > g:nth-child(80)');

// CREATING AN EVENT FOR HOVER
var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

// DISPATCHING THE EVENT, i.e., ACTUALLY HOVERING
element.dispatchEvent(event);

如果在执行后一切顺利，您应该会在浏览器的控制台上看到一条“事件触发”消息。

案例2:

据我所知，不使用selenium是不可能做到这一点的。正如您前面提到的，不能使用ActionChains，因此也是一个问题。

如果您不能使用ActionChains，但可以使用Selenium (我知道这不是您所要求的)，您可以使用以下逐步指南：

STEP 1: Maximise the window [Required for Step 4]

STEP 2: Get the scrollY position of the element you want to hover over (using Javascript).

STEP 3: Scroll to the element using the scrollTo method (again using Javascript) 

STEP 4: You could use an alternative to PyAutoGui (which is a python library; you can use it if you are using python) that allows you to take the screenshot of the page, and then search for the image of the element throughout the page (using the `locateOnScreen` method).

STEP 5: Once you have gotten the position on screen, you could move the cursor to that position, again using an alternative of PyAutoGui (or itself if you're using python), like in STEP 4.

最后一个答案是相当复杂的，只有当您非常绝望地以图形的方式完成任务，并且找不到更好的答案时，才应该使用:)