Τρόπος μεταφοράς και απόθεσης Selenium (Παράδειγμα)

Με: Krishna Rungta Krishna Rungta
Hours Ενημερώθηκε

Μεταφορά και απόθεση σε σελήνιο

Ορισμένες εφαρμογές ιστού έχουν τη δυνατότητα να σύρουν στοιχεία Ιστού και να τα αποθέσουν σε καθορισμένη περιοχή ή στοιχείο. Μπορούμε να αυτοματοποιήσουμε τη μεταφορά και απόθεση τέτοιων στοιχείων χρησιμοποιώντας Selenium Webdriver.

Μεταφορά και απόθεση σύνταξης

Η κλάση Actions έχει δύο μεθόδους που υποστηρίζουν Drag and Drop. Ας τα μελετήσουμε...

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Τρόπος μεταφοράς και απόθεσης Selenium

Δείτε πώς μπορείτε να σύρετε και να αποθέσετε ένα στοιχείο χρησιμοποιώντας Selenium Πρόγραμμα οδήγησης Web

Στη μέθοδο dragAndDrop, περνάμε τις δύο παραμέτρους –

  1. Η πρώτη παράμετρος "Sourcelocator" είναι το στοιχείο που πρέπει να σύρουμε
  2. Η δεύτερη παράμετρος "Destinationlocator" είναι το στοιχείο στο οποίο πρέπει να ρίξουμε το πρώτο στοιχείο
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

Η μέθοδος dragAndDropBy περνάμε τις 3 παραμέτρους –

  1. Η πρώτη παράμετρος "Sourcelocator" είναι το στοιχείο που πρέπει να σύρουμε
  2. Η δεύτερη παράμετρος είναι η τιμή pixel του άξονα x του 2nd στοιχείο στο οποίο πρέπει να ρίξουμε το πρώτο στοιχείο.
  3. Η τρίτη παράμετρος είναι η τιμή pixel του άξονα y του 2ου στοιχείου στο οποίο πρέπει να ρίξουμε το πρώτο στοιχείο.

    Σύρετε και αποθέστε Selenium

Ας σας δείξουμε πρακτικά τη μεταφορά και απόθεση ενός στοιχείου χρησιμοποιώντας το πρόγραμμα οδήγησης web selenium με τα ακόλουθα 3 σενάρια

Σενάριο 1: Το στοιχείο BANK σύρεται και αποτίθεται στο συγκεκριμένο κελί με τη μέθοδο DragAndDrop.

Στον παρακάτω κώδικα, εκκινούμε τη δεδομένη διεύθυνση URL Firefox πρόγραμμα περιήγησης και, στη συνέχεια, σύρετε το στοιχείο BANK και αποθέστε στο μπλοκ DEBIT SIDE μέσω της μεθόδου dragAndDrop.

Σύρετε και αποθέστε 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("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 πρόγραμμα περιήγησης και, στη συνέχεια, σύρετε το στοιχείο BANK και αποθέστε στο μπλοκ DEBIT SIDE μέσω της μεθόδου dragAndDrop. Εξηγείται συνοπτικά παρακάτω:

Αρχικά, καταγράφουμε το 1st στοιχείο που πρέπει να σύρουμε στη μεταβλητή "Από".

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);

Για το στοιχείο drag and drop χρησιμοποιούμε τη μέθοδο dragAndDrop της κλάσης Actions και μεταβιβάζουμε τις παραμέτρους ως πρώτο στοιχείο (Sourcelocator) "From" και το δεύτερο στοιχείο (Destinationlocator) "To". Η παρακάτω γραμμή θα σύρει το 1st στοιχείο και ρίξτε το στο 2nd στοιχείο.

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

Εκτέλεση του σεναρίου.

Τώρα μπορείτε να εκτελέσετε το παραπάνω σενάριο ένα προς ένα από το eclipse όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Σύρετε και αποθέστε Selenium

Εδώ είναι η έξοδος όταν εκτελείτε το σενάριο

Σύρετε και αποθέστε Selenium

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Σενάριο 2: Το στοιχείο BANK σύρεται και αποτίθεται στο συγκεκριμένο κελί με τη μέθοδο DragAndDropBy.

Σε αυτό το σενάριο, εκκινούμε τη δεδομένη διεύθυνση URL στο πρόγραμμα περιήγησης και, στη συνέχεια, σύρουμε το στοιχείο BANK και αποθέτουμε στο μπλοκ DEBIT SIDE μέσω της μεθόδου dragAndDropBy. Για να dragAndDropBy, πρέπει να βρούμε το pixel του στοιχείου.

Πώς να βρείτε το Pixel;

Ανοίξτε τη διεύθυνση URL στο Chrome ή στο FireFox και κάντε κλικ στο μπλε βέλος.

Στη συνέχεια κάντε κλικ σε οποιοδήποτε στοιχείο για το οποίο θέλετε να μάθετε το pixel.

Θα βρείτε το pixel πάνω από το στοιχείο όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Σύρετε και αποθέστε 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("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();		
 }		
}

ΣΗΜΕΊΩΣΗ: Οι τιμές των pixel αλλάζουν ανάλογα με την ανάλυση της οθόνης και το μέγεθος του προγράμματος περιήγησης. Αυτή η μέθοδος επομένως δεν είναι αξιόπιστη και δεν χρησιμοποιείται ευρέως.

Σενάριο 3: Λίγα στοιχεία σύρονται και απορρίπτονται και στη συνέχεια επαληθεύστε ότι το μήνυμα εμφανίζεται ή όχι.

Στον παρακάτω κώδικα, εκκινούμε τη δεδομένη διεύθυνση URL στο πρόγραμμα περιήγησης και, στη συνέχεια, σύρουμε τα στοιχεία όπως BANK, SALES, 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 !!!");					
     	}		
}

Ανάλυση εξόδου

Στο Output, μπορείτε να δείτε το στοιχείο να σύρεται και να αποτίθεται στο καθορισμένο στοιχείο. Μπορείτε να ελέγξετε το GIF της εξόδου.

Περίληψη

  • Στα παραπάνω σεμινάρια, παρουσιάζουμε τη λειτουργία μεταφοράς και απόθεσης της εφαρμογής web μέσω των μεθόδων δράσης στο Webdriver:
  • dragAndDrop (Sourcelocator, Destinationlocator)
  • dragAndDropBy (Sourcelocator, pixel άξονα x του Destinationlocator, pixel άξονα y του Destinationlocator)
  • Για να σύρουμε και να αποθέσουμε το στοιχείο πρώτα χρησιμοποιήσαμε τη μέθοδο DragAndDrop από την κλάση Actions στην οποία περνάμε τις 2 παραμέτρους, 1st παράμετρος είναι το στοιχείο που πρέπει να σύρουμε και 2nd παράμετρος είναι το στοιχείο στο οποίο πρέπει να ρίξουμε το 1st στοιχείο.
  • Δεύτερον, χρησιμοποιήσαμε τη μέθοδο dragAndDropBy από την κλάση Actions στην οποία περνάμε τις 3 παραμέτρους, η 1η παράμετρος είναι το στοιχείο που πρέπει να σύρουμε, 2nd παράμετρος είναι η τιμή pixel του άξονα x του 2nd στοιχείο, 3rd παράμετρος είναι η τιμή pixel του άξονα y του 2nd στοιχείο.