Hvordan håndtere iFrames i Selenium Webdriver: switchTo()

iFrame inn Selenium Webdriver

iFrame inn Selenium Webdriver er en nettside eller en innebygd ramme som er innebygd i en annen nettside eller et HTML-dokument innebygd i et annet HTML-dokument. Iframe brukes ofte til å legge til innhold fra andre kilder som en annonse på en nettside. iframen er definert mediframe> tag.

Hvordan identifisere iFrame

Vi kan ikke oppdage rammene bare ved å se siden eller ved å inspisere Firebug.

Se bildet nedenfor. Annonsen som vises er en iframe, vi kan ikke finne eller gjenkjenne det ved å bare inspisere med Firebug. Så spørsmålet er hvordan kan du identifisere iframen?

Vi kan identifisere rammene i Selenium ved hjelp av metodene gitt nedenfor:

• Høyreklikk på elementet. Hvis du finner alternativet som 'Denne rammen', er det en iframe.(Se diagrammet ovenfor)
• Høyreklikk på siden og klikk 'Vis sidekilde' og søk med 'iframe'. Hvis du finner et merkenavn med 'iframe', betyr det å si siden som består av en iframe.

I diagrammet ovenfor kan du se at 'Denne rammenalternativet er tilgjengelig ved å høyreklikke, så vi er nå sikre på at det er en iframe.

Vi kan til og med identifisere totalt antall iframes ved å bruke kodebiten nedenfor.

Int size = driver.findElements(By.tagName("iframe")).size();

Hvordan håndtere rammer i Selenium ved å bruke WebDriver-kommandoer

I utgangspunktet kan vi bytte over elementene og håndtere rammer inn Selenium bruker 3 måter.

• Etter indeks
• Etter navn eller ID
• Etter webelement

Metode 1: Bytt til ramme etter indeks

Indeks er en av attributtene for rammehåndtering i Selenium der vi kan bytte til det.

Indeks for iframe starter med '0'.

Anta at hvis det er 100 rammer på siden, kan vi bytte til ramme inn Selenium ved å bruke indeks.

• driver.switchTo().frame(0);
• driver.switchTo().frame(1);

Metode 2: Bytt til rammen etter navn eller ID

Navn og ID er attributter for håndtering av rammer i Selenium der vi kan bytte til iframe.

• driver.switchTo().frame("iframe1");
• driver.switchTo().frame("id of the element");

Eksempel på bytte til iframe via ID:

til rammen av Web Element

Vi kan få tilgang til denne iframen via denne URLen nedenfor: https://demo.guru99.com/test/guru99home/

Det er umulig å klikke iframe direkte gjennom XPath siden det er en iframe. Først må vi bytte til rammen og deretter kan vi klikke ved hjelp av xpath.

Trinn 1)

WebDriver driver = new FirefoxDriver();

driver.get("https://demo.guru99.com/test/guru99home/");

driver.manage().window().maximize();

• Vi initialiserer Firefox sjåfør.
• Naviger til "guru99"-siden som består av iframe.
• Maksimerte vinduet.

Trinn 2)

driver.switchTo().frame("a077aa5e");

• I dette trinnet må vi finne ut ID-en til iframen ved å inspisere gjennom Firebug.
• Bytt deretter til iframe via ID.

Trinn 3)

driver.findElement(By.xpath("html/body/a/img")).click();

• Her må vi finne ut xpath til elementet som skal klikkes.
• Klikk på elementet ved å bruke webdriverkommandoen vist ovenfor.

Her er hele koden:

public class SwitchToFrame_ID {
public static void main(String[] args) {

		WebDriver driver = new FirefoxDriver(); //navigates to the Browser
	    driver.get("https://demo.guru99.com/test/guru99home/"); 
	       // navigates to the page consisting an iframe

	       driver.manage().window().maximize();
	       driver.switchTo().frame("a077aa5e"); //switching the frame by ID

			System.out.println("********We are switch to the iframe*******");
     		driver.findElement(By.xpath("html/body/a/img")).click();
  		    //Clicks the iframe
       
  			System.out.println("*********We are done***************");
      }
}		

Utgang:

Nettleseren navigerer til siden som består av iframen ovenfor og klikker på iframen.

Metode 3: Bytt til rammen med webelement

Vi kan til og med bytte til iframe ved å bruke webelement.

• driver.switchTo().frame(WebElement);

Slik bytter du tilbake til hovedrammen

Vi må ut av iframen.

For å gå tilbake til den overordnede rammen, kan du enten bruke switchTo().parentFrame() eller hvis du vil gå tilbake til hovedrammen (eller mest overordnet), kan du bruke switchTo().defaultContent();

	    driver.switchTo().parentFrame();
	    driver.switchTo().defaultContent();

Slik bytter du over rammen, hvis vi IKKE KAN bytte med ID eller webelement:

Anta at hvis det er 100 rammer på siden, og det ikke er noen ID tilgjengelig, i dette tilfellet vet vi bare ikke hvilket iframe nødvendig element som lastes inn (Det er tilfelle når vi ikke kjenner indeksen til rammen også).

Løsningen for bekymringen ovenfor er at vi må finne indeksen til iframen som elementet lastes gjennom, og deretter må vi bytte til iframen gjennom indeksen.

Nedenfor er trinnene for å finne indeksen til rammen som elementet lastes inn ved å bruke kodebiten nedenfor

Trinn 1)

WebDriver driver = new FirefoxDriver();
driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();

• Initialiser Firefox sjåfør.
• Naviger til "guru99"-siden som består av iframe.
• Maksimerte vinduet.

Trinn 2)

int size = driver.findElements(By.tagName("iframe")).size();

• Koden ovenfor finner det totale antallet iframes på siden ved å bruke tagnavnet 'iframe'.

Trinn 3)

Mål for dette trinnet ville være å finne ut indeksen til iframe.

for(int i=0; i<=size; i++){
	driver.switchTo().frame(i);
	int total=driver.findElements(By.xpath("html/body/a/img")).size();
	System.out.println(total);
	    driver.switchTo().defaultContent();}

Over "forloop" itererer alle iframes på siden og den skriver ut '1' hvis vår nødvendige iframe ble funnet ellers returnerer '0'.

Her er den komplette koden til trinn 3:

public class IndexOfIframe {
public static void main(String[] args) {
	    WebDriver driver = new FirefoxDriver();
	    driver.get("https://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();

	    for(int i=0; i<=size; i++){
		driver.switchTo().frame(i);
		int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent();}}}

Kjør dette programmet og utdata vil være som nedenfor:

Utgang:

1
0
0
0	
0
0

Bekreft utgangen, du kan finne serien med 0-er og 1-er.

• Uansett hvor du finner '1' i utdata, er det indeksen til Frame som elementet blir lastet med.
• Siden indeksen til iframen starter med '0' hvis du finner 1-en i 1-en^stplass, så er indeksen 0.
• Hvis du finner 1 av 3^rd plass er indeksen 2.

Vi kan kommentere for-løkken når vi har funnet indeksen.

Trinn 4)

driver.switchTo().frame(0);

• Når du har funnet indeksen til elementet, kan du bytte over rammen ved å bruke kommandoen ovenfor.
• driver.switchTo().frame(indeks funnet fra trinn 3);

Trinn 5)

driver.findElement(By.xpath("html/body/a/img")).click();

• Koden ovenfor klikker på iframen eller elementet i iframen.

Så den komplette koden vil være som nedenfor:

public class SwitchToframe   {
public static void main(String[] args) throws NoSuchElementException{
	    WebDriver driver = new FirefoxDriver();
	    driver.get("https://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //int size = driver.findElements(By.tagName("iframe")).size();
	
	/*for(int i=0; i<=size; i++){
	    driver.switchTo().frame(i);
	    int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent(); //switching back from the iframe
	 }*/
	            
		//Commented the code for finding the index of the element
	    driver.switchTo().frame(0); //Switching to the frame
		System.out.println("********We are switched to the iframe*******");
		driver.findElement(By.xpath("html/body/a/img")).click();
		
		//Clicking the element in line with Advertisement
	    System.out.println("*********We are done***************");
	        }
	    }

Utgang:

Nettleseren navigerer til siden som består av iframen ovenfor og klikker på iframen.

Konsept med nestede rammer i Selenium

La oss anta at det er to rammer, den ene inni den andre, som vist på bildet nedenfor, og vårt krav er å skrive ut teksten i den ytre rammen og den indre rammen.

Når det gjelder nestede rammer,

• Først må vi bytte til den ytre rammen med enten indeks eller ID for iframen
• Når vi bytter til den ytre rammen, kan vi finne det totale antallet iframes inne i den ytre rammen, og
• Vi kan bytte til den indre rammen ved hjelp av hvilken som helst av de kjente metodene.

Når vi går ut av rammen, må vi gå ut i samme rekkefølge som vi gikk inn i den fra den indre rammen først og deretter den ytre rammen.

HTML-koden for den nestede rammen ovenfor er som vist nedenfor.

HTML-koden ovenfor forklarer tydelig iframe-taggen (uthevet i grønt) i en annen iframe-tag, noe som indikerer tilstedeværelsen av nestede iframes.

Nedenfor er trinnene for å bytte til ytre ramme og skrive ut teksten på ytre rammer:

Trinn 1)

	WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
	    
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

• Bytt til den ytre rammen.
• Skriver ut teksten på den ytre rammen.

Når vi bytter til den ytre rammen, bør vi vite om det finnes en indre ramme inne i den ytre rammen

Trinn 2)

size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);

• Finner det totale antallet iframes inne i den ytre rammen.
• Hvis størrelsen ble funnet '0', er det ingen indre ramme inne i rammen.

Trinn 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());

• Bytt til den indre rammen
• Skriver ut teksten på den indre rammen.

Her er hele koden:

public class FramesInsideFrames {
public static void main(String[] args) {
WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);

	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
               
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

		//Printing the text in outer frame
		size = driver.findElements(By.tagName("iframe")).size();
	    // prints the total number of frames inside outer frame           
                                                                                                          
	    System.out.println("Total Frames --" + size);
	    driver.switchTo().frame(0); // Switching to innerframe
	    System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
		
		//Printing the text in inner frame
		driver.switchTo().defaultContent();
	}
}

Produksjon:

Utdataene fra koden ovenfor vil skrive ut teksten i den indre rammen og den ytre rammen.