Topic 23: Handle Iframe in Selenium

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, chúng ta sẽ tiếp tục discuss về IFrame. Vậy IFame là gì?

iFrame là chữ viết tắt của Inline Frame – khung nội tuyến. Nó là thành phần của một HTML element (tag HTML) giúp bạn đính kèm/nhúng tài liệu HTML và các video vào trong một trang web. Bằng cách sử dụng iFrame, bạn  đã tải thông tin, nội dung từ một web bên ngoài lên trang web của bạn. Vậy, có thể xem iFrame là một phần của nội dung web, chứ không phải là một phần của thiết kế giao diện website. Ví dụ, bạn muốn thêm một Youtube video để mô tả rõ hơn cho người đọc, bạn có thể thêm iFrame vào bên trong bài viết. iFrame có thể tích hợp mọi nội dung từ bất kỳ vị trí nào trong trang web.

Ví dụ như hình trên, như bạn thấy ở Developer Tool, mình có thẻ HTML <iframe>. Để get text “This is a sample page” trong iframe này, đầu tiên bạn phải switch vào cái iframe đó trước, sau đó bạn mới get text đó ra được. Nào chúng ta hãy bắt đầu đi vào nội dung chính của bài hôm nay, cũng như xem qua các ví dụ cụ thể nhé

1. Các cách làm việc với Iframe

Lưu ý: Như đã nói ở trên, để tương tác được với các element bên trong iframe, chúng ta cần switch vào ifame đó trước, rồi mới có thể tương tác được.

1.1. Using a WebElement

Đây là cách sử dụng linh hoạt nhất. Chúng ta chỉ cần xác định element của iframe. Và sau đó, mình sẽ switch vào iframe. Ví dụ:

//Store the web element
WebElement iframe = driver.findElement(By.id("frame1"));

//Switch to the frame
driver.switchTo().frame(iframe);

//Now we can get text
driver.findElement(By.tagName("h1")).getText();

1.2. Using a name or ID

Trong trường hợp iframe đó có thuộc tính id hoặc name, thì chúng ta sẽ switch vào iframe với id or name này. Ví dụ:

//Switch to the frame using ID
driver.switchTo().frame("frame1");

//Now we can get text
driver.findElement(By.tagName("h1")).getText();

1.3. Using an index

Giả sử trong trang web có rất iframe, chúng ta có thể switch vào iframe bằng các sử dụng index. Lưu ý: index bắt đầu từ 0 nhé. Ví dụ

//Switch to the first frame using index
driver.switchTo().frame(0);

//Now we can get title
String title = driver.findElement(By.tagName("h1")).getText();
System.out.println(title);

1.4. Leaving a frame

Sau khi đã làm việc xong với iframe, chúng ta cần phải switch về default window (nghĩa là switch ra khỏi cái iframe đó) để tiếp tục thực hiện các thao tác khác bên ngoài iframe

// Return to the top level
driver.switchTo().defaultContent();

2. Demo

Mình sẽ sử dụng lại ví dụ trong hình trên với các steps như sau:

• Open url: https://demoqa.com/frames
• Switch to the first iframe
• Get title và in kết quả ra màn hình.

Here is sample code:

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

import java.time.Duration;

public class Iframe {
    WebDriver driver;
    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();
        driver.get("https://demoqa.com/frames");
    }

    @Test
    public void TC_01_UsingWebElement() {
        //Store the web element
        WebElement iframe = driver.findElement(By.id("frame1"));

        //Switch to the frame
        driver.switchTo().frame(iframe);

        //Now we can get title
        String title = driver.findElement(By.tagName("h1")).getText();
        System.out.println(title);

        // Return to the top level
        // Nếu không có dòng code này, test case 02, 03 bên dưới dưới sẽ bị fail
        driver.switchTo().defaultContent();
    }

    @Test
    public void TC_02_UsingNameOrID() {
        //Switch to the frame using ID
        driver.switchTo().frame("frame1");

        //Now we can get title
        String title = driver.findElement(By.tagName("h1")).getText();
        System.out.println(title);

        // Return to the top level
        driver.switchTo().defaultContent();
    }

    @Test
    public void TC_03_UsingIndex() {
        //Switch to the first frame using index
        driver.switchTo().frame(0);

        //Now we can get title
        String title = driver.findElement(By.tagName("h1")).getText();
        System.out.println(title);

        // Return to the top level
        driver.switchTo().defaultContent();
    }

    @AfterClass
    public void afterClass() {
        driver.quit();
    }
}

Kết quả:

3. Kết

Như vậy chúng ta đã tìm hiểu qua 1 số cách để xử lý cho Iframe. Cảm ơn các bạn đã theo dõi bài viết của mình.  Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.