Selenium網站自動化測試如何模擬 DragAndDrop動作

Selenium網站自動化測試如何模擬 DragAndDrop動作

這篇文章主要說明如何利用 selenium來模擬滑鼠的 DrapAndDrop的動作。

要達到這樣的動作有三個方法。最後提供一個可執行的完整的 Java程式範例。

測試情境

http://tutorials.jenkov.com/html5/drag-and-drop.html

例如這個網站，下列的 HTML左邊的圖樣，Drag and Drop 到右邊綠色的區域。

移動完之後，最右邊會顯示 dragstart = 1.  dragend = 1

Selenium程式說明

要模擬 Drag and Drop 有三個方法可以達到。
方法一：這個例子source為最左邊的HTML5圖示。Target為綠色區域。

方法二：模擬滑鼠的組合鍵。

按右鍵 + 移動到目標區 + 釋放

方法三：利用座標 offset 的方式移動

這三個方法比較簡單而且比較直覺的是方法一。直接給予要移動的 Web Element 與目標區域 WebElement。

Java完整程式範例

[pastacode lang=”java” message=”Selenium DragAndDrop” highlight=”” provider=”manual”]

package mySelenium;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.By;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import static org.junit.Assert.*;

public class DragDropTest2 {
	
	private WebDriver driver;
	private StringBuffer verificationErrors = new StringBuffer();
	
	@Before
	public void setUp()
	{
		driver = new FirefoxDriver();
	}

	@Test
	public void testDragDrop() throws InterruptedException {
		
		driver.get("http://tutorials.jenkov.com/html5/drag-and-drop.html");
		driver.manage().window().maximize();
		WebElement source = driver.findElement(By.xpath(".//*[@id='draggable1']"));
		WebElement target = driver.findElement(By.xpath(".//*[@id='dropZone1']"));

		
		 Actions builder = new Actions(driver);
		//Method 1
		builder.dragAndDrop(source, target).build().perform();
		
		// method 2
		/*Action dragAndDrop = builder.clickAndHold(source)
			       .moveToElement(target)
			       .release(target)
			       .build();
		dragAndDrop.perform();*/
		
        //method 3
		//builder.dragAndDropBy(source, 300, 0).perform();
				
		Thread.sleep(5000L);
		
		System.out.print("dragend: " + driver.findElement(By.xpath("//span[@id='dragendCount']")).getText());
		System.out.print("drop: " + driver.findElement(By.xpath("//span[@id='dropCount']")).getText());
		/*try
		{
			assertEquals("Dropped!", target.getText());
		} catch (Error e) {
			verificationErrors.append(e.toString());
		}*/
	}
	
	@After
	public void tearDown()
	{
		driver.quit();
		String verificationErrorString = verificationErrors.toString();
		if (!"".equals(verificationErrorString)) {
			fail(verificationErrorString);
		}
	}
}

[/pastacode]

Python 範例程式

[pastacode lang=”python” message=”” highlight=”” provider=”manual”]

import unittest

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains


class DragAndDropTest(unittest.TestCase):
    URL = "http://jqueryui.com/resources/demos/droppable/default.html"

    def setUp(self):
        self.driver = webdriver.Firefox()
        self.driver.get(self.URL)
        self.driver.maximize_window()

    def test_drag_and_drop(self):
        driver = self.driver

        source = driver.find_element_by_id("draggable")
        target = driver.find_element_by_id("droppable")

        ActionChains(self.driver).drag_and_drop(source, target).perform()
        self.assertEqual("Dropped!", target.text)

    def tearDown(self):
        self.driver.close()


if __name__ == "__main__":
    unittest.main(verbosity=2)

[/pastacode]