AUTOMATION BLOG
Share & Discuss about Testing Experiences
AUTOMATION BLOG

Topic 22: Handle Popup in Selenium

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục giới thiệu về control Popup.

Về control này thì có nhiều cách hiển thị trên UI. Ví dụ như sau:

  • Trang https://www.zingpoll.com/ . Sau khi open, bạn click vào ‘SIGN IN’ button, popup sẽ hiển thị như hình bên dưới.

  • Trang https://accesstrade.vn/. Sau khi open, bạn sẽ đợi khoảng 10s, popup sẽ tự động hiển thị như hình bên dưới.

  • Hoặc 1 số trang web thương mại điện tử như tiki, shopee … Khi open website, popup sẽ hiển thị lên màn hình. Ví dụ như:

Về manual test, thì mình sẽ có những actions như sau:

  • Navigate đến trang web bạn muốn test
  • Wait vài giây để cái popup đó hiển thị trên trang web
  • User bắt đầu thực hiện các thao tác. Ví dụ như input text, close popup…
  • Nếu close popup, thì phải wait vài giây để popup đó closed đi mới thực hiện được các actions tiếp theo
  • Hoặc kiểm tra xe popup có hiển thị hay không?

Về automation, thì flow cũng tương tự như vậy. Chúng ta cùng bắt đầu nhé.

1. Các hàm thường sử dụng cho Popup

1.1. Hàm isDisplayed()

  • Hàm này dùng để kiểm tra xem WebElement có hiển thị trên trang web hay không?
  • Giá trị trả về kiểu boolean. Nếu kết quả trả về true nghĩa là Element đang hiển thị trên màn hình, ngược lại sẽ trả giá trị là false.
  • Ví dụ:
driver.findElement(By.id("Loginform")).isDisplayed()

1.2. Hàm visibilityOfElementLocated()

  • Hàm này được sử dụng để kiểm tra 1 phần tử trong DOM có hiển thị lên trên màn hình hay không?
  • Ví dụ:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("Loginform")));

1.3. Hàm invisibilityOfElementLocated()

  • Hàm này được sử dụng để kiểm tra 1 phần tử không hiển thị lên trên màn hình?
  • Ví dụ:
explicitWait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[contains(@class,'modal_dialog_custom')]")));

2. Ví dụ

2.1. Ví dụ 1

Test steps:

  • Open url: https://www.zingpoll.com/
  • Click Sign In button in the menu bar
  • Wait for Sign In form displayed and verify that Sign In form is displayed on UI
  • Click Close icon to close Sign In form
  • Wait for Sign In form invisible and verify that Sign In form is not displayed on UI
@Test
    public void TC_01_Popup() {
        driver.get("https://www.zingpoll.com/");

        // Click Sign In button in menu bar
        driver.findElement(By.id("Loginform")).click();

        // Wait for Sign In form displayed and verify that Sign In form is displayed on UI
        explicitWait.until(ExpectedConditions.visibilityOfElementLocated(By.id("Loginform")));
        Assert.assertTrue(driver.findElement(By.id("Loginform")).isDisplayed());

        // Click close icon to close popup
        driver.findElement(By.xpath("//div[contains(@class,'modal_dialog_custom')]//button[@class='close']")).click();

        // Wait for Sign In form invisible and verify that Sign In form is not displayed on UI
        explicitWait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[contains(@class,'modal_dialog_custom')]")));
        Assert.assertFalse(driver.findElement(By.xpath("//div[contains(@class,'modal_dialog_custom')]")).isDisplayed());
    }

2.2. Ví dụ 2

Test steps:

  • Open url: https://accesstrade.vn/
  • Wait some seconds (about 10s)
  • Check popup displayed or not?
  • If displayed, click on Close icon to close popup
  • Otherwise, print message “Popup does not display.”
@Test
    public void TC_02_Popup() throws InterruptedException {
        driver.get("https://accesstrade.vn//");

        Thread.sleep(10000);

        // Ở đây mình sẽ dùng hàm findElements (có s) đề tìm số phần tử tồn tại trong DOM -> nó sẽ trả về 1 list Element
        // Nếu mình sử dụng hàm findElement (không có s), trong trường hợp popup không displayed -> nó sẽ báo lỗi và dừng tại dòng code này
        List<WebElement> popup = driver.findElements(By.xpath("//div[contains(@class,'ays-pb-modal_1')]"));

        // Sau khi tìm xong, mình sẽ check xem số lượng phần tử có > 0 hay không?
        // Đồng thời, mình cũng sẽ check thêm là phần tử đó có displayed trên UI hay không?
        // Nếu có, mình sẽ close popup.
        // Ngược lại, mình sẽ không làm gì cả. và in ra màn hình "Popup ko xuat hien."
        if(popup.size() > 0 && popup.get(0).isDisplayed()) {
            driver.findElement(By.xpath("//div[contains(@class,'ays-pb-modal-close_1')]")).click();
        }
        else {
            System.out.println("Popup ko xuat hien.");
        }
    }

2.3. Ví dụ 3

Test steps:

Note: Ở case này, cách handle sẽ không giống như 2 test case trên. Vì popup trong case này nó thuộc dạng shadow DOM

@Test
public void TC_03_ShadowPopup() throws InterruptedException {
    driver.get("https://shopee.vn/mall");
    Thread.sleep(5000);
    
    WebElement shadowHost = driver.findElement(By.cssSelector("shopee-banner-popup-stateful[spacekey='PC-VN-MALL_POPUP']"));
    SearchContext shadowRoot = shadowHost.getShadowRoot();
    WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".shopee-popup__close-btn"));
    shadowContent.click();
    Thread.sleep(5000);
}

Here is full code:

package org.example.Topic21;

import org.openqa.selenium.By;
import org.openqa.selenium.SearchContext;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

import java.time.Duration;
import java.util.List;

public class Popup {
    WebDriver driver;
    WebDriverWait explicitWait;
    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        explicitWait = new WebDriverWait(driver, Duration.ofSeconds(30));
        driver.manage().window().maximize();
    }

    @Test
    public void TC_01_Popup1() {
        driver.get("https://www.zingpoll.com/");

        // Click Sign In button in menu bar
        driver.findElement(By.id("Loginform")).click();

        // Wait for Sign In form displayed and verify that Sign In form is displayed on UI
        explicitWait.until(ExpectedConditions.visibilityOfElementLocated(By.id("Loginform")));
        Assert.assertTrue(driver.findElement(By.id("Loginform")).isDisplayed());

        // Click close icon to close popup
        driver.findElement(By.xpath("//div[contains(@class,'modal_dialog_custom')]//button[@class='close']")).click();

        // Wait for Sign In form invisible and verify that Sign In form is not displayed on UI
        explicitWait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[contains(@class,'modal_dialog_custom')]")));
        Assert.assertFalse(driver.findElement(By.xpath("//div[contains(@class,'modal_dialog_custom')]")).isDisplayed());
    }

    @Test
    public void TC_02_Popup2() throws InterruptedException {
        driver.get("https://accesstrade.vn//");

        Thread.sleep(10000);

        // Ở đây mình sẽ dùng hàm findElements (có s) đề tìm số phần tử tồn tại trong DOM -> nó sẽ trả về 1 list Element
        // Nếu mình sử dụng hàm findElement (không có s), trong trường hợp popup không displayed -> nó sẽ báo lỗi và dừng tại dòng code này
        List<WebElement> popup = driver.findElements(By.xpath("//div[contains(@class,'ays-pb-modal_1')]"));

        // Sau khi tìm xong, mình sẽ check xem số lượng phần tử có > 0 hay không?
        // Đồng thời, mình cũng sẽ check thêm là phần tử đó có displayed trên UI hay không?
        // Nếu có, mình sẽ close popup.
        // Ngược lại, mình sẽ không làm gì cả. và in ra màn hình "Popup ko xuat hien."
        if(popup.size() > 0 && popup.get(0).isDisplayed()) {
            driver.findElement(By.xpath("//div[contains(@class,'ays-pb-modal-close_1')]")).click();
        }
        else {
            System.out.println("Popup ko xuat hien.");
        }
    }

    @Test
    public void TC_03_ShadowPopup() throws InterruptedException {
        driver.get("https://shopee.vn/mall");
        Thread.sleep(5000);

        WebElement shadowHost = driver.findElement(By.cssSelector("shopee-banner-popup-stateful[spacekey='PC-VN-MALL_POPUP']"));
        SearchContext shadowRoot = shadowHost.getShadowRoot();
        WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".shopee-popup__close-btn"));
        shadowContent.click();
        Thread.sleep(5000);
    }

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

Kết quả:

3. Lời kết

Như vậy chúng ta đã tìm hiểu qua 1 vài ví dụ để xử lý cho popup control. 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. Bái bai.

Leave a Reply

Your email address will not be published. Required fields are marked *