css 如何使用javascript触发悬停动作?

dsekswqp  于 2023-04-01  发布在  Java
关注(0)|答案(1)|浏览(131)

我想模拟鼠标悬停在这个site上,只使用javascript和selenium。

#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)

我看过各种各样的帖子,比如thisthis.,但是,这个网站上似乎没有什么工作。
我尝试使用此代码,但它在网站上不起作用。

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. Link to the screenshot完成。从图像中可以看到,鼠标悬停在图形上后会出现一个工具提示。我可以使用此代码使用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显示工具提示。
是否可以模拟鼠标在元素上的悬停?还有,为什么代码在某些站点上可以工作,但在其他站点上不行,例如,在this?上可以工作

n6lpvg4x

n6lpvg4x1#

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

案例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);

如果执行后一切顺利,您应该会看到浏览器的控制台上显示“Event triggered”(事件触发)消息。

案例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.

最后一个答案相当复杂,只有当你绝望地想用图形的方式来完成任务,并且找不到更好的答案时才应该使用:)

相关问题