AUTOMATION BLOG
Share & Discuss about Testing Experiences
AUTOMATION BLOG

Topic 20: Handle Dropdownlist 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 hướng dẫn các bạn cách xử lý với control DropdownList. Cũng giống như control checkbox, control này cũng được chia làm 2 loại:

  • 1 là default Dropdown. Default dropdown là control có thẻ html là select và value item của nó là thẻ option. Ví dụ:

  • 2 là custom Dropdown. Custom Dropdown là control có thẻ html là div. Ví dụ:

Nào, mình cùng bắt đầu nhé.

1. Default dropdown

  • Để làm việc với Default dropdown, chúng ta cần phải import thư viện sau:
import org.openqa.selenium.support.ui.Select

1.1. Hàm isMultiple()

  • Hàm này dùng để kiểm tra xem dropdown có phải là multi select hay là single select?
  • Hàm này sẽ trả về giá trị true/false.
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
boolean isMultiple = select.isMultiple();

1.2. Hàm selectByValue()

  • Hàm này dùng để select item trong dropdown theo thuộc tính value của thẻ <option>.

  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.selectByValue(3);

1.3. Hàm selectByVisibleText()

  • Với Visible text – thì đây chính là text hiển thị trên dropdown
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.selectByVisibleText("January");

1.4. Hàm selectByIndex()

  • Với index thì có thể hiểu đơn giản như là ta có một mảng các option, được đánh số từ 0. Như hình trên ta có index từ 0 đến 12.
    • Index 1 tương ứng với January,
    • lần lượt index 2 tương ứng với February,
    • và index 12 tương ứng với December.
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.selectByIndex(1);

1.5. Hàm getFirstSelectedOption()

  • Hàm này dùng để get item đầu tiên trong dropdown.
  • Hàm này thường được sử dụng để kiểm tra giá trị trong dropdown hiển thị đúng sau khi đã chọn thành công (giá trị đã chọn sẽ luôn hiển thị ở vị trí đầu tiên)
  • Ví dụ:
String month = "January";
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.selectByVisibleText(month );
String actual_result = select.getFirstSelectedOption().getText();
Assert.assertEquals(select.getFirstSelectedOption().getText(), month );

1.6. Hàm getOptions()

  • Hàm này dùng để get số lượng items hiện có trong dropdown
  • Ví dụ như hình bên dưới, hàm này sẽ trả về 13 items

  • Ví dụ: 
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
Assert.assertEquals(select.getOptions().size(), 13);

1.7. Hàm deselectAll()

  • Hàm này được sử dụng để deselect tất cả các option đã được select, và chỉ sử dụng đối với những dropdown list cho phép chọn nhiều option.
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.deselectAll();

1.8. Hàm deselectByVisibleText()

  • Ngược lại với hàm selectByVisibleText(), hàm này sẽ deselect item mà mình đã select trước đó
  • Ví dụ: 
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.selectByVisibleText("January");

1.9. Hàm deselectByValue()

  • Ngược lại với hàm selectByValue(), hàm này sẽ deselect item mà mình đã select trước đó
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.deselectByValue("3");

1.10. Hàm deselectByIndex()

  • Ngược lại với hàm selectByIndex(), hàm này sẽ deselect item mà mình đã select trước đó
  • Ví dụ
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
select.deselectByIndex(3);

1.11. Hàm getAllSelectedOptions()

  • Hàm này dùng để get số lượng item đã được select trong dropdown
  • Ví dụ:
Select select = new Select(driver.findElement(By.name("DateOfBirthMonth")));
int count = select.getAllSelectedOptions().size();

2. Custom dropdown

  • Cũng giống như control Button/Checkbox, với Custom dropdown, mình chỉ có thể sử dụng duy nhất 1 hàm Click().
  • Hàm này mình đã hướng dẫn cách sử dụng ở những bài trước. Các bạn có thể xem lại nhé.

3. Tip to find xpath in custom dropdown

Thông thường khi bắt xpath với custom dropdown sẽ khó khăn hơn bắt xpath ở các loại control khác. Đó là vì khi bạn click vào drodown, thì cái list items sẽ hiện ra. Nhưng nếu bạn focus chuột ở 1 nơi khác, thì các list items này sẽ mất đi. Vì vậy để bắt xpath cho custom dropdown, mình sẽ làm các bước sau đây:

  • Open Dev tool (F12) -> select tab Console
  • Input setTimeout ( function () { debugger }, 5000)
  • Click to dropdown control to show list dropdown items
  • Switch to Elements tab and find xpath

4. Demo

4.1. Demo 1: Default dropdown – single select

Sample test case:

  1. Open url: https://demo.nopcommerce.com/register?returnUrl=%2F
  2. Verify that Month dropdown is single dropdown
  3. Select Month = January
  4. Verify that January displayed in dropdown
  5. Verify that the total items in dropdown is 13

Sample code:

@Test
public void TC_01_SingleDropdown(){
    String month = "January";
    driver.get("https://demo.nopcommerce.com/register?returnUrl=%2F");

    // ---------- DateOfBirthDay --------------
    select = new Select(driver.findElement(By.name("DateOfBirthMonth")));

    // Verify "date of birth" is single dropdown
    boolean isMultiple = select.isMultiple();
    Assert.assertFalse(isMultiple);

    // Select by visible text on UI
    select.selectByVisibleText(month);

    // Verify item selected
    Assert.assertEquals(select.getFirstSelectedOption().getText(), month);

    // Verify all items displayed correctly
    Assert.assertEquals(select.getOptions().size(), 13);
    sleepInSecond(5);
}

4.2. Demo 2: Default dropdown – mutli select

Sample test case:

  1. Open url: https://getbootstrap.com/docs/5.0/forms/select/
  2. Scroll to dropdown control
  3. Verify that this control is multiple dropdown
  4. Deselect first item
  5. Select 3 items: One, Two, Three
  6. Verify total selected item is 3
  7. Deselect all items
  8. Verify total selected item after deselected is 0

Sample code:

@Test
public void TC_02_MultipleDropdown(){
    driver.get("https://getbootstrap.com/docs/5.0/forms/select/");

    // ---------- Multiple dropdown --------------
    WebElement dropdown = driver.findElement(By.xpath("//select[contains(@aria-label,'multiple')]"));
    select = new Select(dropdown);

    // Scroll to Multiple dropdown
    ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", dropdown);

    // Verify is multiple dropdown
    boolean isMultiple = select.isMultiple();
    Assert.assertTrue(isMultiple);

    // Deselect first item
    select.deselectByIndex(0);

    // Select by visible text on UI
    select.selectByVisibleText("One");
    select.selectByVisibleText("Two");
    select.selectByVisibleText("Three");

    // Verify total selected item is 3
    Assert.assertEquals(select.getAllSelectedOptions().size(), 3);
    sleepInSecond(3);

    // Deselect all
    select.deselectAll();

    // Verify total selected item after deselected is 0
    Assert.assertEquals(select.getAllSelectedOptions().size(), 0);
    sleepInSecond(5);
}

4.3. Demo 3: Custom dropdown

Sample test case:

  1. Open url: https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist
  2. Select Beverages item on Categories dropdown
  3. Select Chang item on Products dropdown

Sample code:

@Test
public void TC_03_CustomDropdown(){
    driver.get("https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist");

    // Select Beverages item on Categories dropdown
    driver.findElement(By.id("categories_label")).click();
    sleepInSecond(2);
    driver.findElement(By.xpath("//ul[@id='categories_listbox']/li//span[text()='Beverages']")).click();
    sleepInSecond(2);

    // Select Chang item on Products dropdown
    driver.findElement(By.id("products_label")).click();
    sleepInSecond(2);
    driver.findElement(By.xpath("//ul[@id='products_listbox']/li//span[text()='Chang']")).click();
    sleepInSecond(2);
}

Here is full code:

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.Select;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class Dropdownlist {
    WebDriver driver;
    Select select;
    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.manage().window().maximize();
    }

    @Test
    public void TC_01_SingleDropdown(){
        String month = "January";
        driver.get("https://demo.nopcommerce.com/register?returnUrl=%2F");

        // ---------- DateOfBirthDay --------------
        select = new Select(driver.findElement(By.name("DateOfBirthMonth")));

        // Verify "date of birth" is single dropdown
        boolean isMultiple = select.isMultiple();
        Assert.assertFalse(isMultiple);

        // Select by visible text on UI
        select.selectByVisibleText(month);

        // Verify item selected
        Assert.assertEquals(select.getFirstSelectedOption().getText(), month);

        // Verify all items displayed correctly
        Assert.assertEquals(select.getOptions().size(), 13);
        sleepInSecond(5);
    }

    @Test
    public void TC_02_MultipleDropdown(){
        driver.get("https://getbootstrap.com/docs/5.0/forms/select/");

        // ---------- Multiple dropdown --------------
        WebElement dropdown = driver.findElement(By.xpath("//select[contains(@aria-label,'multiple')]"));
        select = new Select(dropdown);

        // Scroll to Multiple dropdown
        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", dropdown);

        // Verify is multiple dropdown
        boolean isMultiple = select.isMultiple();
        Assert.assertTrue(isMultiple);

        // Deselect first item
        select.deselectByIndex(0);

        // Select by visible text on UI
        select.selectByVisibleText("One");
        select.selectByVisibleText("Two");
        select.selectByVisibleText("Three");

        // Verify total selected item is 3
        Assert.assertEquals(select.getAllSelectedOptions().size(), 3);
        sleepInSecond(5);

        // Deselect all
        select.deselectAll();

        // Verify total selected item after deselected is 0
        Assert.assertEquals(select.getAllSelectedOptions().size(), 0);
        sleepInSecond(5);
    }

    @Test
    public void TC_03_CustomDropdown(){
        driver.get("https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist");

        // Select Beverages item on Categories dropdown
        driver.findElement(By.id("categories_label")).click();
        sleepInSecond(2);
        driver.findElement(By.xpath("//ul[@id='categories_listbox']/li//span[text()='Beverages']")).click();
        sleepInSecond(2);

        // Select Chang item on Products dropdown
        driver.findElement(By.id("products_label")).click();
        sleepInSecond(2);
        driver.findElement(By.xpath("//ul[@id='products_listbox']/li//span[text()='Chang']")).click();
        sleepInSecond(2);
    }

    public void sleepInSecond(long timeInSecond) {
        try {
            Thread.sleep(timeInSecond * 1000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

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

Kết quả:

5. Kết

Như vậy chúng ta đã tìm hiểu qua 1 số hàm xử lý cho control dropdown list. 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.

Leave a Reply

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