Checkbox dropdown textbox combobox là gì trong it năm 2024

Question

Tôi chọn dãy A4:F12, chạy Chart Wizard, chọn Line Chart ở bước 1, sang bước 2, tôi quy định rằng các serie vẽ theo các hàng (Series in Rows), và nhấn Finish luôn cho lẹ. Tôi có được biểu đồ như sau:

Nội dung chính Show

3.1. Dropdown List tĩnh

Xấu chi lạ! Tôi phải làm một vài thay đổi cho nó: Bỏ cái khung (border) và màu tô (fill) của vùng vẽ (plot area); bỏ luôn các đường gióng ngang (horizontal gridlines) nhưng thêm vào các đường gióng dọc (vertical gridlines); đặt giá trị maximum cho trục Y là 1, và thiết lập cho giá trị đầu tiên của trục X nằm sát vào trục Y, không cần chừa cái khoảng trắng ở đầu làm gì. Tôi cũng định dạng cho tất cả các serie, các con số ở trục Y trong biểu đồ đều có màu xám nhạt. Sau cùng, tôi dời cái chú thích cho các serie lên trên đầu biểu đồ, rồi kéo cả cái biểu đồ giãn theo chiều dọc một tí, tôi có kết quả sau đây:

Có lẽ bạn đang thắc mắc là, nếu tôi cho các serie màu xám nhạt hết, thì làm cách gì để mỗi khi chọn một "trang web" trong hai cái Combo Box, serie của "trang web" được chọn sẽ đậm lên, và có hai màu khác nhau? Dùng VBA?

Thưa không. Bài này tôi chẳng dùng tí VBA nào hết. Mà dùng một cái "mánh" sau đây:

Tôi copy dãy A1:F2, rồi chọn cái biểu đồ, gọi lệnh Paste Special ra, tôi "dán" dãy đang chọn vào biểu đồ như là thêm những serie mới vào đó. Đây là một tuyệt chiêu của Paste Special mà có lẽ ít người biết đến.

Sau đó, trong biểu đồ, tôi chọn hai cái serie mới thêm vào, làm cho một cái có màu xanh và một cái có màu đỏ, và cả hai đều đậm hơn một tí (đường kẻ mập hơn). Biểu đồ của tôi hiện giờ giống như sau:

Để cho đẹp hơn tí nữa, và rõ ràng hơn, tôi xóa hết chú thích của những serie có màu xám (cùng màu với nhau thì có chú thích cũng như không!), chỉ chừa lại hai chu thích cho serie màu xanh và màu đỏ. Để làm việc này, bạn phải chọn cái phần text ở trong mỗi mục chú thích (chứ đừng chọn cái hình dạng của serie, vì không khéo thì bạn sẽ gỡ bỏ luôn serie đó ra khỏi biểu đồ) và nhấn Delete. Sau đó, tôi chỉnh lại vị trí của 2 cái chú thích còn lại cho cân một tí với biểu đồ. Và, cuối cùng thì tôi đã có một cái gọi là Interactive Parallel Coordinates Chart!

Như đã nói ở đầu bài, tôi không biết phải dịch cái chữ "Interactive Parallel Coordinates Chart" ra tiếng Việt như thế nào cho dễ hiểu. Cứ nghĩ là viết xong bài này, tôi sẽ hiểu hơn. Nhưng... cũng chẳng hơn gì!

Trong các ứng dụng web, checkbox là một trong những element bạn sẽ thường gặp rất là nhiều. Vậy thì làm thế nào để test checkbox này với selenium? Một cách trực quan, thì ta có thể nhận biết ngay lập tức màn hình chức năng này có checkbox hay không, checkbox nào đã được check hay chưa được check. Tuy nhiên, làm thế nào để selenium làm được điều này, chúng ta cùng tìm hiểu bài toán và tìm ra lời giải dưới đây nhé.

Bài toán đặt ra là, đầu tiên kiểm tra xem checkbox lựa chọn đã được check hay chưa, nếu chưa check thì check vào ô checkbox đó với hai trường hợp là đối với group có một checkbox và group có nhiều checkbox.

Trường hợp check một checkbox:

Hay với trường hợp có nhiều checkbox:

Để biết được element này có phải là checkbox hay không, ta sẽ dựa vào attribute trong thẻ HLML của phần tử, ở ví dụ trên ta có thể quan sát thấy các checkbox đều có type = "checkbox".

Đầu tiên, ta sẽ kiểm tra xem checkbox này đã được check hay chưa, hay kiểm tra checkbox này có giá trị default đã đúng chưa – và thường thì giá trị default của cách checkbox sẽ là chưa check, bằng cách sử dụng hàm isSelected().

Nếu như checkbox đó đã được check, kết quả trả về là True, và ngược lại chưa được check thì kết quả trả về là False.

driver.findElement(By.id("isAgeSelected")).isSelected()

Tiếp theo, nếu như check box chưa được check thì thực hiện click vào ô checkbox đó:

//Kiểm tra check box đã được check hay chưa  
Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected();
//Nếu chưa được check thì click vào ô check box đó  
if(isSelected == false)  
{  
   driver.findElement(By.id("isAgeSelected")).click();  
}

Có thể thực hiện với trường hợp ngược lại là nếu checkbox đã được check thì thực hiện bỏ check cho check box, trường hợp này về bản chất thì không khác so với trường hợp true, vì với check box thì ta click lần 1 là check, click tiếp lần 2 thì là bỏ check, do đó ta cũng sẽ làm tương tự đối với trường hợp false này.

Để yên tâm hơn với việc đảm bảo được là check box này đã được check thì ta có thể sử dụng isSelected() sau câu lệnh thực hiện check checkbox như thế này để kiểm tra:

Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); 
if(isSelected == false)  
{  
driver.findElement(By.id("isAgeSelected")).click();  
}  
//Check xem checkbox đã được check và in kết quả này ra màn hình //(có thể là true hoặc false)
System.out.println(driver.findElement(By.id("isAgeSelected")).isSelected());

Với trường hợp có nhiều check box và ta muốn check nhiều hơn 1 trong số đó thì cũng chỉ cần kiểm tra và thêm thao tác click vào ô checkbox tiếp theo muốn check:

//Check ô checkbox đầu tiên  
driver.findElement(By.xpath (".//*[@id='easycont']/div/div[2]/div[2]/div[2]/div[1]/label/input")).click();
//Check ô checkbox tiếp theo  
driver.findElement(By.xpath (".//*[@id='easycont']/div/div[2]/div[2]/div[2]/div[4]/label/input")).click();

MULTI CHECKBOX

Cách thức chạy auto cho Multi Checkbox/Element nào đó:

- Lấy ra Xpath dạng List chứa checkbox => Số lượng checkbox Ví dụ: //div[@class='col-md-6 text-left']//div[2]//div[2]//div -> Tổng số Checkbox

+ Cách 1: Duyệt từng item trong List => Lấy ra được từng dòng chứa checkbox đó listItem.get(i)

+ Cách 2: Dựa vào tổng số item và vị trí từng item của List trên để lấy ra đường dẫn tới chính xác element cần xử lý (input, label)

Duyệt vòng lặp for i chạy từ 0 đến tổng số item của List trên để truyền vào Xpath của Element

Ví dụ: //div[@class='col-md-6 text-left']//div[2]//div[2]//div[ i+1 ]//input (TH cụ thể) - Checkbox //div[@class='col-md-6 text-left']//div[2]//div[2]//div[ i+1 ]//label (TH cụ thể) //div[@class='col-md-6 text-left']//div[2]//div[2]//div[ i+1 ]//a (TH cụ thể) //div[@class='col-md-6 text-left']//div[2]//div[2]//div[ i+1 ]//li (TH cụ thể)

package anhtester.Bai8DropdownCheckboxRadio;
import anhtester.Helpers;  
import anhtester.SetupBrowser;  
import org.openqa.selenium.By;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.WebElement;
import java.util.List;
public class CheckBoxDynamic {
    public static void main(String[] args) {  
        WebDriver driver;  
        driver = SetupBrowser.getDriver();
        driver.get("https://demo.seleniumeasy.com/basic-checkbox-demo.html");  
        Helpers.sleep(2);  
        //Chon nut checkbox  
        WebElement checkbox1 = driver.findElement(By.xpath("//label[text()='Option 1']//input"));  
        WebElement checkbox2 = driver.findElement(By.xpath("//label[text()='Option 2']//input"));
        //Click chọn 2 checkbox  
        checkbox1.click();  
        checkbox2.click();
        Helpers.sleep(1);  
        //Cach kiem tra cac o checkbox da duoc click hay chua
        //1. Lay het list checkbox  
        List<WebElement> listCheckbox = driver.findElements(By.xpath("(//div[@class='panel-body'])[3]//div[@class='checkbox']//input"));
        Helpers.logConsole("Tong so luong checkbox: " + listCheckbox.size());
        //2. Duyet List tren de lay ra tung thang checkbox  
        for (int i = 0; i < listCheckbox.size(); i++) {  
            //Lay ra tung vi tri checkbox theo thu tu bat dau tu 0  
            Helpers.logConsole(listCheckbox.get(i).isSelected());
            //Tao bien luu gia tri True False de if else (dat dieu kien)  
            boolean isCheckbox = listCheckbox.get(i).isSelected(); //Tra ra True/False
            //3.1 Cach lay tung item (WebElement) trong List de so sanh  
            if (isCheckbox == true) {  
                Helpers.logConsole("Vi tri thu " + (i + 1) + " Passed");  
            }  
        }
        //3.2 Cach chi dinh tung thang item trong list cu the de so sanh  
        Helpers.logConsole("--------------");  
        if (listCheckbox.get(0).isSelected() == true) {  
            Helpers.logConsole("Vi tri thu nhat Passed");  
        }  
        if (listCheckbox.get(1).isSelected() == true) {  
            Helpers.logConsole("Vi tri thu hai Passed");  
        }
        //3.3 Cach lay ra tung element cu the - dua vao so luong item cua List tren  
        Helpers.logConsole("--------------");  
        //Duyet List tren de lay ra tung thang checkbox  
        for (int i = 0; i < listCheckbox.size(); i++) {
            //Lay ra Element theo thu tu trong List WebElement da luu de kiem tra tung thang Checkbox  
            WebElement itemCheckbox = driver.findElement(By.xpath("(//div[@class='panel-body'])[3]//div[@class='checkbox'][" + (i + 1) + "]//input"));  
            Helpers.logConsole(itemCheckbox.isSelected());
        }
        Helpers.sleep(1);  
        driver.quit();  
    }  
}

Class Helpers nghĩa là một class như BaseTest. Chúng ta viết hàm dạng static rồi khai báo các hàm cần dùng có thể gọi lại gọn hơn chỉ cần thông qua tên class.

2. Làm việc với Radio button

Trong một nhóm các radio button, tại một thời điểm thì ta chỉ có thể chọn một radio button cho các option đó. Trong HTML, các radio button nằm trong thẻ input và có attribute là type = "radio".

Các bạn có thể tham khảo ví dụ dưới đây về radio button:

HTML:

Và ta có một vài vấn đề có thể làm với radio button như sau:

Xác định locator của các radio button – có thể sử dụng nhiều cách để lấy ra được locator của các element này.
Kiểm tra giá trị mặc định của radio, hoặc kiểm tra xem radio đó đã được chọn hay chưa
Có thể click chọn nếu như radio button này chưa được chọn, hoặc chọn một radio khác khi radio kia đã được chọn
Ngoài ra, trước khi click chọn radio button, ta có thể kiểm tra xem radio button đó có enable hay không – Case này được dùng trong trường hợp đối với một vài yêu cầu sau khi đã thực hiện một vài thao tác trước đó thì mới xuất hiện radio.

Đầu tiên, xác định locator của radio button:

driver.findElement(By.xpath("//input[@value = 'Female']")

Tiếp theo, kiểm tra giá trị mặc định của radio button là đã được check hay chưa bằng cách sử dụng hàm isSelected()– Hàm này quen quen, cũng được dùng để kiểm tra với các checkbox phía trên rồi đó.

driver.findElement(By.xpath("//input[@value = 'Female']")).isSelected()

Kế tiếp nữa, là thực hiện click chọn radio button đó bằng cách sử dụng hàm click(), với locator đã tìm được ở bước đầu tiên:

driver.findElement(By.xpath("//input[@value = 'Female']")).click();

Với trường hợp kiểm tra xem radio button có thể select được (enable and clickable) trên ứng dụng hay không ta có thể sử dụng hàm .isEnabled() để kiểm tra.

driver.findElement(By.xpath("//input[@value = 'Female']")).isEnabled()

Ngoài ra còn có thể sử dụng hàm isDisplayed() để kiểm tra phần tử ấy có đang hiển thị hay không:

driver.findElement(By.xpath("//input[@value = 'Female']")).isDisplayed()

3. Làm việc với Dropdown List

Link Demo:

https://demo.seleniumeasy.com/basic-select-dropdown-demo.html
https://techydevs.com/demos/themes/html/trizen-demo/trizen/index.html
Yêu cầu:
Làm sao để chọn các giá trị: Thứ trong tuần của dropdown ở hình trên?
Làm sao để kiểm tra trong dropdown có bao nhiêu giá trị => như hình trên có 7 giá trị?
Làm sao để kiểm tra 1 giá trị trong dropdown hiển thị đúng hay chưa sau khi đã chọn thành công?
Làm sao để kiểm tra dropdown có phải là multi-select hay single select => multi-select: cho phép chọn nhiều giá trị trong dropdown/ list?

Giải pháp:

Selenium WebDriver hỗ trợ kiểm tra các phần tử Dropdown/ List bằng cách sử dụng lớp Select thay vì sử dụng lớp WebElement //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 0
Lớp Select cung cấp các phương pháp và thuộc tính khác nhau để tương tác với dropdown/ list qua phần tử HTML là thẻ Select

Các phương thức sử dụng:

Select dropdown sử dụng thuộc tính ID:
HTML: //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); }
9
//Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 1
Select một giá trị trong dropdown sử dụng visible text (thường sử dụng)
HTML :
Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } //Check xem checkbox đã được check và in kết quả này ra màn hình //(có thể là true hoặc false) System.out.println(driver.findElement(By.id("isAgeSelected")).isSelected());
0
//Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); }
2 Hoặc: Select một giá trị trong dropdown sử dụng value
//Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 3
Hoặc: Select một giá trị trong dropdown sử dụng index (bắt đầu từ vị trí số 0) //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 4 \=> <option value\=”website“\>Website Tester</option\>
Kiểm tra dropdown có hỗ trợ dạng multi-select hay không: //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 5
Kiểm tra dropdown có 5 giá trị: //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 6 => Mỗi 1 giá trị tương ứng với 1 thẻ
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): //Kiểm tra check box đã được check hay chưa Boolean isSelected = driver.findElement(By.id("isAgeSelected")).isSelected(); //Nếu chưa được check thì click vào ô check box đó if(isSelected == false) { driver.findElement(By.id("isAgeSelected")).click(); } 7

3.2. Dropdown List động

Bắt đầu, mình sẽ lấy một ví dụ về một drop down động khác để cùng hiểu hơn về yêu cầu của bài toán cũng như hướng giải quyết nhé.

Dưới đây là một trang web về đặt vé máy bay, người dùng sẽ click vào ô textbox điểm khởi hành để nhập vào điểm khởi hành chuyến bay. Khi click vào đó, trang web hiển thị ra danh sách các điểm khởi hành được gợi ý, người dùng có thể chọn từ list đó hoặc nhập vào các từ khóa, hệ thống sẽ hiển thị tên gợi ý tương ứng gần đúng với từ khóa nhập vào nhất.

Trong trường hợp này, ta không thể sử dụng cách thông thường sử dụng với drop down list tĩnh là dùng select sau đó sử dụng các thuộc tính của phần tử HTML để lấy giá trị cho text box được, mà phải sử dụng bằng cách khác, cách này được mô tả theo kịch bản dưới đây:

là ai Hỏi Đáp Là gì ComboBox