Selenium WebDriver拖放处理

在本节中，您将学习如何在Selenium WebDriver中执行像拖放这样的复杂操作。

在继续本节之前，先了解一些有关拖放操作的概念。

Selenium WebDriver拖放操作
要执行复杂的用户交互，例如拖放，在Selenium WebDriver中有一个Actions类。 使用Actions类，首先构建一系列复合事件，然后使用Action(一个代表单个用户交互的接口)执行它。 在这里使用的Actions类的一些方法是 -

• clickAndHold(WebElement element) - 单击中间的Web元素(不释放)。
• moveToElement(WebElement element) - 将鼠标指针移动到web元素的中间而不单击。
• release(WebElement element) - 释放左键单击(处于按下状态)。
• build() - 生成复合动作

让我们考虑一个测试用例，将自动化以下场景:

• 调用Firefox浏览器
• 打开网址:http://localhost/testing.html
• 拖放文本框上的zyiz图标

注:有关文件 - testing.html 的代码在前几章节中已经有给出。

我们将逐步创建测试用例，以便您完全了解如何在WebDriver中处理拖放操作。

第1步 - 启动Eclipse IDE并打开我们在本教程前几节中创建的现有测试套件“Demo_Test”。

第2步 - 右键单击“src” 文件夹，然后从 New -> Class 创建一个新的类文件。

将类的名称命名为“Dragdrp_Test” ，然后单击“完成”按钮。

第3步 - 开始编写代码。

要调用Firefox浏览器，需要下载Gecko驱动程序并为Gecko驱动程序设置系统属性。已在本教程的前面几篇文章已经讲解过这个问题。可以参考“在Firefox浏览器上运行测试”来了解如何下载和设置Firefox驱动程序的系统属性。
以下是为Gecko驱动程序设置系统属性的示例代码:

// System Property for Gecko Driver   
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );

之后使用DesiredCapabilities类初始化Gecko Driver。
以下是使用DesiredCapabilities类初始化gecko驱动程序的示例代码。

// Initialize Gecko Driver using Desired Capabilities Class  
DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
capabilities.setCapability("marionette",true);  
WebDriver driver= new FirefoxDriver(capabilities);

结合上述两个代码块，完善启动Firefox浏览器的代码片段。

  // System Property for Gecko Driver   
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  

 // Initialize Gecko Driver using Desired Capabilities Class  
DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
capabilities.setCapability("marionette",true);  
WebDriver driver= new FirefoxDriver(capabilities);

之后需要编写代码来自动化第二个测试场景(导航到所需的URL)，以下是导航到URL的示例代码:

// Launch Website  
driver.navigate().to("http://localhost/testing.html");

到目前为止完整的代码如下所示:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.firefox.FirefoxDriver;  
import org.openqa.selenium.remote.DesiredCapabilities;  

public class Dragdrp_Test {  

    public static void main(String[] args) {  

    // System Property for Gecko Driver   
        System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  
    // Initialize Gecko Driver using Desired Capabilities Class  
            DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
            capabilities.setCapability("marionette",true);  
            WebDriver driver= new FirefoxDriver(capabilities);  

      // Launch Website  
      driver.navigate().to("http://localhost/testing.html");   

    }  
}

第4步 - 现在尝试找到找一找教程网教程 图标和文本框，以便执行拖放操作，需要定位元素涉及检查其HTML代码。

按照下面给出的步骤找到示例网页上的下拉菜单。

• 打开网址 - http://localhost/testing.html
• 右键单击找一找教程网教程的图标并选择Inspect Element。

它将启动一个窗口，其中包含找一找教程网教程的图标涉及的特定代码。

记下它的id属性值，即:sourceImage ，如下所示:

同样，检看放置图标的文本框及的特定代码。

记下它的id属性，即targetDiv，如下图所示:

第5步 - 要自动化第三和第四个测试场景，需要编写将对找一找教程网教程图标执行拖放操作的代码。

下面给出了执行拖放操作的代码片段。

//WebElement on which drag and drop operation needs to be performed  
WebElement from = driver.findElement(By.id("sourceImage"));  

//WebElement to which the above object is dropped  
WebElement to = driver.findElement(By.id("targetDiv"));  

//Creating object of Actions class to build composite actions  
Actions act = new Actions(driver);  

//Performing the drag and drop action  
act.dragAndDrop(from,to).build().perform();

因此，最终测试脚本如下所示:

import org.openqa.selenium.By;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.WebElement;  
import org.openqa.selenium.firefox.FirefoxDriver;  
import org.openqa.selenium.interactions.Actions;  
import org.openqa.selenium.remote.DesiredCapabilities;  

public class Dragdrp_Test {  

    public static void main(String[] args) {  

        // System Property for Gecko Driver   
        System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  

        // Initialize Gecko Driver using Desired Capabilities Class  
            DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
            capabilities.setCapability("marionette",true);  
            WebDriver driver= new FirefoxDriver(capabilities);  


        // Launch Website  
            driver.navigate().to("http://localhost/testing.html");   

        //WebElement on which drag and drop operation needs to be performed  
            WebElement from = driver.findElement(By.id("sourceImage"));  

        //WebElement to which the above object is dropped  
            WebElement to = driver.findElement(By.id("targetDiv"));

        //Creating object of Actions class to build composite actions  
            Actions act = new Actions(driver);  

        //Performing the drag and drop action  
            act.dragAndDrop(from,to).build().perform();   
    }  

}

第6步 - 右键单击Eclipse代码，然后选择 : Run As -> Java Application 。
执行后，上述测试脚本将启动Firefox浏览器并自动执行所有测试方案。可以看到找一找教程网教程的图标将自动放入文本框中。