如何拖动hover元素

我运行此网站的网站是在内部服务器上，所以我无法提供链接，但我可以发布一些单击“显示元素”时显示的相关代码

有5个元素与此相关：

• 组别1
• 学生
• move1
• 第2组
• MOVE2

此页面显示学生组，并允许用户在组之间拖动学生。 每个组都有一个移动元素。 棘手的部分是，任何给定组的移动按钮仅在用户拖动该组上的学生元素时显示，而该学生不是来自该组。

目标是将学生移至新组，然后返回原始组。

注意：学生XPath在更改组时会发生变化我无法确认，但我相信移动按钮的XPath在隐藏时不同于可见时

我目前的代码：

IWebDriver driver = (IWebDriver)FeatureContext.Current["Driver"]; Actions builder = new Actions(driver); IWebElement originalstudent = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[2]/div/div[3]/a[1]/div[1]/div")); IWebElement originalClass = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[2]/div/div[1]")); IWebElement newClass = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[3]/div[1]/div[1]")); IWebElement originalMove = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[2]/div/div[2]/div[1]/div")); IWebElement newMove = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[3]/div[1]/div[2]/div[1]/div")); builder.ClickAndHold(originalstudent); builder.MoveToElement(newClass); builder.Release(newMove); builder.Build().Perform(); IWebElement save = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[1]/div/div/button[2]")); builder.Click(save); builder.Build().Perform(); //assert group2 has 1 student and group 1 has 3 students IWebElement newstudent = driver.FindElement(By.XPath("//*[@id=\"AMTeacherApp\"]/div/div/div[1]/div/div[3]/div/div/div[2]/div[2]/div[3]/div/div[3]/a/div[1]/div")); builder.ClickAndHold(newstudent); builder.MoveToElement(originalClass); builder.Release(originalMove); builder.Click(save); builder.Build().Perform(); 

此代码不会移动任何元素，并且在尝试查找保存时失败，因为没有任何更改（假设没有任何动作，这是预期的）。

页面中的相关代码：

  
 
  
 
   
 Add group  
 
  
 ******
 
 
Group 1 | 4 Students  Student  
 
      
 
 
 
 **********
Move 
 
 
 
Copy 
 
 
  ******
   
 ************
AM2Paper S 
 
 
 
    
 
AMTest A 
 
 
 
    
 
AMTestPaper... 
 
 
 
    
 
AM2Online S 
 
 
 
   
  
 
 
Remove from Group 1 
 
 
 
  
  
 ******
 
 
Group 2 | 0 Students  Student  
 
      
 
 
 
 ************
Move 
 
 
 
Copy 
 
 
  
  
  
 
 
Remove from Group 2 
 
 
 
  
 Drag student icons into this Group  Delete this group  
  
   

星标记相关元素。 如果您有其他信息需要上下文，请与我们联系。

Answer 1

Selenium的拖放操作对HTML5不起作用，所以我使用jquery来拖动元素。

我用这些作为参考： https ： //gist.github.com/rcorreia/2362544 http://elementalselenium.com/tips/39-drag-and-drop

这就是结果：

 public void WhenAStudentIsMovedToANewGroup(string action, string student, string group) { WaitForAngular(); IWebDriver driver = (IWebDriver)FeatureContext.Current["Driver"]; /* * Load a version of jQuery that we can access */ driver.Manage().Timeouts().SetScriptTimeout(TimeSpan.FromSeconds(10)); IJavaScriptExecutor js = (IJavaScriptExecutor)driver; js.ExecuteAsyncScript(loadJQuery, jQueryUrl); string dragEntity = string.Format("[title=\"{0}\"]", student); string target = string.Format("[ui-on-drop=\"model.onMoveDrop(group)\"]:contains({0}) ~ div > div .{1}", group, action); string javaScriptString = string.Format("{0}$('{1}').simulateDragDrop({{ dropTarget: '{2}'}});", dragAndDropHelper, dragEntity, target); //Execute the drag and drop against the HTML5 js.ExecuteScript(javaScriptString); } const string dragAndDropHelper = @"(function( $ ) { $.fn.simulateDragDrop = function(options) { return this.each(function() { new $.simulateDragDrop(this, options); }); }; $.simulateDragDrop = function(elem, options) { this.options = options; this.simulateEvent(elem, options); }; $.extend($.simulateDragDrop.prototype, { simulateEvent: function(elem, options) { /*Simulating drag start*/ var type = 'dragstart'; var event = this.createEvent(type); this.dispatchEvent(elem, type, event); /*Simulating drop*/ type = 'drop'; var dropEvent = this.createEvent(type, {}); dropEvent.dataTransfer = event.dataTransfer; this.dispatchEvent($(options.dropTarget)[0], type, dropEvent); /*Simulating drag end*/ type = 'dragend'; var dragEndEvent = this.createEvent(type, {}); dragEndEvent.dataTransfer = event.dataTransfer; this.dispatchEvent(elem, type, dragEndEvent); }, createEvent: function(type) { var event = document.createEvent(""CustomEvent""); event.initCustomEvent(type, true, true, null); event.dataTransfer = { data: { }, setData: function(type, val){ this.data[type] = val; }, getData: function(type){ return this.data[type]; } }; return event; }, dispatchEvent: function(elem, type, event) { if(elem.dispatchEvent) { elem.dispatchEvent(event); }else if( elem.fireEvent ) { elem.fireEvent(""on""+type, event); } } }); })(jQuery);"; const string loadJQuery = @"(function(jqueryUrl, callback) { if (typeof jqueryUrl != 'string') { jqueryUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; } if (typeof jQuery == 'undefined') { var script = document.createElement('script'); var head = document.getElementsByTagName('head')[0]; var done = false; script.onload = script.onreadystatechange = (function() { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { done = true; script.onload = script.onreadystatechange = null; head.removeChild(script); callback(); } }); script.src = jqueryUrl; head.appendChild(script); } else { callback(); } })(arguments[0], arguments[arguments.length - 1]);";