Selenium WebDriver拖放處理


在本節中,您將學習如何在Selenium WebDriver中執行像拖放這樣的複雜操作。

在繼續本節之前,先了解一些有關拖放操作的概念。

Selenium WebDriver拖放操作
要執行複雜的使用者互動,例如拖放,在Selenium WebDriver中有一個Actions類。 使用Actions類,首先構建一系列複合事件,然後使用Action(一個代表單個使用者互動的介面)執行它。 在這裡使用的Actions類的一些方法是 -

  • clickAndHold(WebElement element) - 單擊中間的Web元素(不釋放)。
  • moveToElement(WebElement element) - 將滑鼠指標移動到web元素的中間而不單擊。
  • release(WebElement element) - 釋放左鍵單擊(處於按下狀態)。
  • build() - 生成複合動作

讓我們考慮一個測試用例,將自動化以下場景:

注:有關檔案 - 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程式碼。

按照下面給出的步驟找到範例網頁上的下拉式選單。

它將啟動一個視窗,其中包含易百教學的圖示涉及的特定程式碼。

記下它的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瀏覽器並自動執行所有測試方案。可以看到易百教學的圖示將自動放入文字框中。