Bộ chọn CSS trong Selenium là gì?

Trong bài viết trước chúng ta đã thấy tất cả các chiến lược định vị trong Selenium Web Driver. Bạn có thể đọc bài viết đó Giới thiệu về bộ định vị & các chiến lược định vị khác nhau trong Selenium

Trong bài viết này, chúng ta thấy chi tiết các chiến lược để định vị phần tử chỉ sử dụng CSS Selector. Vui lòng đọc hết bài viết này vì thủ thuật được đề cập cuối cùng rất quan trọng

CSS có nghĩa là biểu định kiểu xếp tầng được sử dụng để mô tả cách trình bày tài liệu được viết bằng ngôn ngữ đánh dấu như HTML. Bộ chọn CSS trong Selenium là các mẫu chuỗi được sử dụng để 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 khác. Xác định một phần tử là cách ưa thích nhất để định vị một phần tử trong CSS vì nó có thể truy cập ngay cả những phần tử không có ID hoặc tên

Chúng tôi cũng sẽ sử dụng yếu tố tương tự trong bài viết này

Chúng ta có thể tìm hiểu đối tượng bằng bộ chọn CSS theo các cách sau

1. Chỉ với thuộc tính id của phần tử

Bộ chọn CSS cho phần tử có id có thể được viết bằng ký hiệu '#' trước id của phần tử đó và mã css sẽ được viết là

driver.findElement(By.cssSelector('#id_of_element'));

2. Chỉ tagName của thuộc tính. Điều này có thể được viết đơn giản bằng cách gọi tagName đó là CSSSelector. Đối với đoạn mã trên, chúng tôi có thẻ đầu vào nên CSSSelector cho thẻ đó phải là

driver.findElement(By.cssSelector('input'));

Nhưng nó sẽ xác định tất cả các phần tử có thẻ đầu vào và lấy phiên bản đầu tiên của nó trong khi thực thi

3. Thẻ có thuộc tính id của phần tử. Chúng ta có thể sử dụng cú pháp trên bằng cách thêm tên thẻ của phần tử đó

Syntax: tagName#id
driver.findElement(By.cssSelector('tagName#id'));

4. Chỉ với thuộc tính lớp của phần tử. Bộ chọn CSS cho phần tử có lớp có thể được viết bằng cách sử dụng ‘. ' biểu tượng trước lớp của phần tử đó và mã css sẽ được viết dưới dạng trình điều khiển. findElement(By. cssSelector(“. tên lớp"));

driver.findElement(By.cssSelector('.className'));

Nếu có khoảng cách giữa tên lớp thì đây sẽ được coi là tên nhiều lớp và chúng ta phải thêm '. ' cho tên lớp khác là tốt

Đây là mã html cho thanh Tìm kiếm trong trang web Amazon. Để viết bộ chọn CSS, nó phải được viết là

driver.findElement(By.cssSelector('.className1.className2'));
driver.findElement(By.cssSelector(".nav-input.nav-progressive-attribute")).sendKeys("Mobile");

5. Gắn thẻ với thuộc tính lớp của phần tử. Ở đây chúng ta chỉ cần thêm tagName vào CSSselector bằng cú pháp lớp

Syntax: tagName.className
driver.findElement(By.cssSelector('tagName.className'));

6. Bộ chọn CSS cho phần tử có tên thẻ và Thuộc tính. Nó có thể được viết là tagName[attribute=’attribute’]

Vui lòng quan tâm đến dấu ngoặc đơn và dấu ngoặc kép nếu không tập lệnh sẽ cung cấp cho bạn lỗi thời gian biên dịch

7. CSSSelector với Thẻ, lớp và thuộc tính cùng nhau. Nó có thể được viết dưới dạng tagName. lớp[thuộc tính=giá trị thuộc tính]

Đối với yếu tố này

Điều này có thể được viết như

driver.findElement(By.cssSelector('#id_of_element'));

8. Chỉ thuộc tính và giá trị. CSS có thể được viết là [attribute=attributeValue]

driver.findElement(By.cssSelector('#id_of_element'));

9. Gắn thẻ với thẻ con ngay lập tức của nó. Chúng tôi muốn theo dõi một phần tử bằng thẻ paret của nó như bên dưới

driver.findElement(By.cssSelector('#id_of_element'));

CSS cho điều này có thể được viết là

driver.findElement(By.cssSelector('#id_of_element'));

10. Gắn thẻ với bất kỳ thẻ con cháu nào của nó. Nếu bạn muốn viết CSS Selector với một thẻ có bất kỳ thẻ con cháu nào của nó mà không phải thẻ ngay dưới đây là cú pháp

driver.findElement(By.cssSelector('#id_of_element'));

11. . bị vô hiệu hóa Một lớp giả cuối cùng mà chúng ta sẽ xem xét là. Vô hiệu hóa. Điều này rất hữu ích khi bạn tìm kiếm một phần tử cụ thể bị tắt hoặc bật. Trong thực tế, đặc điểm kỹ thuật có các lớp như. kích hoạt,. đã kiểm tra và các lớp giả khác để bạn sử dụng

CSS sẽ cho phép chúng tôi xác định phần tử bằng cách khớp một phần giá trị thuộc tính của nó với sự trợ giúp của một số toán tử ký tự đại diện

1. Bắt đầu bằng (^)
2. Kết thúc bằng ($)
3. Chứa (*)

Chúng tôi sẽ xem xét cùng một yếu tố cho ví dụ này

driver.findElement(By.cssSelector('#id_of_element'));

1. Bắt đầu bằng (^). Nó chọn phần tử khớp với thuộc tính có giá trị thuộc tính bắt đầu bằng giá trị được cung cấp theo sau là dấu ^=. Chúng ta có thể viết cùng một phần tử bằng cách sử dụng bộ chọn CSS bên dưới

driver.findElement(By.cssSelector('#id_of_element'));

2. Kết thúc bằng ($). Nó chọn phần tử khớp với thuộc tính có giá trị thuộc tính kết thúc bằng giá trị được cung cấp theo sau là dấu $=. Chúng ta có thể viết cùng một phần tử bằng cách sử dụng bộ chọn CSS bên dưới

driver.findElement(By.cssSelector('#id_of_element'));

3. Chứa (*). Nó chọn phần tử khớp với thuộc tính có giá trị thuộc tính chứa giá trị được cung cấp theo sau dấu *=. Chúng ta có thể viết cùng một phần tử bằng cách sử dụng bộ chọn CSS bên dưới

driver.findElement(By.cssSelector('#id_of_element'));

Trong cả ba trường hợp, tôi đã không chuyển giá trị đầy đủ ở bất kỳ đâu nhưng nó vẫn sẽ xác định phần tử và nhập văn bản vào hộp tìm kiếm mà chúng tôi đã gửi dưới dạng tham số tới sendkeys()

Bây giờ hãy xem xét các yếu tố dưới đây

driver.findElement(By.cssSelector('#id_of_element'));

Hierarchy wise all the elements with are siblings and children of

driver.findElement(By.cssSelector('input'));

driver.findElement(By.cssSelector('input'));

driver.findElement(By.cssSelector('input'));