Bài viết này dành cho bất kỳ ai đang sử dụng Selenium hoặc Endtest và muốn biết cách tốt nhất để tìm các phần tử Show
Chìa khóa ở đây là tìm bộ định vị ổn định và đáng tin cậy nhất cho từng phần tử Hãy nhớ rằng việc yêu cầu Selenium xác định vị trí một phần tử cũng giống như nói cho ai đó ở ngoài thị trấn cách tìm một quán cà phê nào đó trong thành phố của bạn Chúng tôi sẽ sử dụng trang Đăng ký Github làm ví dụ Tôi cũng sẽ thực hiện một số so sánh giữa Selenium và Endtest Ngay cả khi bạn đang sử dụng Tiện ích mở rộng Chrome cuối cùng của chúng tôi để định vị các thành phần của mình, bạn vẫn có thể gặp phải các tình huống cần tìm nạp công cụ định vị Chúng tôi sẽ sử dụng các loại công cụ định vị khác nhau để tìm đầu vào Tên người dùng
 1) Tìm phần tử theo IDLuôn là lựa chọn hàng đầu Để lấy ID phần tử của bạn, bạn chỉ cần nhấp chuột phải vào phần tử của mình và nhấp vào tùy chọn Kiểm tra Cấu trúc phần tử của bạn sẽ được đánh dấu trong bảng điều khiển Có vẻ như phần tử của chúng tôi có ID sau đăng nhập người dùng Điều này có nghĩa là dòng mã của bạn sẽ trông như thế này tên người dùng = trình điều khiển. find_element_by_id("user_login") Vì ID phải là duy nhất trên một trang nên đây là loại công cụ định vị đáng tin cậy nhất mà bạn có thể sử dụng Nó giống như chỉ có một cửa hàng Starbucks trong thành phố của bạn và bảo bạn bè đến gặp bạn ở đó, họ không thể bỏ lỡ 2) Tìm phần tử theo tênCũng tốt như ID, nhưng bạn sẽ không gặp nó thường xuyên như mong đợi Các phần tử từ biểu mẫu thường có thuộc tính Tên Chúng ta có thể dễ dàng thấy rằng phần tử của chúng ta có Tên sau đăng nhập người dùng] tên người dùng = trình điều khiển. find_element_by_name("người dùng[đăng nhập]") 3) Tìm phần tử theo tên lớpKhông đáng tin cậy lắm, vì Tên lớp thường được chia sẻ bởi nhiều phần tử Chúng ta có thể dễ dàng thấy rằng phần tử của chúng ta có Tên lớp sau điều khiển biểu mẫu Và nếu chúng ta xem xét kỹ hơn phần còn lại của các đầu vào từ biểu mẫu đó, chúng ta sẽ thấy rằng tất cả chúng đều có Tên lớp điều khiển biểu mẫu tên người dùng = trình điều khiển. find_element_by_class_name("form-control") Điều này có nghĩa là bạn sẽ không thể xác định vị trí đầu vào Tên người dùng đó bằng loại bộ định vị Tên lớp, vì Selenium sẽ gây ra lỗi Endtest có cách tiếp cận thanh lịch hơn ở đây so với Selenium. Nếu bạn cung cấp Tên lớp đó, nó sẽ chỉ cảnh báo cho bạn biết có bao nhiêu phần tử được tìm thấy với Tên lớp đó và phần tử đầu tiên sẽ được sử dụng Nếu Starbucks có Class Name, có lẽ nó sẽ là quán cà phê. Nếu bạn nói với bạn của bạn Gặp tôi ở quán cà phê đó, họ có thể không biết bạn đang nói về quán nào Lỗi phổ biến nhất của người mới bắt đầu là trích xuất tất cả Tên lớp thay vì chỉ một Hãy xem xét yếu tố này Người dùng mới làm quen có thể nói rằng phần tử có Tên lớp sau HeaderMenu-link d-inline-block đường viền không gạch chân viền-xám-tối Nhưng nó thực sự có 5 tên lớp khác nhau HeaderMenu-link d-inline-block đường viền không gạch chân viền-xám-tối Đúng vậy, Tên lớp được phân tách bằng dấu cách Selenium không có xác thực cho điều đó, nhưng Endtest thì có 4) Tìm phần tử bằng XPathĐơn giản là bạn không thể tránh khỏi việc phải sử dụng XPath cho ít nhất một số phần tử. Nó không tệ như họ nói Một XPath giống như một tuyến đường. Có rất nhiều con đường mà bạn của bạn có thể đi để đến quán Starbucks đó Thông thường, một XPath trông giống như thế này /html/body/div[4]/main/div/div/div[1]/p Cách nhanh nhất để lấy XPath là từ bảng điều khiển Chrome Trong trường hợp này, chúng ta có XPath sau //*[@id="user_login"] Nếu bạn có ID ổn định, bạn không nên bận tâm sử dụng XPath Và nếu bạn không có ID ổn định, XPath mà chúng tôi nhận được không đáng tin cậy Có rất nhiều ứng dụng web đang sử dụng ID động cho một số phần tử Một phần tử có ID động giống như một quán cà phê đang đổi tên hàng ngày Bạn đã biết quán cà phê có tên là iCoffee ngày hôm qua, nhưng bạn không biết hôm nay nó sẽ có tên là gì Nói với bạn của bạn để gặp bạn tại iCoffee sẽ gây nhầm lẫn Đó là lúc chúng ta cần viết XPath của riêng mình Tìm hiểu các thuộc tính và đặc điểm ổn định của phần tử đó là gì Quay trở lại ví dụ với quán cà phê có tên khác Một cái gì đó mà không thay đổi về nó là gì? Có lẽ vị trí và thực tế rằng đó là một quán cà phê Điều này có nghĩa là bạn có thể nói với bạn của mình từ ngoài thành phố đến gặp bạn tại quán cà phê từ Trung tâm mua sắm phía Tây Hãy xem xét phần tử của chúng ta và lấy XPath của phần tử gốc của nó Đây là XPath mà chúng tôi nhận được cho cha mẹ của nó //*[@id="signup-form"]/auto-check[1]/dl/dd Đây thực tế là địa chỉ của Trung tâm mua sắm phía Tây trong ví dụ của chúng tôi Bây giờ tất cả những gì chúng ta phải làm là thêm một số chi tiết vào cuối Phần tử Tên người dùng của chúng tôi là một đầu vào và nó có Tên lớp kiểm soát biểu mẫu Điều này có nghĩa là chúng ta cần nối thêm phần sau vào cha mẹ /input[@class="form-control"] Và phần đó dịch sang. Tìm kiếm cha mẹ đó để tìm đầu vào có Tên lớp kiểm soát biểu mẫu Và XPath cuối cùng cho phần tử Username của chúng ta sẽ như thế này //*[@id="signup-form"]/auto-check[1]/dl/dd/input[@class="form-control"] Luôn xác minh XPath của bạn trong bảng điều khiển Chrome bằng cách nhấn Ctrl + F và tìm kiếm nó, bạn sẽ thấy phần tử của mình được đánh dấu như thế này Viết XPath của riêng bạn không quá đáng sợ. Bạn sẽ gặp các tình huống trong đó phần tử của bạn có thể không có ID, nhưng nó sẽ có một thuộc tính đáng tin cậy nhất định khiến nó trở nên độc nhất Trong trường hợp đó, XPath của bạn sẽ trông như thế này //*[@attribute = "attribute_value"] Bạn cũng có thể viết XPath định vị phần tử bằng cách chỉ sử dụng một phần giá trị của thuộc tính //*[chứa(@attribute, "part_of_attribute_value")] Ví dụ: phần tử Tên người dùng của chúng tôi có các thuộc tính sau aria-descriptedby="description_2822cb3d798c" name="user[login]" autocapitalize="off"AFAF="autofocus" required="required" class="form-control" type="text" id="user_login" autocomplete=" Nếu chúng ta muốn sử dụng thuộc tính aria-descriptedby, đây sẽ là XPath //*[@aria-descriptedby = "description_2822cb3d798c"] Nếu bạn đang sử dụng Endtest thay vì Selenium, trình ghi của họ sẽ biết cách tự động trích xuất các XPath tùy chỉnh này 5) Tìm phần tử bằng CSS SelectorLoại bộ định vị CSS Selector tương tự như XPath Một số người thực sự cho rằng nó nhanh hơn Thông thường, Bộ chọn CSS trông như thế này cơ thể> div. ứng dụng chính> chính> div> div Và chúng tôi giải nén nó theo cách tương tự Trong trường hợp này, chúng tôi có Bộ chọn CSS sau #đăng nhập người dùng Nếu bạn quen thuộc với CSS, bạn sẽ biết rằng # là viết tắt của ID Điểm tương đồng với XPath không dừng lại ở đây Nếu bạn có ID ổn định, bạn không nên bận tâm sử dụng CSS Selector Và nếu bạn không có ID ổn định, Bộ chọn CSS mà chúng tôi nhận được không đáng tin cậy Giải pháp? Để viết Bộ chọn CSS tùy chỉnh của riêng chúng tôi Hãy bắt đầu bằng cách trích xuất Bộ chọn CSS cho phần tử gốc của phần tử Tên người dùng Đây là những gì chúng tôi nhận được #signup-form > tự động kiểm tra. con thứ n(4) > dl > dd Bây giờ, giống như chúng ta đã làm với XPath, chúng ta cần thêm một số chi tiết ở cuối Trong trường hợp bạn quên, phần tử Tên người dùng của chúng tôi là một đầu vào và nó có Tên lớp điều khiển biểu mẫu Điều này có nghĩa là chúng ta cần nối thêm phần sau vào cha mẹ > đầu vào. điều khiển biểu mẫu Và phần đó dịch sang Tìm kiếm cha mẹ đó để tìm đầu vào có Tên lớp kiểm soát biểu mẫu Nếu bạn quen thuộc với CSS, dấu chấm là viết tắt của Tên lớp Và Bộ chọn CSS cuối cùng cho phần tử Tên người dùng của chúng ta sẽ trông như thế này #signup-form > tự động kiểm tra. con thứ n(4) > dl > dd > đầu vào. điều khiển biểu mẫu Không bắt buộc phải thêm cả loại phần tử và Tên lớp Bạn chỉ có thể sử dụng một trong số họ #signup-form > tự động kiểm tra. con thứ n(4) > dl > dd > đầu vào #signup-form > tự động kiểm tra. con thứ n(4) > dl > dd >. điều khiển biểu mẫu Một lần nữa, nếu bạn đang sử dụng Endtest thay vì Selenium, trình ghi của họ sẽ biết cách tự động trích xuất các Bộ chọn CSS tùy chỉnh này 6) Tìm phần tử theo văn bản liên kếtLoại công cụ định vị văn bản liên kết chỉ hoạt động đối với các liên kết Phần tử của bạn là một Liên kết nếu nó có định dạng sau A là viết tắt của Anchor Vì phần tử Tên người dùng của chúng tôi là một đầu vào và không phải là một liên kết, nên chúng tôi sẽ không thể xác định vị trí của nó bằng cách sử dụng Văn bản liên kết Điều đáng ghi nhớ là Văn bản liên kết chỉ là văn bản giữa các thẻ Trong trường hợp liên kết từ ảnh chụp màn hình, Văn bản liên kết là Doanh nghiệp Mã Selenium của chúng tôi sẽ trông như thế này Enterprise_link = trình điều khiển. find_element_by_link_text("Doanh nghiệp") 7) Tìm phần tử bằng văn bản liên kết một phầnNhư tên cho thấy, nó giống hệt như Văn bản liên kết, nhưng với sự khác biệt là bạn chỉ cần thêm một phần của Văn bản liên kết Và đây sẽ là mã Selenium của chúng ta Enterprise_link = trình điều khiển. find_element_by_partial_link_text("Enterp") 8) Tìm phần tử theo tên thẻNhư chúng ta đã thấy từ các ví dụ trước, một phần tử luôn có một thẻ Bạn có thể sử dụng loại công cụ định vị Tên thẻ nếu đó là đặc điểm duy nhất của phần tử mà bạn có thể lấy Thực tế mà nói, tôi không nghĩ bạn sẽ sử dụng cái này Endtest có thêm một loại định vị là Text Inside, tương tự như Partial Link Text, nhưng nó dùng được cho mọi loại phần tử Ngay cả khi bộ định vị của bạn đáng tin cậy, bạn sẽ gặp phải các tình huống trong đó ứng dụng web của bạn trải qua quá trình sửa đổi và bạn sẽ mất thời gian để giữ cho các bài kiểm tra của mình đồng bộ với các ứng dụng web của bạn Bộ chọn CSS trong Python Selenium là gì?Bộ chọn CSS này là sự kết hợp giữa một phần tử và một giá trị bộ chọn, giúp xác định phần tử web trong một trang web . Tổng hợp của một phần tử và giá trị bộ chọn được gọi là Mẫu bộ chọn.
Tôi có thể tìm phần tử theo lớp Selenium Python không?Để tìm Phần tử HTML theo thuộc tính tên lớp bằng Selenium trong Python, gọi phương thức find_element() và chuyển By. CLASS_NAME làm đối số đầu tiên và tên lớp (của Phần tử HTML chúng ta cần tìm) làm đối số thứ hai .
CSS Selector tìm XPath như thế nào?Tìm Bộ chọn CSS hoặc XPath . Nhấp chuột phải vào một yếu tố Chọn Kiểm tra Xác định vị trí phần tử trong bảng Thành phần của Công cụ dành cho nhà phát triển Nhấp chuột phải vào dòng của phần tử Chọn Sao chép -> Sao chép Bộ chọn hoặc Sao chép -> Sao chép XPath Dán kết quả vào trường ID của một hành động Find_element_by_css_selector là gì?Phương thức find_element_by_css_selector được sử dụng để xác định phần tử có loại định vị css và giá trị định vị được truyền dưới dạng đối số cho phương thức. Cuối cùng, phương thức văn bản được sử dụng để lấy nội dung văn bản của phần tử. Chúng ta hãy xem html của một phần tử có nội dung văn bản. |
