improved recording of mouse over locators

Author: corevo

packages/selenium-ide/src/content/record.js

@@ -534,8 +534,7 @@ Recorder.addEventHandler(
 let nowNode = 0,
   mouseoverLocator,
   nodeInsertedLocator,
-  nodeAttrChange,
-  nodeAttrChangeTimeout
+  nodeInsertedAttrChange
 Recorder.addEventHandler(
   'mouseOver',
   'mouseover',
@@ -546,14 +545,11 @@ Recorder.addEventHandler(
       let clickable = findClickableElement(event.target)
       if (clickable) {
         nodeInsertedLocator = event.target
+        nodeInsertedAttrChange = locatorBuilders.buildAll(event.target)
         setTimeout(() => {
           nodeInsertedLocator = undefined
+          nodeInsertedAttrChange = undefined
         }, 500)
-
-        nodeAttrChange = locatorBuilders.buildAll(event.target)
-        nodeAttrChangeTimeout = setTimeout(() => {
-          nodeAttrChange = undefined
-        }, 10)
       }
       //drop target overlapping
       if (mouseoverQ) {
@@ -629,9 +625,10 @@ Recorder.addMutationObserver(
         nodeInsertedLocator = undefined
       }
       if (nodeInsertedLocator) {
-        record('mouseOver', locatorBuilders.buildAll(nodeInsertedLocator), '')
+        record('mouseOver', nodeInsertedAttrChange, '')
         mouseoutLocator = nodeInsertedLocator
         nodeInsertedLocator = undefined
+        nodeInsertedAttrChange = undefined
         mouseoverLocator = undefined
       }
     }

tests/static/mouse/out.html

@@ -0,0 +1,27 @@
+<div id="cont" style="background: blue;width: 500px;height: 500px;" onclick="javascript:void(0)">
+</div>
+
+<script>
+    const cont = document.getElementById('cont')
+    const btn = document.createElement('button')
+    btn.innerText = 'click me'
+    let hasChild = false
+    document.body.addEventListener('mousemove', () => {
+    })
+    cont.addEventListener('mouseover', () => {
+        console.log('over')
+        if (!hasChild) {
+            cont.className = 'kaki'
+            cont.appendChild(btn)
+            hasChild = true
+        }
+    })
+    cont.addEventListener('mouseout', () => {
+        console.log('out')
+        if (hasChild) {
+            cont.className = ''
+            cont.removeChild(btn)
+            hasChild = false
+        }
+    })
+</script>