CSS là viết tắt của Cascading Style Sheets . Nó là một ngôn ngữ trang định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng ngôn ngữ đánh dấu.
Các bài viết liên quan:
Định vị các phần tử web thông qua CSS liên quan đến việc sử dụng Bộ chọn CSS xác định một phần tử dựa trên sự kết hợp của thẻ HTML, id, lớp và các thuộc tính.
Bạn cũng có thể tham khảo hướng dẫn CSS của chúng tôi:
Trong WebDriver, CSS Selector hoạt động ở sáu chế độ để xác định và định vị các phần tử web.
Xem thêm Câu hỏi và câu trả lời phỏng vấn HTML hàng đầu
Xác định element html trong Selenium Webdriver sử dụng tag và id
Trong phần này, bạn sẽ học cách xác định vị trí một phần tử web cụ thể bằng cách sử dụng CSS – Tag và ID Selector.
Như chúng ta biết rằng việc xác định vị trí một phần tử web cụ thể liên quan đến việc kiểm tra các mã HTML của nó.
Làm theo các bước dưới đây để tìm Hộp văn bản trên trang web mẫu.
- Mở URL: https://www.testandquiz.com/selenium/testing.html
- Nhấp chuột phải vào Hộp văn bản trên trang web mẫu và chọn Kiểm tra phần tử
- Nó sẽ khởi chạy một cửa sổ chứa tất cả các code cụ thể liên quan đến sự phát triển của hộp Văn bản.
- Hãy ghi chú lại Thẻ của nó và giá trị của thuộc tính id của nó.
Cú pháp Java để định vị phần tử web thông qua CSS – Bộ chọn thẻ và ID được viết như sau:
driver.findElement (By.cssSelector ( "Giá trị thẻ # của thuộc tính id" ))
Do đó, để định vị Hộp văn bản trên trang web mẫu, chúng tôi sẽ sử dụng thẻ input cùng với giá trị của thuộc tính id của nó:
driver.findElement (By.cssSelector ( "input # fname" ))
Tương tự, để định vị nút Gửi trên trang web mẫu, chúng tôi sẽ sử dụng thẻ nút cùng với giá trị của thuộc tính id của nó:
driver.findElement (By.cssSelector ( "button # idOfButton" ))
Chúng tôi đã tạo một tập lệnh mẫu để bạn hiểu rõ hơn về cách sử dụng CSS – Tag và ID Selector. Chúng tôi đã nhúng các nhận xét trong mỗi phần mã sẽ hướng dẫn bạn thực hiện toàn bộ quy trình tự động hóa.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
public class SampleOne {
public static void main(String[] args) {
// System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );
// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
// Launch Website
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");
// Click on the textbox and send value
driver.findElement(By.cssSelector("input#fname")).sendKeys("websitehcm.com");
// Click on the Submit button using click() command
driver.findElement(By.cssSelector("button#idOfButton")).click();
// Close the Browser
driver.close();
}
}
Xác định element html trong Selenium sử dụng tag và attribute
Trong phần này, bạn sẽ học cách xác định vị trí một phần tử web cụ thể bằng cách sử dụng CSS – Bộ chọn thẻ và thuộc tính.
Như chúng ta biết rằng việc xác định vị trí một phần tử web cụ thể liên quan đến việc kiểm tra các mã HTML của nó.
Làm theo các bước dưới đây để tìm Hộp văn bản trên trang web mẫu.
- Mở URL: https://www.testandquiz.com/selenium/testing.html
- Nhấp chuột phải vào Hộp văn bản trên trang web mẫu và chọn Kiểm tra phần tử
- Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự phát triển của hộp Văn bản.
- Ghi lại Thẻ và Thuộc tính của nó.
Lưu ý: Bạn có thể chọn các thuộc tính như id, lớp và tên cùng với giá trị của chúng khi bạn định vị thông qua CSS – Bộ chọn thẻ và thuộc tính.
- Ở đây, chúng tôi sẽ lưu ý về thẻ của nó và giá trị của thuộc tính id của nó.
Cú pháp Java để định vị phần tử web thông qua CSS – Bộ chọn thẻ và thuộc tính được viết như sau:
driver.findElement (By.cssSelector ( "tag [Thuộc tính = giá trị]" ))
Do đó, để định vị Hộp văn bản trên trang web mẫu, chúng tôi sẽ sử dụng thẻ đầu vào có thuộc tính id:
driver.findElement (By.cssSelector ( "input [id = fname]" ))
Tương tự, để định vị nút Gửi trên trang web mẫu, chúng tôi sẽ sử dụng thẻ nút có thuộc tính id:
driver.findElement (By.cssSelector ( "button [id = idOfButton]" ))
Chúng tôi đã tạo một tập lệnh mẫu để bạn hiểu rõ hơn về cách sử dụng CSS – Công cụ chọn thẻ và thuộc tính. Chúng tôi đã nhúng các nhận xét trong mỗi phần mã sẽ hướng dẫn bạn thực hiện toàn bộ quy trình tự động hóa.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
public class SampleThree {
public static void main(String[] args) {
// System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );
// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
// Launch Website
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");
// Click on the textbox and send value
driver.findElement(By.cssSelector("input[id=fname]")).sendKeys("websitehcm.com");
// Click on the Submit button using click() command
driver.findElement(By.cssSelector("button[id=idOfButton]")).click();
// Close the Browser
driver.close();
}
}
Xác định element trong html sử dụng CSS-Tag, Class và Attribute
Trong phần này, bạn sẽ học cách xác định vị trí một phần tử web cụ thể bằng cách sử dụng CSS – Tag, Class và Attribute Selector.
Trong trường hợp này, chúng tôi sẽ kiểm tra hộp văn bản tìm kiếm của một trong những công cụ tìm kiếm phổ biến nhất, tức là Google.
Như chúng ta biết rằng việc xác định vị trí một phần tử web cụ thể liên quan đến việc kiểm tra các mã HTML của nó. Do đó, hãy làm theo các bước dưới đây để tìm hộp văn bản được cung cấp trên trang web ban đầu của Công cụ Tìm kiếm Google.
- Mở URL: https://www.google.co.in/
- Nhấp chuột phải vào Hộp văn bản trên trang web mẫu và chọn Kiểm tra phần tử
- Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự source code hộp văn bản.
- Ghi lại Tag, class và attribute của nó.
Cú pháp Java để định vị phần tử web thông qua CSS – Bộ chọn thẻ, lớp và thuộc tính được viết như sau:
driver.findElement (By.cssSelector ( "tag.class [thuộc tính = giá trị]" ))
Do đó, để định vị Hộp văn bản trên trang Công cụ Tìm kiếm của Google, chúng tôi sẽ sử dụng thẻ đầu vào, thuộc tính Class và name:
driver.findElement (By.cssSelector ( "input.gsfi [name = q]" ))
Tương tự, để định vị nút Tìm kiếm của Google trên trang Công cụ tìm kiếm của Google, chúng tôi sẽ sử dụng thẻ nhập tương ứng, thuộc tính Class và name của nó:
driver.findElement (By.cssSelector ( "input.jsp [name = btnK]" ))
Chúng tôi đã tạo một tập lệnh mẫu để bạn hiểu rõ hơn về cách sử dụng CSS – Tag, Class và Attribute Selector. Chúng tôi đã nhúng các nhận xét trong mỗi phần mã sẽ hướng dẫn bạn thực hiện toàn bộ quy trình tự động hóa.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
public class SampleFour {
public static void main(String[] args) {
// System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );
// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
// Launch Website
driver.navigate().to("www.google.com");
// Click on the textbox and send value
driver.findElement(By.cssSelector("input.gsfi[name=q]")).sendKeys("websitehcm.com");
// Click on the Google Search button using click() command
driver.findElement(By.cssSelector("input.jsp[name=btnK]")).click();
// Close the Browser
driver.close();
}
} Xem thêm:
Xác định Element html trong Selenium Webdriver sử dụng tag và class
Trong phần này, bạn sẽ học cách xác định vị trí một phần tử web cụ thể bằng cách sử dụng CSS – Tag và Class Selector.
Như chúng ta biết rằng việc xác định vị trí một phần tử web cụ thể liên quan đến việc kiểm tra các mã HTML của nó.
Làm theo các bước dưới đây để tìm Hộp văn bản trên trang web:
- Mở URL: https://www.testandquiz.com/selenium/testing.html
- Nhấp chuột phải vào hộp kiểm “Automation test” trên trang web mẫu và chọn Kiểm tra phần tử.
- Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến source code element.
Hãy ghi chú lại Thẻ của nó và giá trị của thuộc tính Class của nó.
Cú pháp Java để định vị phần tử web thông qua CSS – Bộ chọn thẻ và lớp được viết như sau:
driver.findElement(By.cssSelector("Tag.Value of Class attribute")) Do đó, để định vị Hộp kiểm “Automation test” trên trang web mẫu, chúng tôi sẽ sử dụng thẻ đầu vào cùng với giá trị của thuộc tính Lớp của nó:
driver.findElement (By.cssSelector ("input.Automation"))Chúng tôi đã tạo một tập lệnh mẫu để bạn hiểu rõ hơn về cách sử dụng CSS – Tag và Class Selector. Chúng tôi đã nhúng các nhận xét trong mỗi phần code sẽ hướng dẫn bạn thực hiện toàn bộ quy trình tự động hóa.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
public class SampleTwo {
public static void main(String[] args) {
// System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );
// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
// Launch Website
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");
// Locate the checkbox by cssSelector and check it using click() function
driver.findElement(By.cssSelector("input.Automation")).click();
// Close the Browser
driver.close();
}
} Xác định element html trong Selenium webdriver internal text
Các văn bản bên trong là các mẫu chuỗi mà thẻ HTML hiển thị trên trang web.
- Cú pháp: css = <HTML tag> <:> <contains> <(“internal text”)>
- ‘:’ được sử dụng để ký hiệu phương thức chứa.
- Ví dụ: chúng tôi sẽ xác định Bộ chọn CSS cho nút gửi “Đăng nhập” của trang đăng nhập Kiểm tra và Trắc nghiệm là: css=button:contains(“Log In”)
- Nhấp vào nút “Tìm mục tiêu trong trang” để kiểm tra xem Bộ chọn CSS đã xác định có định vị phần tử mong muốn hay không.
Xem thêm Content-Section element trong html
