Topic 12: Locate Elements By cssSelector

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tìm tục hướng dẫn các bạn cách xác định element bằng cssSelector. Đây cũng là trong những cách được sử dụng phổ biến trong automation. Nếu bạn không muốn dùng id, name, tag name, class name hoặc link text thì bạn có thể dùng cách này nhé. Trong automation, mình có thể linh hoạt trong việc xác định element, không bắt buộc phải theo 1 cái nào cả, miễn là mình xác định đúng được vị trí của element mà mình muốn bắt. Nhưng cần phải sự ưu tiên nhé. Các bạn có thể xem lại bài này để biết thứ tự ưu tiên khi bắt element.

Nào, chúng ta hãy bắt đầu học cách sử dụng By.cssSelector trong webdriver. Ví dụ mình có hình như sau:

Để xác định element Email Address textbox bằng cssSelector, mình sẽ sử dụng syntax sau:

driver.findElement(By.cssSelector("input[id='email']"));

Bên dưới là đoạn code sample, các bạn có thể run thử nhé:

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Main {
    public static void main(String[] args) {
        // Path to the Chrome Driver.
        System.setProperty("webdriver.chrome.driver", "Drivers\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("http://live.techpanda.org/index.php/customer/account/login/");
        driver.manage().window().maximize();

        // Find element by link text
        WebElement ele_EmailAddress = driver.findElement(By.cssSelector("input[id='email']"));
        ele_EmailAddress.sendKeys("Test");
    }
}

Chúc các bạn thành công.