java - Selenium 操作拖放意外导航到谷歌搜索页面

Question

我一直在尝试在下一页 https://www.seleniumeasy.com/test/drag-and-drop-demo.html 上练习拖放测试

下面是 PageObject 类的代码，只有一个方法，将列表中的元素拖放到 dropzone:

public class DragAndDropDemoPage extends Page {

    public DragAndDropDemoPage(WebDriver driver) {
        super(driver);
        navigateTo();
    }

    @Override
    public void navigateTo() {
        driver.get(Urls.DRAG_AND_DROP_PAGE_URL);
    }

    public void dragAndDropElementWithIndex(int index) {
        List<WebElement> elements = findElementsByCss("span[draggable=true]");
        new Actions(driver).dragAndDrop(elements.get(index), findElementByCss("div#mydropzone")).build().perform();
    }
}

执行此类操作后，WebDriver 最终会导航到 Google 搜索页面。搜索请求包含我一直拖动的元素的名称。

这个案例有什么问题吗？ WebDriver 是如何移动到另一个页面的？

PS: super 页面是:

public abstract class Page {
    WebDriver driver;

    public Page(WebDriver driver) {
        this.driver = driver;
    }

    public abstract void navigateTo();

    protected WebElement findElementByCss(String cssSelector) {
        return driver.findElement(By.cssSelector(cssSelector));
    }

    protected List<WebElement> findElementsByCss(String cssSelector) {
        return driver.findElements(By.cssSelector(cssSelector));
    }

    protected WebElement findByXpath(String xpath) {
        return driver.findElement(By.xpath(xpath));
    }
}

Answer 1

根据 HTML，您已共享您想要的 WebElement DragAndDrop() 包含属性draggable=true

<小时/>

可拖动

draggable是一个属性，指示是否可以使用 native 浏览器行为或 HTML 拖放 API 来拖动元素。 draggable可以有以下值:

• true:元素可以拖动。
• false:元素无法拖动。

Note: This attribute is enumerated and not Boolean. A value of true or false is mandatory, and shorthand like <img draggable> is forbidden. The correct usage is <img draggable="false">.

如果未设置此属性，则其默认值为 auto这意味着拖动行为是默认的浏览器行为:只能拖动文本选择、图像和链接。对于其他元素，事件 ondragstart必须设置拖放才能工作。

<小时/>

原生 HTML5 拖放

Eric Bidelman在文章中Native HTML5 Drag and Drop如上所述，使对象可拖动很简单，因为您只需设置 draggable=true要使其可移动的元素上的 属性。举个例子:

<div id="cols">
  <div class="col" draggable="true"><header>X</header></div>
  <div class="col" draggable="true"><header>Y</header></div>
  <div class="col" draggable="true"><header>Z</header></div>
</div>

要使其他类型的内容可拖动，您可以利用 HTML5 DnD API。然而，使用 CSS3，您可以将标记修饰为列，并添加光标，为用户提供一个视觉指示器，表明某些内容是可移动的，但大多数浏览器会创建被拖动内容的重影图像，并且 draggable 不会执行任何操作。某些浏览器，特别是 FF 会要求一些 data be sent在拖动操作中。

此外，Remy Sharp在文章中Dragging Anything提到:

HTML 5 规范表示它应该像将以下属性添加到相关元素的标记中一样简单:

draggable="true"

但是，这对于 Safari 或 Firefox 并不完全有效。对于 Safari，您需要向元素添加以下样式:

[draggable=true] {
  -khtml-user-drag: element;
}

这将在 Safari 中开始工作，当您拖动它时，它将使用 dataTransfer 对象设置一个默认的空值。但是，Firefox 不允许您拖动元素，除非您手动设置一些数据。

<小时/>

解决方案

为了解决这个问题，我们需要一个 Dragstart 事件处理程序，并且我们将为其提供一些用于拖动的数据:

var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(dragItems[i], 'dragstart', function (event) {
    // store the ID of the element, and collect it on the drop later on
    event.dataTransfer.setData('Text', this.id);
  });
}

<小时/>

引用文献

一些引用:

• drag and drop anything 的工作演示(source code)
• Drag and Drop 的工作示例