Cara Menangani iFrame di Selenium Pengemudi web: switchTo()

iFrame masuk Selenium Driver web

iFrame masuk Selenium Driver web adalah halaman web atau bingkai sebaris yang tertanam di halaman web lain atau dokumen HTML yang tertanam di dalam dokumen HTML lain. Iframe sering digunakan untuk menambahkan konten dari sumber lain seperti iklan ke halaman web. Iframe didefinisikan denganiframe> tag.

Cara mengidentifikasi iFrame

Kami tidak dapat mendeteksi frame hanya dengan melihat halaman atau memeriksa Firebug.

Perhatikan gambar di bawah ini, Iklan yang ditampilkan adalah Iframe, kami tidak dapat menemukan atau mengenalinya hanya dengan memeriksa menggunakan Firebug. Jadi pertanyaannya adalah bagaimana Anda bisa mengidentifikasi iframe?

Kita dapat mengidentifikasi frame di dalamnya Selenium menggunakan metode yang diberikan di bawah ini:

• Klik kanan pada elemen tersebut, Jika Anda menemukan opsi seperti 'Bingkai Ini' maka itu adalah iframe. (Silakan lihat diagram di atas)
• Klik kanan pada halaman tersebut dan klik 'Lihat Sumber Halaman' dan Cari dengan 'iframe', jika Anda dapat menemukan nama tag apa pun dengan 'iframe' maka artinya halaman tersebut terdiri dari iframe.

Dalam diagram di atas, Anda dapat melihat bahwa 'Bingkai iniOpsi ' tersedia saat diklik kanan, jadi kami sekarang yakin bahwa itu adalah iframe.

Kami bahkan dapat mengidentifikasi jumlah total iframe dengan menggunakan cuplikan di bawah ini.

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

Cara Menangani Bingkai di Selenium menggunakan Perintah WebDriver

Pada dasarnya, kita dapat mengganti elemen dan menangani frame Selenium menggunakan 3 cara.

• Dengan Indeks
• Berdasarkan Nama atau Id
• Berdasarkan Elemen Web

Metode 1: Beralih ke bingkai demi indeks

Indeks adalah salah satu atribut untuk penanganan frame di Selenium melalui mana kita dapat beralih ke sana.

Indeks iframe dimulai dengan '0'.

Misalkan jika ada 100 frame dalam satu halaman, kita dapat beralih ke frame dalam Selenium dengan menggunakan indeks.

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

Metode 2: Beralih ke bingkai berdasarkan Nama atau ID

Nama dan ID adalah atribut untuk menangani frame di Selenium melaluinya kita dapat beralih ke iframe.

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

Contoh Beralih ke iframe melalui ID:

ke bingkai dengan Elemen Web

Kita dapat mengakses iframe ini melalui URL di bawah ini: https://demo.guru99.com/test/guru99home/

Tidak mungkin untuk mengklik iframe secara langsung XPath karena ini adalah iframe. Pertama kita harus beralih ke frame dan kemudian kita bisa klik menggunakan xpath.

Langkah 1)

WebDriver driver = new FirefoxDriver();

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

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

• Kami menginisialisasi Firefox sopir.
• Arahkan ke situs “guru99” yang berisi iframe.
• Memaksimalkan jendela.

Langkah 2)

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

• Pada langkah ini kita perlu mengetahui id iframe dengan memeriksa melalui Firebug.
• Kemudian beralih ke iframe melalui ID.

Langkah 3)

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

• Di sini kita perlu mengetahui xpath dari elemen yang akan diklik.
• Klik elemen menggunakan perintah driver web yang ditunjukkan di atas.

Berikut kode lengkapnya:

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***************");
      }
}		

Keluaran:

Browser menavigasi ke halaman yang berisi iframe di atas dan mengklik iframe.

Metode 3: Beralih ke bingkai dengan Elemen Web

Kita bahkan dapat beralih ke iframe menggunakan elemen web.

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

Cara beralih kembali ke Main Frame

Kita harus keluar dari iframe.

Untuk kembali ke bingkai induk, Anda dapat menggunakan switchTo().parentFrame() atau jika ingin kembali ke bingkai utama (atau sebagian besar bingkai induk), Anda dapat menggunakan switchTo().defaultContent();

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

Cara beralih frame, jika kita TIDAK BISA beralih menggunakan ID atau Elemen Web:

Misalkan jika ada 100 frame di halaman, dan tidak ada ID yang tersedia, dalam hal ini, kita tidak tahu elemen iframe mana yang diperlukan sedang dimuat (Ini adalah kasus ketika kita tidak mengetahui indeks frame Juga).

Solusi untuk masalah di atas adalah, kita harus menemukan indeks iframe yang digunakan untuk memuat elemen dan kemudian kita perlu beralih ke iframe melalui indeks.

Di bawah ini adalah langkah-langkah untuk menemukan indeks Bingkai tempat elemen dimuat dengan menggunakan cuplikan di bawah ini

Langkah 1)

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

• Inisialisasi Firefox sopir.
• Arahkan ke situs “guru99” yang berisi iframe.
• Memaksimalkan jendela.

Langkah 2)

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

• Kode di atas menemukan jumlah total iframe yang ada di dalam halaman menggunakan tagname 'iframe'.

Langkah 3)

Tujuan untuk langkah ini adalah mencari tahu indeks 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();}

Di atas "forloop" mengulangi semua iframe di halaman dan mencetak '1' jika iframe yang diperlukan ditemukan, jika tidak maka akan menghasilkan '0'.

Berikut kode lengkap hingga langkah 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();}}}

Jalankan program ini dan hasilnya akan seperti di bawah ini:

Keluaran:

1
0
0
0	
0
0

Verifikasi hasilnya, Anda dapat menemukan rangkaian 0 dan 1.

• Di mana pun Anda menemukan '1' dalam keluaran, itulah indeks Bingkai tempat elemen dimuat.
• Karena indeks iframe dimulai dengan '0' jika Anda menemukan 1 di 1^sttempat, maka indeksnya adalah 0.
• Jika Anda menemukan 1 dari 3^rd tempat, indeksnya adalah 2.

Kita dapat mengomentari perulangan for, setelah kita menemukan indeksnya.

Langkah 4)

driver.switchTo().frame(0);

• Setelah Anda menemukan indeks elemen, Anda dapat mengganti frame menggunakan perintah di atas.
• driver.switchTo().frame(indeks ditemukan dari Langkah 3);

Langkah 5)

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

• Kode di atas akan mengklik iframe atau elemen di iframe.

Jadi kode lengkapnya akan seperti di bawah ini:

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***************");
	        }
	    }

Keluaran:

Browser menavigasi ke halaman yang berisi iframe di atas dan mengklik iframe.

Konsep Bingkai Bersarang di Selenium

Mari kita asumsikan ada dua bingkai yang satu di dalam yang lain seperti yang ditunjukkan pada gambar di bawah dan persyaratan kita adalah mencetak teks di bingkai luar dan bingkai dalam.

Dalam kasus frame bertumpuk,

• Pertama-tama kita harus beralih ke bingkai luar dengan Indeks atau ID iframe
• Setelah kita beralih ke bingkai luar, kita dapat menemukan jumlah total iframe di dalam bingkai luar, dan
• Kita dapat beralih ke rangka bagian dalam dengan salah satu metode yang diketahui.

Saat keluar dari frame, kita harus keluar dengan urutan yang sama seperti kita masuk ke dalamnya dari frame dalam terlebih dahulu dan kemudian frame luar.

Kode Html untuk frame bersarang di atas adalah seperti gambar di bawah ini.

Kode HTML di atas dengan jelas menjelaskan tag iframe (disorot dengan warna hijau) di dalam tag iframe lain, yang menunjukkan adanya iframe bertingkat.

Berikut langkah-langkah untuk beralih ke bingkai luar dan mencetak teks pada bingkai luar:

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

• Beralih ke Bingkai luar.
• Mencetak teks pada bingkai luar.

Setelah kita beralih ke bingkai luar, kita harus mengetahui apakah ada bingkai dalam yang ada di dalam bingkai luar

Langkah 2)

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

• Menemukan jumlah total iframe di dalam bingkai luar.
• Jika ditemukan ukuran '0' maka tidak ada bingkai bagian dalam di dalam bingkai.

Langkah 3)

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

• Beralih ke bingkai bagian dalam
• Mencetak teks pada bingkai bagian dalam.

Berikut kode lengkapnya:

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

Keluaran:

Output dari kode di atas akan mencetak teks pada frame dalam dan frame luar.