Hướng dẫn selenium disable css - selen vô hiệu hóa css

Unfortunately, it is not possible in Chrome.

ChromeDriver disable rendering and CSS

Chrome/chromedriver cannot run headless without some virtual screen like Xserver, and it can't not-render the html and css.not-render the html and css.

Exhaustive list of all options that are allowed:

profile.default_content_setting_values:

cookies,
images,
javascript,
plugins,
popups,
geolocation,
notifications,
auto_select_certificate,
fullscreen,
mouselock,
mixed_script,
media_stream,
media_stream_mic,
media_stream_camera,
protocol_handlers,
ppapi_broker,
automatic_downloads,
midi_sysex,
push_messaging,
ssl_cert_decisions,
metro_switch_to_desktop,
protected_media_identifier,
app_banner,
site_engagement,
durable_storage

Khi bắt đầu tìm hiểu và học về Selenium Webdriver, mình thấy rất nhiều sách chỉ ra các cách để xác định vị trí của các elements trên trang web, đọc muốn hoa mắt và cảm thấy rất mơ hồ. Ngày đó, mình thấy ai cũng dạy là tìm theo thứ tự id, name, class… cuối cùng là CSS và Xpath, nên những project demo của mình lúc nào thì cứ id và name mà phang, sau đó là Xpath, còn CSS thì không bao giờ đụng đến. Sau này, khi đọc nhiều hơn về Selenium Webdriver, mới thấy là trước đây mình chỉ hiểu cái bề mặt, thật ra chỉ có 2 loại chính là CSS Selector và Xpath Selector. Tại sao lại như vậy??? Đọc tiếp thì biết. 😀

Nội dung bài viết

• I. Vậy CSS selectors là gì?
• II. Cách CSS xác định 1 element
  • 1. Xác định theo ID
  • 2. Xác định theo các attributes
  • 3. Xác định theo class names
  • 4. Xác định theo hierarchy
    • a. Ví dụ 1
    • b. Ví dụ 2
  • 5. Xác định theo ordering
  • 6. Kỹ thuật CSS Selector cho case khó
• III. Làm thế nào để biết mình đã lấy đúng CSS selectors?

I. Vậy CSS selectors là gì?

II. Cách CSS xác định 1 element

1. Xác định theo ID

• By.ByClassName
• By.ByCssSelector
• By.ById
• By.ByLinkText
• By.ByName
• By.ByPartialLinkText
• By.ByTagName
• By.ByXPath

2. Xác định theo các attributes

1 CSS selector là 1 đoạn chuỗi String được thiết kế để xác định 1 hay nhiều elements trên 1 trang web bằng cách sử dụng các attributes và / hoặc dùng thứ tự cha – con của các elements trong DOM.không phải có các cách khác nhau để xác định Element.

II. Cách CSS xác định 1 element

1. Xác định theo IDhttps://letskodeit.teachable.com/p/practice

1. Xác định theo ID

2. Xác định theo các attributes
Nó trông giống như vậy:

Nếu dùng CSS Selector thì nó là: 
findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
3
findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
3
findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
Tất nhiên là có 1 vài ngoại lệ…(đùa, cái gì cũng có ngoại lệ, học mệt ghê). Đó là khi Dev dùng 1 ID cho 2 elements khác nhau, do lỗi lập trình, chứ không phải là do cố ý. Hoặc là việc sử dụng ID động chứ ko phải ID tĩnh. ID động là dạng ID sẽ thay đổi sau mỗi lần load trang, nó có dạng:

Để xử lý cái “của nợ” này, thì có 2 cách và sẽ được nói ở phía dưới:

• 1 là matching Id theo kiểu wild card
• 2 là sử dụng cách xác định khác

2. Xác định theo các attributes

Một attribute về cơ bản là 1 tính chất của 1 element. Và 1 element thì có rất các loại tính chất khác nhau. Ví dụ:

Những attributes có thể được xác định bằng cách viết sau:

[name ='enter-name']

findElement(By.name("enter-name")) = 
findElement(By.CssSelector("[name ='enter-name']"))

Tất nhiên là sẽ có những trường hợp mà nếu chỉ dùng 1 attribute thì không thể xác định được vị trí của element đó vì nó có nhiều element được đánh dấu giống nhau. Ví dụ:

Ta chỉ cần thêm thông tin attribute là xong:

[name="point"][value="2"]

Nếu muốn rõ ràng hơn, ta có thể cho thêm tag của element đó:

input[name="point"][value="2"]

Như đã nói ở trên, CSS Selector còn cung cấp 1 số tính năng của wild card, như matching với đoạn đầu, đoạn cuối và vị trí bất kỳ.

^= (match với đoạn đầu)

0 
$= (match với đoạn cuối)

*= (match với vị trí bất kỳ)

2
Và ta cũng có thể kếp hợp những cái này với nhau

3. Xác định theo class names

Hầu hết các elements đều có 1 attribute class, trong đó có chứa các giá trị class ngăn cách nhau bằng 1 khoảng trống, class=”class1 class2 class3″Ví dụ:
Ví dụ:

4
Để match với element mà sử dụng class thì t dùng cú pháp:

Tuy nhiên, dùng với class thì không an toàn, vì thông thường class để style cho 1 group nhiều element. Check thử ví dụ trên, ta sẽ thấy có 5 kết quả trả về.

4. Xác định theo hierarchy

Xác định theo Hierarchy là kiểu đi theo dạng thác nước, có vẻ giống với Xpath, đi từ trên xuống dưới, khá phức tạp. Nhưng đôi khi attributes không đủ để xác định, ta buộc phải dùng đến nó.

a. Ví dụ 1

6
Cú pháp của nó sẽ là:

Giả sử trong ví dụ trên, ta muốn lấy cái label có chứa Justin, ta phải dùng 1 attribute để xác định được thằng element cha của nó rồi mới đi tới nó. Giữa 2 cha con có 1 khoảng trống.

CSS Selector lúc đó sẽ là:

8
b. Ví dụ 2

Trong selector này, mình muốn tìm 1 , nằm trong 1 element có class .comment mà nó lại là con của 1 element có id là supportForm.

5. Xác định theo ordering

Trong hầu hết các trường hợp liên quan đến list dữ liệu, ta đều phải xử lý bằng các xác định thứ tự của chúng trong list đấy.

Ví dụ:

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))

Muốn trỏ tới vị trí nào, chúng ta chỉ cần add thêm:

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))

Ví dụ, ta muốn trỏ tới vị trí số 2 “Orange”, selector của chúng ta sẽ là:

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))

6. Kỹ thuật CSS Selector cho case khó

Đôi khi bạn thử những cách trên riêng rẽ, bạn sẽ thấy là nó sẽ matching nhiều hơn 1 node. Do đó, ta cần phải thêm điều kiện để nó chỉ matching đúng 1 note duy nhất. Hãy đọc bài này để biết cách xử lý.

III. Làm thế nào để biết mình đã lấy đúng CSS selectors?

Bật Chrome > Inspect

Sau đó trỏ chuột vào phần Element, bấm CTRL + F, nó sẽ xuất hiện như hình.

Bạn hãy thử các CSS Selector vào khung kia để kiểm tra kết quả. Have Fun!

Nếu có bất cứ thắc mắc gì, hãy để lại comment nhé.

Bài viết có lấy tư liệu từ bài https://ghostinspector.com/blog/css-selector-strategies-automated-browser-testing/