Html có được Selenium hỗ trợ không?

Là một kỹ sư chất lượng, chúng ta đều biết rằng để thử nghiệm một ứng dụng dựa trên web, chúng ta cần thực hiện các hành động cụ thể [chẳng hạn như nhấp, nhập, v.v. ] trên các phần tử HTML. Bây giờ, khi chúng ta tiến hành tự động hóa các ứng dụng đó, công cụ tự động hóa cũng phải có khả năng thực hiện các thao tác tương tự trên các phần tử HTML mà con người có khả năng thực hiện. Vì vậy, bây giờ câu hỏi được đặt ra, làm cách nào để các công cụ tự động hóa này xác định phần tử HTML nào chúng cần để thực hiện một thao tác cụ thể?

Bộ định vị là cách để xác định phần tử HTML trên trang web và hầu như tất cả các công cụ tự động hóa giao diện người dùng đều cung cấp khả năng sử dụng bộ định vị để xác định phần tử HTML trên trang web. Theo xu hướng tương tự, Selenium cũng sở hữu khả năng sử dụng "Bộ định vị" để xác định các phần tử HTML và thường được gọi là "Bộ định vị Selenium". Selenium hỗ trợ nhiều loại định vị khác nhau. Hãy hiểu sâu về khái niệm "Bộ định vị Selenium" bằng cách trình bày chi tiết theo các chủ đề sau

• Bộ định vị trong Selenium là gì?
  • Làm cách nào để định vị phần tử web trong DOM?
  • Những bộ định vị nào được Selenium hỗ trợ?
• Làm cách nào để sử dụng bộ định vị để tìm các phần tử web với Selenium?
  • Cách xác định vị trí các phần tử trong Selenium bằng By, ID, Name, Xpath, v.v.
  • Ví dụ hiển thị việc sử dụng tất cả các bộ định vị?
• Thực tiễn tốt nhất để sử dụng bộ định vị trong Selenium

Bộ định vị trong Selenium là gì?

Như đã thảo luận ở trên, việc xác định đúng thành phần GUI trên trang web là điều kiện tiên quyết để tạo bất kỳ tập lệnh tự động hóa thành công nào. Đó là nơi định vị đi vào hình ảnh. Bộ định vị là một trong những thành phần thiết yếu của cơ sở hạ tầng Selenium, giúp các tập lệnh Selenium xác định duy nhất các Thành phần Web [chẳng hạn như hộp văn bản, nút, v.v. ] hiện tại của trang web. Vì vậy, làm thế nào để chúng ta có được các giá trị của các bộ định vị này?

Làm cách nào để định vị phần tử web trong DOM?

Như chúng ta đã biết, điều đầu tiên cần bắt đầu là tìm phần tử HTML trong DOM [Mô hình đối tượng tài liệu], mà chúng ta cần lấy bộ định vị. Chúng ta có thể làm theo các bước sau để xác định phần tử web trong DOM trên trình duyệt web

Ghi chú. Chúng tôi đang trình bày các bước để xác định phần tử web trong Google chrome. Các bước cho các trình duyệt khác hầu như sẽ giống nhau, ngoại trừ cách bạn có thể mở DOM trong trình duyệt đó. Chúng tôi đang sử dụng trang demo ToolsQa "https. // demoqa. com/" để tham khảo

1. Có thể truy cập DOM trong Google Chrome bằng cách nhấn F12 hoặc nhấp chuột phải vào trang web rồi chọn Kiểm tra [như minh họa trong ảnh chụp màn hình bên dưới]

1. Sau khi chúng tôi nhấp vào "Tùy chọn kiểm tra", thao tác này sẽ mở  bảng điều khiển Công cụ dành cho nhà phát triển, như minh họa bên dưới. Theo mặc định, nó sẽ mở tab "Phần tử", biểu thị cấu trúc DOM hoàn chỉnh của trang web. Bây giờ, nếu chúng ta di con trỏ chuột qua các thẻ HTML trong DOM, nó sẽ làm nổi bật các phần tử tương ứng mà nó đại diện trên trang web

3. Bây giờ, vấn đề chính là, làm cách nào để chúng tôi tìm thấy phần tử web trong DOM. Nhấp vào mũi tên "Biểu tượng chuột" [như được chỉ định bởi Marke 1 trong ảnh chụp màn hình bên dưới] rồi chọn phần tử web trên trang web. Nó sẽ tự động đánh dấu phần tử HTML tương ứng trong DOM. Giả sử chúng ta muốn tìm các phần tử HTML tương ứng với hình ảnh biểu ngữ [như được hiển thị bên dưới bởi điểm đánh dấu 3]. Khi chúng ta chọn điểm trỏ chuột và nhấp vào hình ảnh biểu ngữ, nó sẽ tự động đánh dấu phần tử HTML tương ứng, như được hiển thị bởi điểm đánh dấu 2, trong ảnh chụp màn hình bên dưới

Vì vậy, theo cách này, chúng ta có thể dễ dàng tìm kiếm phần tử HTML trong DOM tương ứng với phần tử web trên trang web. Bây giờ, hãy cố gắng hiểu làm thế nào chúng ta có thể lấy một công cụ định vị cho các thành phần web này, Selenium có thể trực tiếp sử dụng công cụ này để xác định duy nhất các thành phần web này

Những bộ định vị nào được Selenium hỗ trợ?

Có nhiều loại công cụ định vị khác nhau, sử dụng chúng, chúng tôi có thể xác định duy nhất một phần tử web trên Trang web. Hình dưới đây cho thấy một mô tả tốt về một số loại bộ định vị mà Selenium hỗ trợ

Để truy cập tất cả các bộ định vị này, Selenium cung cấp lớp “By”, giúp định vị các phần tử trong DOM. Nó cung cấp một số phương thức khác nhau [một số phương thức trong hình bên dưới] như className, cssSelector, id, linkText, name, partialLinkText, taName, và xpath, v.v. , có thể xác định các phần tử web dựa trên các chiến lược định vị tương ứng của chúng

Bạn có thể nhanh chóng xác định tất cả các bộ định vị được hỗ trợ bởi Selenium bằng cách duyệt qua tất cả các phương thức hiển thị trên lớp "By", như minh họa bên dưới

Như chúng ta có thể thấy, Selenium hỗ trợ các bộ định vị sau

• ClassName – Toán tử ClassName sử dụng thuộc tính lớp để xác định một đối tượng
• cssSelector – CSS được sử dụng để tạo quy tắc kiểu cho trang web và có thể được sử dụng để xác định bất kỳ phần tử web nào
• Id – Tương tự như class, chúng ta cũng có thể xác định các phần tử bằng cách sử dụng thuộc tính ‘id’
• linkText – Văn bản được sử dụng trong siêu liên kết cũng có thể định vị phần tử
• tên – Thuộc tính tên cũng có thể xác định một phần tử
• một phầnLinkText – Một phần của văn bản trong liên kết cũng có thể xác định một phần tử
• tagName – Chúng ta cũng có thể sử dụng thẻ để định vị các phần tử
• xpath – Xpath là ngôn ngữ được sử dụng để truy vấn tài liệu XML. Điều tương tự có thể xác định duy nhất phần tử web trên bất kỳ trang nào

Bây giờ, hãy hiểu cách sử dụng tất cả các loại bộ định vị này trong khung Selenium

Làm cách nào để sử dụng bộ định vị để tìm các phần tử web với Selenium?

Như chúng tôi đã đề cập ở trên, Selenium hỗ trợ nhiều loại bộ định vị khác nhau. Hãy theo các chi tiết và cách sử dụng của tất cả chúng

Làm cách nào để định vị phần tử web bằng cách sử dụng thuộc tính "id"?

"ID" làm công cụ định vị là một trong những cách phổ biến nhất để xác định các thành phần trên trang web. Theo W3C, ID cho phần tử web luôn phải là duy nhất. ID là một trong những cách nhanh nhất và duy nhất để định vị các phần tử web và được coi là một trong những phương pháp đáng tin cậy nhất để xác định phần tử. Nhưng với sự tiến bộ trong công nghệ và nhiều trang web động hơn, "ID" được tạo động và thường không phải là cách đáng tin cậy để xác định vị trí phần tử web vì chúng thay đổi đối với những người dùng khác nhau

Hãy hiểu cách sử dụng thuộc tính "id" để định vị một phần tử web với sự trợ giúp của một ví dụ

Giả sử chúng ta có hộp văn bản định vị Tên trên trang web "https. // demoqa. com/automation-practice-form". Khi chúng tôi kiểm tra nó trong DOM, chúng tôi thấy cấu trúc DOM sau

Như chúng ta có thể thấy, thẻ HTML "Input" có các thuộc tính và thuộc tính sau

Như chúng ta có thể thấy, thẻ HTML chứa thuộc tính “id” bên trong thẻ đầu vào. Id ở đây được sử dụng là “firstName*” mà chúng ta có thể sử dụng để định vị phần tử này trong trang web. Bây giờ, để tìm hộp văn bản “First Name” trên trang web, chúng ta có thể sử dụng cú pháp sau

By.id["firstName"];

Như chúng ta có thể thấy rằng chúng ta đã sử dụng "By. id[]" và chúng tôi đã chuyển "firstName", là "id" của hộp văn bản mà chúng tôi đang cố định vị. Vì vậy, theo cách này, chúng tôi có thể định vị bất kỳ thành phần web nào có thuộc tính "id" được chỉ định liên kết với nó

Làm cách nào để định vị phần tử web bằng cách sử dụng thuộc tính "tên"?

Tương tự như thuộc tính id, Selenium cũng cung cấp cho người dùng cách xác định phần tử bằng thuộc tính name. Nhưng ngược lại với id, một trang web có thể có nhiều thành phần có cùng thuộc tính “tên”. Vì vậy, nếu định sử dụng thuộc tính tên để nhận dạng một thành phần web, thì chúng ta phải luôn đảm bảo rằng thuộc tính tên phải chứa một giá trị duy nhất. Mặt khác, nó có thể xác định một số thành phần khác nhau trên cùng một trang, có thể có cùng giá trị tên

Nếu nhiều phần tử có cùng giá trị của thuộc tính ‘name’, thì Selenium sẽ chỉ chọn các giá trị đầu tiên trong trang phù hợp với tiêu chí tìm kiếm. Vì vậy, chúng tôi luôn khuyên bạn nên đảm bảo rằng giá trị của thuộc tính tên phải là duy nhất khi chúng tôi chọn nó để định vị phần tử web

Hãy hiểu cách sử dụng thuộc tính "tên" để định vị một phần tử web với sự trợ giúp của một ví dụ

Ví dụ: giả sử chúng ta cần tìm hộp kiểm trong phần giới tính trên trang web "https. // demoqa. com/automation-practice-form", như được đánh dấu bên dưới

Như chúng ta có thể thấy, thẻ HTML "Đầu vào" đại diện cho Hộp kiểm Nam có các thuộc tính và thuộc tính sau

Ta có thể thấy thuộc tính ‘tên ‘ có giá trị là ‘giới tính’. Chúng ta có thể sử dụng cú pháp sau để định vị phần tử web bằng cách sử dụng lớp "By"

By.name["gender"];

Như chúng ta có thể thấy, lớp "By" cung cấp phương thức "name", phương thức này chấp nhận giá trị của thuộc tính "name" của phần tử web. Vì vậy, bằng cách sử dụng điều này, chúng tôi có thể xác định vị trí một phần tử web có thuộc tính tên duy nhất

Làm cách nào để định vị phần tử web bằng cách sử dụng thuộc tính "ClassName"?

ClassName cho phép SeleniumSelenium tìm các phần tử web dựa trên các giá trị lớp của DOM. Ví dụ: nếu chúng ta muốn xác định hoặc thực hiện bất kỳ thao tác nào trên phần tử biểu mẫu, chúng ta có thể sử dụng lớp để xác định nó

Nếu chúng ta nhìn vào cấu trúc DOM của biểu mẫu, chúng ta có thể thấy đoạn mã sau bao quanh toàn bộ biểu mẫu

Chúng ta có thể sử dụng giá trị thuộc tính lớp từ DOM ở trên để xác định biểu mẫu. Để xác định giống nhau trên trang web, chúng ta có thể sử dụng cú pháp sau

By.className["practice-form-wrapper"];

Để xác định thành công, chúng tôi cần đảm bảo rằng giá trị tên lớp mà chúng tôi đang sử dụng để định vị phần tử web, tôi. e. , biểu mẫu web, là duy nhất và bất kỳ lớp nào khác không có cùng giá trị. Nếu bất kỳ lớp nào khác chứa cùng một giá trị như thế này, thì Selenium sẽ chọn bất kỳ phần tử nào đến trước trong khi loại bỏ qua trang web

Làm cách nào để định vị phần tử web bằng cách sử dụng thuộc tính "LinkText" và "partialLinkText"?

LinkText và partialLinkText đều có chức năng khá giống nhau và định vị các phần tử web bằng cách sử dụng các văn bản siêu liên kết. Chúng ta chỉ có thể sử dụng chúng cho các phần tử chứa thẻ anchor[

By.id["firstName"];

7]. Tương tự như các chiến lược định vị khác, nếu có nhiều siêu liên kết có cùng văn bản trên trang, thì Selenium sẽ luôn chọn liên kết đầu tiên

Giả sử chúng ta cần nhấp vào liên kết như hình bên dưới cho liên kết "Trang chủ"

Như chúng ta có thể thấy, phần tử neo có các thuộc tính và thuộc tính sau

Home

Để xác định các yếu tố sử dụng văn bản liên kết hoặc văn bản liên kết một phần, chúng ta cần sử dụng văn bản siêu liên kết, như hình bên dưới

________số 8

Tương tự, một phần văn bản liên kết cũng có thể nhận ra phần tử bằng cách sử dụng một phần của văn bản siêu liên kết, như minh họa bên dưới

By.partialLinkText["Ho"];

Nó sẽ xác định bất kỳ liên kết nào có chứa 'Ho' trong văn bản siêu liên kết. Tương tự như vậy, nếu một số liên kết có chứa “Ho”, thì Selenium sẽ chọn liên kết đầu tiên

Làm cách nào để định vị phần tử web bằng cách sử dụng "TagName"?

Loại công cụ định vị này sử dụng tên thẻ để xác định các thành phần trong trang web. Tên thẻ là thẻ HTML, chẳng hạn như ***input, div, thẻ neo, nút, v.v.

Cú pháp sau tìm các phần tử web có tagName

By.id["firstName"];

0

Bộ định vị tagName trả về tất cả các phần tử từ trang chứa một thẻ được chỉ định

Làm cách nào để xác định vị trí phần tử web bằng cách sử dụng "CSSselector"?

Biểu định kiểu CSS hoặc Cascading được sử dụng rộng rãi để tạo kiểu trang web và do đó có thể là phương tiện hiệu quả để định vị các phần tử web khác nhau. Ngày nay, hầu hết các trang web được thiết kế động. Do đó, khá khó khăn để có được một id, tên hoặc lớp duy nhất để định vị phần tử. Trong loại tình huống này, bộ chọn CSS có thể là một giải pháp thay thế tuyệt vời vì chúng nhanh hơn nhiều so với các chiến lược bộ định vị khác

Cú pháp cơ bản để xác định một phần tử web bằng CSS như sau

By.id["firstName"];

0

Ví dụ: giả sử chúng tôi muốn tìm hộp văn bản đầu vào sau bằng bộ chọn CSS

Như chúng ta có thể thấy, phần tử đầu vào có các thuộc tính và thuộc tính sau

By.id["firstName"];

1

Bây giờ, để tìm phần tử bằng bộ chọn CSS, chúng ta phải sử dụng cú pháp sau

By.id["firstName"];

2

Tương tự, chúng ta có thể sử dụng các thuộc tính khác cùng với các thẻ để xác định các bộ định vị CSS khác nhau. Chúng tôi sẽ thảo luận chi tiết hơn về bộ chọn CSS trong một hướng dẫn khác

Làm cách nào để xác định vị trí phần tử web bằng cách sử dụng thuộc tính "xpath"?

XPath sử dụng biểu thức XML để định vị một phần tử trên trang web. Tương tự như bộ chọn CSS, Xpath khá hữu ích trong việc định vị các phần tử động trên trang web. Xpath có thể truy cập bất kỳ phần tử nào có trong trang web ngay cả khi chúng có thuộc tính động

Cú pháp cơ bản để xác định một phần tử web bằng cách sử dụng chiến lược định vị XPath như sau

By.id["firstName"];

3

Trong đó tag_name là tên của thẻ trong cấu trúc DOM và thuộc tính là một thuộc tính của phần tử đích có thể xác định duy nhất phần tử web

Ví dụ: giả sử chúng tôi muốn tìm hộp văn bản đầu vào sau bằng XPath

XPath cho ví dụ trên sẽ là

By.id["firstName"];

4

Vì vậy, mã mẫu để tìm phần tử bằng XPath sẽ như sau

By.id["firstName"];

5

Ở đây chúng tôi đã sử dụng thẻ đầu vào và thuộc tính id để xác định phần tử. Chúng tôi sẽ đề cập chi tiết sâu hơn về chiến lược "XPath locator" trong một bài viết khác

Bây giờ chúng ta hãy xem cách sử dụng các chiến lược của bộ định vị này để xác định các thành phần web khác nhau

Ví dụ hiển thị cách sử dụng tất cả các chiến lược của bộ định vị trong Selenium

Giả sử chúng tôi muốn tự động hóa các hành động cụ thể trên trang web. trên "https. // demoqa. com/automation-practice-form". Đoạn mã sau đây cho thấy việc sử dụng các loại bộ định vị Selenium khác nhau để xác định và tìm kiếm các phần tử trên trang web

By.id["firstName"];

6

Giờ đây, sự tương tác với bất kỳ ứng dụng web nào đều yêu cầu trình điều khiển Selenium xác định các phần tử web trên trang. Cho đến khi và trừ khi một phần tử được xác định chính xác, thì không thể kích hoạt các sự kiện như nhấp, nhập, v.v. trên bất kỳ phần tử web nào. Bây giờ để tìm kiếm các phần tử web, Selenium cung cấp hai phương thức

• tìm phần tử. tìm và trả về một phần tử web duy nhất dựa trên tiêu chí tìm kiếm của bộ định vị
• tìm phần tử. tìm và trả lại tất cả các phần tử web dựa trên tiêu chí tìm kiếm của bộ định vị

Cả hai phương thức này đều chấp nhận đối tượng của lớp "By" và sau đó trả về phần tử web tương ứng. Chúng tôi đã sử dụng findElement của Selenium WebDriver để tìm kiếm các phần tử web khác nhau và đã chuyển các loại bộ định vị khác nhau bằng cách gọi phương thức khác nhau của lớp "By"

Thực tiễn tốt nhất cho bộ định vị Selenium

Chọn bộ định vị chính xác để nhận dạng phần tử web là điều khá cần thiết trong Selenium. Dưới đây là một số phương pháp hay nhất mà một kỹ sư chất lượng cần tuân theo để sử dụng hiệu quả các bộ định vị trong khung tự động hóa dựa trên Selenium WebDriver

• Không sử dụng các giá trị thuộc tính động để định vị các phần tử vì chúng có thể thay đổi thường xuyên và dẫn đến hỏng tập lệnh định vị. Nó cũng ảnh hưởng nghiêm trọng đến khả năng bảo trì, độ tin cậy và hiệu quả của tập lệnh tự động hóa
• Các thuộc tính ID và tên được ưu tiên hơn các công cụ định vị khác nếu trang web của bạn chứa ID và tên duy nhất, thì bạn nên sử dụng chúng thay vì XPath vì chúng nhanh hơn và hiệu quả hơn
• Trong khi sử dụng bộ định vị, hãy đảm bảo rằng bộ định vị của bạn trỏ chính xác đến phần tử được yêu cầu. Nếu tình huống cần thiết cần thực hiện một số thao tác trên một phần tử, thì hãy đảm bảo rằng bộ định vị của bạn chỉ khớp chính xác với một phần tử. Nếu trình định vị trỏ đến một số phần tử khác nhau, thì nó có thể gây ra sự cố trong tập lệnh của bạn
• Không bao giờ sử dụng công cụ định vị để định vị các phần tử được tạo tự động trên trang web. Đôi khi trong môi trường web động, thuộc tính thuộc tính phần tử được tạo trong thời gian chạy. Người ta nên tránh những yếu tố này vì chúng có thể gây ra sự cố trong quá trình thực thi tập lệnh
• Trong khi làm việc với bộ định vị XPath hoặc CSS, bạn nên tránh sử dụng trực tiếp bộ định vị do Chrome Dev Tools tạo ra. Đây có vẻ là một trong những cách dễ nhất để tạo XPath, nhưng về lâu dài, nó gây ra các vấn đề về độ tin cậy, sự cố mã, các vấn đề về khả năng bảo trì, v.v. Việc sử dụng những thứ này có vẻ hấp dẫn, nhưng bạn nên tạo XPath tùy chỉnh của mình trong thời gian dài hơn

Chìa khóa rút ra

• Selenium hỗ trợ 8 loại bộ định vị khác nhau là id, name, className, tagName, linkText, partLinkText, CSS selector và xpath
• Sử dụng id là một trong những phương pháp nhận dạng phần tử nhanh và đáng tin cậy nhất. Thông thường, id luôn là duy nhất trên một trang web nhất định
• Bộ chọn CSS và XPath có thể xác định các thành phần động trên trang web. Có thể sử dụng kết hợp các thuộc tính và tên thẻ khác nhau với CSS và xpath để xác định bất kỳ phần tử đã cho nào

Cuối cùng, bây giờ chúng ta đã hiểu nhiều cách khác nhau để chúng ta có thể sử dụng các bộ định vị khác nhau trong Selenium. Trong bài viết tiếp theo, chúng ta sẽ đi sâu vào Bộ chọn CSS để định vị các phần tử web trên trang web

Selenium có hoạt động với HTML không?

Làm cách nào để lấy HTML trong Selenium?

HTML có cần thiết cho kiểm thử phần mềm không?

Cái nào không thể được kiểm tra bằng Selenium?