Hướng dẫn selenium xpath, css selector - selen xpath, bộ chọn css
|
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. 😀 Show 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 nameskhông phải có các cách khác nhau để xác định Element. II. Cách CSS xác định 1 element1. Xác định theo IDhttps://letskodeit.teachable.com/p/practice 1. Xác định theo ID2. Xác định theo các attributes 3. Xác định theo class names2 findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))4. Xác định theo hierarchy a. Ví dụ 1
2. Xác định theo các attributes3. Xác định theo class names 4. Xác định theo hierarchy [name ='enter-name'] findElement(By.name("enter-name")) =
findElement(By.CssSelector("[name ='enter-name']"))a. Ví dụ 1 b. Ví dụ 2 [name="point"][value="2"] 5. Xác định theo ordering input[name="point"][value="2"] 6. Kỹ thuật CSS Selector cho case khó III. Làm thế nào để biết mình đã lấy đúng CSS selectors? 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.Đây là các API xác định element do Selenium Webdriver cung cấp: findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))0Đọc định nghĩa về CSS Selector ở trên và xem list API, thì thấy có vẻ như là đúng là chỉ có 2 loại: CSS và XPath vì Id, class, name, Tag… là các attributes của 1 Element. Khi gọi các methods trên, thực chất đều chuyển thành CssSelector. findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))1Nếu chỉ có 2 loại thì sao Selenium Webdriver lại cung cấp nhiều API thế kia? Cung cấp nhiều methods để giảm bớt sự phức tạp cho người sử dụng thôi, chứ không phải có các cách khác nhau để xác định Element. findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))23. Xác định theo class names4. Xác định theo hierarchy findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))3a. Ví dụ 1 findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))4b. Ví dụ 2  4. Xác định theo hierarchya. Ví dụ 1 a. Ví dụ 1findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))5b. Ví dụ 2 findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))65. 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?b. Ví dụ 2findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))85. Xác định theo ordering 5. Xác định theo ordering6. Kỹ thuật CSS Selector cho case khó III. Làm thế nào để biết mình đã lấy đúng CSS selectors? findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))9Muốn trỏ tới vị trí nào, chúng ta chỉ cần add thêm: 0Ví dụ, ta muốn trỏ tới vị trí số 2 “Orange”, selector của chúng ta sẽ là: 16. 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/ |
