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

这很简单。向字段发送值并在该字段触发“更改”事件。 例如在浏览器中执行此脚本：

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

• argument[0] - 输入类型=范围网络元素
• argument[1] - 需要的尺寸

注意，此示例适用于 Firefox 和 Chrome，但不适用于 Internet Explorer。阅读有关 IE 中“fireEvent”的文档。

Answer 2

您可以尝试和试验这些功能（我使用的是 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 3

在这种情况下，我通常不得不通过坐标下降。如果您使用的是 clickAndHold，我假设您正在将操作串在一起，因此对于第二个操作，请执行以下操作：

moveByOffset(-100, 0)

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