Cum să trageți și să plasați Selenium (Exemplu)

prin: Krishna Rungta Krishna Rungta
Hours Actualizat

Trageți și plasați în seleniu

Unele aplicații web au o funcționalitate de a trage elemente web și de a le plasa pe o zonă sau un element definit. Putem automatiza glisarea și plasarea unor astfel de elemente folosind Selenium Webdriver.

Trageți și plasați sintaxa

Clasa Actions are două metode care acceptă Drag and Drop. Să-i studiem-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Cum să trageți și să plasați Selenium

Iată cum să glisați și să plasați un element folosind Selenium Webdriver

În metoda dragAndDrop, trecem cei doi parametri -

  1. Primul parametru „Sourcelocator” este elementul pe care trebuie să-l tragem
  2. Al doilea parametru „Destinationlocator” este elementul pe care trebuie să aruncăm primul element
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

metoda dragAndDropBy trecem cei 3 parametri –

  1. Primul parametru „Sourcelocator” este elementul pe care trebuie să-l tragem
  2. Al doilea parametru este valoarea pixelului pe axa x a 2nd element pe care trebuie să aruncăm primul element.
  3. Al treilea parametru este valoarea pixelului pe axa y a celui de-al doilea element pe care trebuie să aruncăm primul element.

    Trageți și plasați Selenium

Să vă arătăm practic tragerea și plasarea unui element folosind driverul web selenium cu următoarele 3 scenarii

Scenariul 1: elementul BANK este tras și plasat pe celula specifică prin metoda DragAndDrop.

În următorul cod, lansăm adresa URL dată în Firefox browser și apoi trageți elementul BANK și plasați pe blocul DEBIT SIDE prin metoda dragAndDrop.

Trageți și plasați Selenium

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("http://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();		
	}		
}

Explicația codului: În codul de mai sus lansăm adresa URL dată în Firefox browser și apoi trageți elementul BANK și plasați pe blocul DEBIT SIDE prin metoda dragAndDrop. Explicat pe scurt mai jos:

Mai întâi, surprindem 1st element pe care trebuie să-l tragem în variabila „De la”.

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

În al doilea rând, capturam al 2-lea element pe care trebuie să aruncăm primul element în variabila „To”.

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

În al treilea rând, creăm obiectul clasei Actions pe măsură ce folosim metodele clasei Actions.

Actions act=new Actions(driver);

Pentru elementul drag and drop folosim metoda dragAndDrop din clasa Actions și transmitem parametrii ca prim element (Sourcelocator) „From” și al doilea element (Destinationlocator) „To”. Linia de mai jos va trage 1st element și aruncați-l pe 2nd element.

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

Executarea scenariului.

Acum puteți executa scriptul de mai sus unul câte unul de la Eclipse, așa cum se arată în captura de ecran de mai jos.

Trageți și plasați Selenium

Iată rezultatul când rulați scriptul

Trageți și plasați Selenium

ARTICOLE SIMILARE

Scenariul 2: elementul BANK este tras și plasat pe celula specifică prin metoda DragAndDropBy.

În acest scenariu, lansăm URL-ul dat în browser și apoi glisăm elementul BANK și plasăm pe blocul DEBIT SIDE prin metoda dragAndDropBy. Pentru a glisaAndDropBy, trebuie să găsim pixelul elementului.

Cum să găsesc Pixel?

Deschideți adresa URL în Chrome sau FireFox și faceți clic pe săgeata de culoare albastră.

Apoi faceți clic pe orice element pentru care doriți să cunoașteți pixelul.

Veți găsi pixelul deasupra elementului, așa cum se arată în captura de ecran de mai jos.

Trageți și plasați Selenium

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("http://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();		
 }		
}

NOTĂ: Valorile pixelilor se modifică în funcție de rezoluția ecranului și dimensiunea browserului. Prin urmare, această metodă nu este fiabilă și nu este utilizată pe scară largă.

Scenariul 3: puține elemente sunt trase și plasate și apoi verificați dacă mesajul este afișat sau nu.

În următorul cod lansăm URL-ul dat în browser și apoi glisăm elementele precum BANK, SALES, 500 și drop pe blocul respectiv. Odată terminat, verificăm mesajul de ieșire.

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("http://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 !!!");					
     	}		
}

Analiza rezultatelor

În Ieșire, puteți vedea că elementul este tras și plasat pe elementul definit. Puteți verifica GIF-ul ieșirii.

Rezumat

  • În tutorialele de mai sus, ilustrăm funcționalitatea de glisare și plasare a aplicației web prin metodele de acțiune din Webdriver:
  • dragAndDrop (Locator sursă, localizator destinație)
  • dragAndDropBy(Sourcelocator, pixelul pe axa x din Destinationlocator, pixelul pe axa y din Destinationlocator)
  • Pentru a glisa și plasa elementul am folosit mai întâi metoda DragAndDrop din clasa Actions în care trecem cei 2 parametri, 1st parametrul este elementul pe care trebuie să-l tragem și 2nd parametrul este elementul pe care trebuie să aruncăm 1st element.
  • În al doilea rând, am folosit metoda dragAndDropBy din clasa Actions în care trecem cei 3 parametri, primul parametru este elementul pe care trebuie să-l tragem, 1nd parametrul este valoarea pixelului pe axa x a 2nd element, 3rd parametrul este valoarea pixelului pe axa y a 2nd element.

S-ar putea sa-ti placa: