search

SeleniumHQ / selenium-ide

Open Source record and playback test automation for the web.
https://selenium.dev/selenium-ide/
Apache License 2.0
2.81k stars 765 forks source link

SeleniumIDE records "mouse*" actions for JS draggable elements and can't run recorded test #729

Open evgeniy-mh opened 5 years ago

evgeniy-mh commented 5 years ago

🐛 Bug Report

SeleniumIDE records mouse down at, mouse move at, mouse up at actions for JS draggable web elements. After initial record this mouse* commands doesn't work and test fails. If user manually changes these mouse* commands to one drag and drop to object command then test works.

Side note: for HTML5 draggable web elements SeleniumIDE records drag and drop to object command as intended and test works.

To Reproduce

Try to record test for this page: You need to move "Drag me to my target" cube to "Drop here" cube and the assert text "Result: dropped".

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      padding: 0.5em;
      float: left;
      margin: 10px 10px 10px 0;
    }

    #droppable {
      width: 150px;
      height: 150px;
      padding: 0.5em;
      float: left;
      margin: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function () {
      $("#draggable").draggable();
      $("#droppable").droppable({
        drop: function (event, ui) {
          $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");

          document.getElementById("resultH").textContent = "Result: dropped";
        }
      });
    });
  </script>
</head>

<body>

  <div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
  </div>

  <div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
  </div>

  <div>
    <h1 id="resultH">Result: </h1>
  </div>

</body>

</html>

You will see that SeleniumIDE records commands:

{
      "id": "c7177d19-5710-4b84-9ac0-89be6c2aa179",
      "comment": "",
      "command": "mouseDownAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }, {
      "id": "89e7fc5a-8dae-4fc2-84cf-e433b60e45e5",
      "comment": "",
      "command": "mouseMoveAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }, {
      "id": "53436846-d7cd-48a4-b2e3-6946494f8dbc",
      "comment": "",
      "command": "mouseUpAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }

This test will not work.

In order to make this test work I changed mouse * commands to drag and drop to object command:

...
{
      "id": "875cfea4-cfad-4fa9-afcd-9dc85fb1037e",
      "comment": "",
      "command": "dragAndDropToObject",
      "target": "id=drag1",
      "targets": [],
      "value": "id=div1"
    }
...

Expected behavior

SeleniumIDE expected to record drag and drop to object command when user interacts with JS draggable web element.

Project file reproducing this issue (highly encouraged)

{
  "id": "cb7cfb7c-f8c5-4953-9265-348ee45c31c8",
  "version": "2.0",
  "name": "dragNdrop",
  "url": "http://127.0.0.1:8080/",
  "tests": [{
    "id": "82c33a78-87cf-4cfa-9ed1-e883ca46eb84",
    "name": "dnd html5",
    "commands": [{
      "id": "daab08a0-ae02-4ef2-817c-ac7c366935b8",
      "comment": "",
      "command": "open",
      "target": "http://127.0.0.1:8080/",
      "targets": [],
      "value": ""
    }, {
      "id": "3beb8504-b8bf-4a4d-b56f-17c1ceb29f12",
      "comment": "",
      "command": "setWindowSize",
      "target": "1528x812",
      "targets": [],
      "value": ""
    }, {
      "id": "c580e8fa-bc86-4b6d-84cd-9754b2302994",
      "comment": "",
      "command": "click",
      "target": "linkText=index_html5.html",
      "targets": [
        ["linkText=index_html5.html", "linkText"],
        ["css=tr:nth-child(2) a", "css:finder"],
        ["xpath=//a[contains(text(),'index_html5.html')]", "xpath:link"],
        ["xpath=//a[contains(@href, '/index_html5.html')]", "xpath:href"],
        ["xpath=//tr[2]/td[4]/a", "xpath:position"],
        ["xpath=//a[contains(.,'index_html5.html')]", "xpath:innerText"]
      ],
      "value": ""
    }, {
      "id": "875cfea4-cfad-4fa9-afcd-9dc85fb1037e",
      "comment": "",
      "command": "dragAndDropToObject",
      "target": "id=drag1",
      "targets": [],
      "value": "id=div1"
    }, {
      "id": "87c8b03d-f7df-4ccb-8d21-f8401b456943",
      "comment": "",
      "command": "assertText",
      "target": "id=resultH",
      "targets": [
        ["id=resultH", "id"],
        ["css=#resultH", "css:finder"],
        ["xpath=//h1[@id='resultH']", "xpath:attributes"],
        ["xpath=//h1", "xpath:position"],
        ["xpath=//h1[contains(.,'Result: dropped')]", "xpath:innerText"]
      ],
      "value": "Result: dropped"
    }]
  }, {
    "id": "625b143f-8730-44dc-9724-7ff118790e1f",
    "name": "dnd jquerry fixed to dnd",
    "commands": [{
      "id": "cc4678e4-c07a-4d0d-a6be-017c79002f99",
      "comment": "",
      "command": "open",
      "target": "http://127.0.0.1:8080/",
      "targets": [],
      "value": ""
    }, {
      "id": "a1b3fb78-e164-468d-b216-fab7791d475c",
      "comment": "",
      "command": "setWindowSize",
      "target": "1528x815",
      "targets": [],
      "value": ""
    }, {
      "id": "8c10a429-3391-4605-9e3a-4bc86a02b6d6",
      "comment": "",
      "command": "click",
      "target": "linkText=index jquerry.html",
      "targets": [
        ["linkText=index jquerry.html", "linkText"],
        ["css=tr:nth-child(1) a", "css:finder"],
        ["xpath=//a[contains(text(),'index jquerry.html')]", "xpath:link"],
        ["xpath=//a[contains(@href, '/index%20jquerry.html')]", "xpath:href"],
        ["xpath=//a", "xpath:position"],
        ["xpath=//a[contains(.,'index jquerry.html')]", "xpath:innerText"]
      ],
      "value": ""
    }, {
      "id": "ecec4b06-9dd1-4873-81ad-f9efbc1c54a4",
      "comment": "",
      "command": "assertText",
      "target": "id=resultH",
      "targets": [
        ["id=resultH", "id"],
        ["css=#resultH", "css:finder"],
        ["xpath=//h1[@id='resultH']", "xpath:attributes"],
        ["xpath=//h1", "xpath:position"],
        ["xpath=//h1[contains(.,'Result:')]", "xpath:innerText"]
      ],
      "value": "Result:"
    }, {
      "id": "9230fb23-0ada-4504-9d6a-3e812cfa58f0",
      "comment": "",
      "command": "dragAndDropToObject",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div[3]", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "id=droppable"
    }, {
      "id": "0ccadb01-2024-4c21-9934-60b17d85a9b1",
      "comment": "",
      "command": "click",
      "target": "css=#draggable > p",
      "targets": [
        ["css=#draggable > p", "css:finder"],
        ["xpath=//div[@id='draggable']/p", "xpath:idRelative"],
        ["xpath=//p", "xpath:position"],
        ["xpath=//p[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": ""
    }, {
      "id": "8a46d581-7743-453d-86d0-182d40e5c0d6",
      "comment": "",
      "command": "assertText",
      "target": "id=resultH",
      "targets": [
        ["id=resultH", "id"],
        ["css=#resultH", "css:finder"],
        ["xpath=//h1[@id='resultH']", "xpath:attributes"],
        ["xpath=//h1", "xpath:position"],
        ["xpath=//h1[contains(.,'Result: dropped')]", "xpath:innerText"]
      ],
      "value": "Result: dropped"
    }]
  }, {
    "id": "0bb9baeb-5b40-489a-ae26-65d1ba587b92",
    "name": "dnd jquery",
    "commands": [{
      "id": "786e0740-065b-4c0f-8c62-bd6c98c8c2d6",
      "comment": "",
      "command": "open",
      "target": "http://127.0.0.1:8080/",
      "targets": [],
      "value": ""
    }, {
      "id": "1987cabb-2908-4523-baa2-ef18559468a6",
      "comment": "",
      "command": "setWindowSize",
      "target": "1528x816",
      "targets": [],
      "value": ""
    }, {
      "id": "d1c03c46-2ff5-42fd-9159-2fccde7cea0b",
      "comment": "",
      "command": "click",
      "target": "linkText=index jquerry.html",
      "targets": [
        ["linkText=index jquerry.html", "linkText"],
        ["css=tr:nth-child(1) a", "css:finder"],
        ["xpath=//a[contains(text(),'index jquerry.html')]", "xpath:link"],
        ["xpath=//a[contains(@href, '/index%20jquerry.html')]", "xpath:href"],
        ["xpath=//a", "xpath:position"],
        ["xpath=//a[contains(.,'index jquerry.html')]", "xpath:innerText"]
      ],
      "value": ""
    }, {
      "id": "c7177d19-5710-4b84-9ac0-89be6c2aa179",
      "comment": "",
      "command": "mouseDownAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }, {
      "id": "89e7fc5a-8dae-4fc2-84cf-e433b60e45e5",
      "comment": "",
      "command": "mouseMoveAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }, {
      "id": "53436846-d7cd-48a4-b2e3-6946494f8dbc",
      "comment": "",
      "command": "mouseUpAt",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": "68,96.5625"
    }, {
      "id": "662e1e46-57cd-4051-8223-fd512e5205b6",
      "comment": "",
      "command": "click",
      "target": "id=draggable",
      "targets": [
        ["id=draggable", "id"],
        ["css=#draggable", "css:finder"],
        ["xpath=//div[@id='draggable']", "xpath:attributes"],
        ["xpath=//div", "xpath:position"],
        ["xpath=//div[contains(.,'Drag me to my target')]", "xpath:innerText"]
      ],
      "value": ""
    }, {
      "id": "896a5c61-2946-4f6c-b1fc-3fb7c2e89a7a",
      "comment": "",
      "command": "assertText",
      "target": "id=resultH",
      "targets": [
        ["id=resultH", "id"],
        ["css=#resultH", "css:finder"],
        ["xpath=//h1[@id='resultH']", "xpath:attributes"],
        ["xpath=//h1", "xpath:position"],
        ["xpath=//h1[contains(.,'Result: dropped')]", "xpath:innerText"]
      ],
      "value": "Result: dropped"
    }]
  }],
  "suites": [{
    "id": "6c3af0f0-2ce1-4b3d-9934-6c51a7397ce3",
    "name": "Default Suite",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["82c33a78-87cf-4cfa-9ed1-e883ca46eb84"]
  }],
  "urls": ["http://127.0.0.1:8080/"],
  "plugins": []
}

Environment

OS: Windows 10 x64 Selenium IDE Version: 3.9.0 Selenium SIDE Runner Version: not used Node version: not used Browser: Chrome Browser Version: 74.0.3729.169 (Official Build) (64-bit)

tourdedave commented 5 years ago

It looks like the wrong locators are getting recorded after the initial selection. #draggable is found, but not #droppable.

mouse down at, mouse move at, and mouse up at work for the example you provided if you update it with the correct locator.

Screen Shot 2019-06-23 at 15 45 28