WebDriver将元素拖放到特定的目标区域

Question

使用WebDriver和Junit 4.11，我有一个滑块元素（更改组件的0％到100％的不透明度），我想单击并保持，然后释放某个点。

我可以将组件拖放到目标区域，然后通过查找x和y轴的文本框元素来更改值。但在这种情况下，我需要自动化滑块。这甚至有可能吗？

HTML代码如下滑块：

<div class="inputWrapper"> <input type="range" value="1" name="opacity" id="c409" min="0" max="1" step="0.01" class="t-textInput-A"><span class="units">%</span><div class="sliderTooltip" style="display: none; margin-left: 97px;">100%</div> </div> 

滑块当前设置为100％，但我怎么能抢元素和拖放说，例如，10％？

我已经采取了屏幕截图来说明它是什么，我试图抓住：http://screencast.com/t/YjdoFtSG

许多在此先感谢。

Answer 1

你可以试着和这些功能（我使用phpwebdriver）

/** 
    * Move the mouse by an offset of the specificed element. 
    * If no element is specified, the move is relative to the current mouse cursor. 
    * If an element is provided but no offset, the mouse will be moved to the center of the element. 
    * If the element is not visible, it will be scrolled into view. 
    * 
    * @param WebElement $element 
    * ID of the element to move to. If not specified or is null, 
    * the offset is relative to current position of the mouse. 
    * @param integer $xoffset 
    * X offset to move to, relative to the top-left corner of the element. 
    * If not specified, the mouse will move to the middle of the element. 
    * @param integer $yoffset 
    * Y offset to move to, relative to the top-left corner of the element. 
    * If not specified, the mouse will move to the middle of the element. 
    */ 
    public function moveTo($element = null, $xoffset = null, $yoffset = null) 
    { 
     $request = $this->requestURL . "/moveto"; 
     $session = $this->curlInit($request); 

     $array = explode('/', $element->requestURL);   
     $id = $array[count($array) - 1];   
     $args = array(); 
     if($element) $args['element'] = $id; 
     if($xoffset) $args['xoffset'] = intval($xoffset); 
     if($yoffset) $args['yoffset'] = intval($yoffset); 
     if(empty($args)) 
      $this->preparePOST($session, null); 
     else{ 
      $postargs = json_encode($args); 
      $this->preparePOST($session, $postargs); 
     } 
     curl_exec($session); 
    } 

    /** 
    * Click and hold the left mouse button (at the coordinates set by the last moveto command). 
    * Note that the next mouse-related command that should follow is buttonUp() . 
    * Any other mouse command (such as click() or another call to buttonDown()) will yield undefined behaviour. 
    * 
    * @param integer $button 
    * Which button, enum: {LEFT = 0, MIDDLE = 1 , RIGHT = 2}. 
    * Defaults to the left mouse button if not specified. 
    */ 
    public function buttonDown() 
    { 
     $request = $this->requestURL . "/buttondown"; 
     $session = $this->curlInit($request); 
     $this->preparePOST($session, null); 
     curl_exec($session); 
    } 
    /** 
    * Releases the mouse button previously held (where the mouse is currently at). 
    * Must be called once for every buttonDown() command issued. 
    * See the note in click and buttonDown() about implications of out-of-order commands. 
    * 
    * @param integer $button 
    * Which button, enum: {LEFT = 0, MIDDLE = 1 , RIGHT = 2}. 
    * Defaults to the left mouse button if not specified. 
    */ 
    public function buttonUp() 
    { 
     $request = $this->requestURL . "/buttonup"; 
     $session = $this->curlInit($request); 
     $this->preparePOST($session, null); 
     curl_exec($session); 
    } 

    /** 
    * Maximize the specified window if not already maximized. 
    * If the :windowHandle URL parameter is "current", the currently active window will be maximized. 
    */ 

Answer 2

在这种情况下，我一般必须通过坐标滴实验。如果您使用clickAndHold我假设你是串在一起行动，以便为第二个动作，这样做：

moveByOffset（-100，0）

或任何正确的举动大小。这会将鼠标从其当前位置（在clickAndHold之后）向左移动100px，这会拖动滑块。

Answer 3

它简单。将值发送到字段并在此字段处触发“更改”事件。 如示例浏览器执行该脚本：

arguments[0].valueAsNumber = arguments[1]; 
    var mEvent = document.createEvent("Event"); 
    mEvent.initEvent('change', true, true); 
    arguments[0].dispatchEvent(mEvent); 

• argument[0] - 输入类型=范围腹板元件
• argument[1] - 所需尺寸

注意，在Firefox和铬这个例子中的工作，但不在Internet Explorer中工作。阅读关于IE中“fireEvent”的文档。