Selenium对React页面鼠标弹出层的测试

问题描述

要实现鼠标指针覆盖到指定的DIV元素后会弹出一个新的层，目标要抓取弹出层的内容。

实现思路

0x1 使用selenium自身的Actionchains中的move_to_element() 到元素实现弹出层

elements = self.browser.find_element(By.CSS_SELECTOR,".more_icon")
ActionChains(self.browser).move_to_element(elements).perform()

结果：失败！
因为react本身监听鼠标动作是系统级，而selenium是使用的模拟虚拟的鼠标操作，所以react并不能监听到鼠标的移动，从而数据层上不会产生改变，所以View层不会弹出。

0x2 使用selenium的execute_script(js...)注入js语句操作DOM元素，为元素增加新的mouseover Event

self.browser.execute_script('elements = document.querySelector(\'more_icon\');'
                                'elements.dispatchEvent(new Event("mouseenter"));')

结果：失败！
因为react自身不允许对原生js对Components的Props直接操作！

0x3 使用特殊js脚本注入，实现对react的Components的操作

Github中有个react-trigger-change.js的脚本文件，可以更改react 的Input,checkbox等的状态修改。

结果：失败！
并不能修改Div的状态

0x4 直接操作系统层级的鼠标指针来实现

python中有个pyautogui的库可以实现系统级的鼠标拖拽点按等动作。
那么我们怎么确定DIV的位置呢？

• 1.目标div在页面中不固定位置的出现
  解决思路：先保存一下目标div在页面中出现的图像，然后使用selenium的截屏功能截取图像，再使用图像识别包来确定目标div在截屏图像中的坐标，把坐标传递给pyautogui移动鼠标到目标div的坐标点，激活弹出层。
  因为我的业务在下面的情况，所以这种情况仅仅是思路并未实际代码实现，但实现的难度并不大。
• 2.目标div在页面中固定位置出现
  解决思路：
  a.已知我们的目标DIV在页面中的位置是始终固定的， 那么我们首先先让selenium把窗口最大化，这样我们就固定了两个值，即目标div的x,y坐标和整个屏幕的大小。
  b.编写一个小程序来获取屏幕中div的坐标：

import pyautogui
try:
  while True:
      x, y = pyautogui.position()
         time.sleep(1)
          print(x, y)
except KeyboardInterrupt:
         print('\nExit.')

544,499

将鼠标移动到目标div上,显示出的值即实际屏幕中div的XY的值
c.selenium中增加鼠标移动并停留即可

pyautogui.moveTo(544,499,duration=1)  #duration指鼠标移动速度
time.sleep(1)

结束

至此我们终于可以获得react页面中的信息，要注意的react对鼠标移动的监听层级，selenium虽好但是还是需要一些其他的辅助手段才能获取我们需要的内容。