วิธีลากและวาง Selenium (ตัวอย่าง)

ลากและวางในเซเลเนียม

เว็บแอปพลิเคชันบางตัวมีฟังก์ชันในการลากองค์ประกอบเว็บและวางลงในพื้นที่หรือองค์ประกอบที่กำหนด เราสามารถลากและวางองค์ประกอบดังกล่าวโดยอัตโนมัติโดยใช้ Selenium เว็บไดรเวอร์

ลากและวางไวยากรณ์

คลาส Actions มีสองวิธีที่รองรับการลากและวาง มาศึกษากันดีกว่า-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

วิธีลากและวาง Selenium

ต่อไปนี้เป็นวิธีลากและวางองค์ประกอบโดยใช้ Selenium ไดรเวอร์เว็บ

ในเมธอด DragAndDrop เราส่งผ่านพารามิเตอร์สองตัว –

1. พารามิเตอร์แรก “Sourcelocator” คือองค์ประกอบที่เราต้องลาก
2. พารามิเตอร์ที่สอง “Destinationlocator” คือองค์ประกอบที่เราต้องวางองค์ประกอบแรก

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

วิธี DragAndDropBy เราส่งผ่านพารามิเตอร์ 3 ตัว –

1. พารามิเตอร์แรก “Sourcelocator” คือองค์ประกอบที่เราต้องลาก
2. พารามิเตอร์ที่สองคือค่าพิกเซลแกน x ของ 2^nd องค์ประกอบที่เราต้องวางองค์ประกอบแรก
3. พารามิเตอร์ที่สามคือค่าพิกเซลแกน y ขององค์ประกอบที่ 2 ซึ่งเราต้องวางองค์ประกอบแรก

   

ให้เราสาธิตการลากและวางองค์ประกอบโดยใช้ Selenium Webdriver ด้วยสถานการณ์ 3 สถานการณ์ต่อไปนี้

สถานการณ์ที่ 1: องค์ประกอบ BANK ถูกลากและวางบนเซลล์ที่ระบุโดยวิธี DragAndDrop

ในโค้ดต่อไปนี้ เราจะเปิด URL ที่กำหนดไว้ Firefox เบราว์เซอร์แล้วลากองค์ประกอบ BANK และวางไว้บนบล็อก DEBIT SIDE โดยใช้เมธอด dragAndDrop

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.WebElement;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.interactions.Actions;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			

    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe ");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
         
		//Element which needs to drag.    		
        	WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
         //Element on which need to drop.		
         WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));					
         		
         //Using Action class for drag and drop.		
         Actions act=new Actions(driver);					

	//Dragged and dropped.		
         act.dragAndDrop(From, To).build().perform();		
	}		
}

คำอธิบายรหัส: ในโค้ดด้านบนเราจะเปิด URL ที่ระบุ Firefox เบราว์เซอร์แล้วลากองค์ประกอบธนาคารและวางบนบล็อกด้านเดบิตโดยใช้เมธอด dragAndDrop อธิบายโดยย่อด้านล่าง:

ก่อนอื่นเราจับ 1^st องค์ประกอบที่เราต้องลากเข้าไปในตัวแปร “จาก”

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

ประการที่สอง เราจับองค์ประกอบที่ 2 ซึ่งเราต้องวางองค์ประกอบที่ 1 ในตัวแปร "ถึง"

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

ประการที่สาม เราสร้างอ็อบเจ็กต์ของคลาส Actions ขณะที่เราใช้วิธีการของคลาส Actions

Actions act=new Actions(driver);

สำหรับองค์ประกอบการลากและวาง เราใช้เมธอด DragAndDrop ของคลาส Actions และส่งพารามิเตอร์เป็นองค์ประกอบแรก (แหล่งที่มา) “จาก” และองค์ประกอบที่สอง (Destinationlocator) “ถึง” เส้นด้านล่างจะลาก 1^st องค์ประกอบและวางลงบน 2^nd ธาตุ.

act.dragAndDrop(From, To).build().perform();

การดำเนินการของสคริปต์

ตอนนี้คุณสามารถรันสคริปต์ข้างต้นได้ทีละรายการจาก Eclipse ตามที่แสดงในภาพหน้าจอด้านล่าง

นี่คือผลลัพธ์เมื่อคุณเรียกใช้สคริปต์

สถานการณ์ที่ 2: องค์ประกอบ BANK ถูกลากและวางบนเซลล์ที่ระบุโดยวิธี DragAndDropBy

ในสถานการณ์สมมตินี้ เราเปิดใช้ URL ที่กำหนดในเบราว์เซอร์ จากนั้นลากองค์ประกอบ BANK และวางบนบล็อก DEBIT SIDE โดยใช้วิธีลาก AndDropBy ในการลาก AndDropBy เราจำเป็นต้องค้นหาพิกเซลขององค์ประกอบ

จะหาพิกเซลได้อย่างไร?

เปิด URL ใน Chrome หรือ FireFox และคลิกที่ลูกศรสีน้ำเงิน

จากนั้นคลิกองค์ประกอบใดๆ ที่คุณต้องการทราบพิกเซล

คุณจะพบพิกเซลเหนือองค์ประกอบตามที่แสดงในภาพหน้าจอด้านล่าง

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.WebElement;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.interactions.Actions;		
import org.testng.annotations.Test;		


public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
        WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));					
      
        //Using Action class for drag and drop.		
        Actions act=new Actions(driver);					
      
        //Drag and Drop by Offset.		
        act.dragAndDropBy(From,135, 40).build().perform();		
 }		
}

หมายเหตุ: ค่าพิกเซลจะเปลี่ยนไปตามความละเอียดหน้าจอและขนาดเบราว์เซอร์ วิธีการนี้จึงไม่น่าเชื่อถือและไม่ค่อยมีการใช้กันอย่างแพร่หลาย

สถานการณ์ที่ 3: ลากและวางองค์ประกอบบางส่วนแล้วตรวจสอบว่าข้อความจะแสดงหรือไม่

ในโค้ดต่อไปนี้ เราเปิด URL ที่กำหนดไว้ในเบราว์เซอร์ จากนั้นลากองค์ประกอบต่างๆ เช่น ธนาคาร การขาย 500 แล้ววางลงในบล็อกที่เกี่ยวข้อง เมื่อเสร็จแล้ว เราจะตรวจสอบข้อความเอาต์พุต

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.WebElement;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.interactions.Actions;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
    	 System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
     	 WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
     	//Element(DEBIT SIDE) on which need to drop.		
     	WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));					
      
	//Element(SALES) which need to drag.		
     	WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));
        
	//Element(CREDIT SIDE) on which need to drop.  		
     	WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));					
     
     	//Element(500) which need to drag.		
        WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(DEBIT SIDE) on which need to drop.		
     	WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));					
         
	//Element(500) which need to drag.		
        WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(CREDIT SIDE) on which need to drop.		
     	WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));					
      
	//Using Action class for drag and drop.		
     	Actions act=new Actions(driver);					

	//BANK drag and drop.		
     	act.dragAndDrop(From1, To1).build().perform();
        
	//SALES drag and drop.		
     	act.dragAndDrop(From2, To2).build().perform();
        
	//500 drag and drop debit side.		
     	act.dragAndDrop(From3, To3).build().perform();	
        
	//500 drag and drop credit side. 		
     	act.dragAndDrop(From4, To4).build().perform();		
      
	//Verifying the Perfect! message.		
	if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())							
     	{		
         	System.out.println("Perfect Displayed !!!");					
     	}
		else
     	{
        	System.out.println("Perfect not Displayed !!!");					
     	}		
}

การวิเคราะห์ผลลัพธ์

ในเอาต์พุต คุณจะเห็นว่าองค์ประกอบถูกลากและวางบนองค์ประกอบที่กำหนด คุณสามารถตรวจสอบ GIF ของเอาต์พุตได้

สรุป

• ในบทช่วยสอนข้างต้น เราจะสาธิตฟังก์ชันการลากและวางของเว็บแอปพลิเคชันผ่านวิธีดำเนินการใน Webdriver:
• DragAndDrop(ตัวระบุแหล่งที่มา, ตัวระบุปลายทาง)
• DragAndDropBy(ตัวระบุแหล่งที่มา, พิกเซลแกน x ของ Destinationlocator, พิกเซลแกน y ของ Destinationlocator)
• ในการลากและวางองค์ประกอบก่อนอื่นเราใช้วิธี DragAndDrop จากคลาส Actions ซึ่งเราส่งพารามิเตอร์ 2 ตัว 1^st parameter คือองค์ประกอบที่เราต้องลาก และ 2^nd พารามิเตอร์คือองค์ประกอบที่เราต้องทิ้ง 1^st ธาตุ.
• ประการที่สอง เราใช้เมธอด DragAndDropBy จากคลาส Actions ซึ่งเราส่งพารามิเตอร์ 3 ตัว พารามิเตอร์ตัวที่ 1 คือองค์ประกอบที่เราต้องลาก 2^nd พารามิเตอร์คือค่าพิกเซลแกน x ของ 2^nd องค์ประกอบ 3^rd พารามิเตอร์คือค่าพิกเซลแกน y ของ 2^nd ธาตุ.