2.3. Find Web Element trong C#

Ở bài trước chúng ta đã tìm hiểu một WebElement là như thế nào, thì bài này mình sẽ giới thiệu về các thức để bắt được WebElement trong Selenium.

1. Cách bắt WebElement

Có thể thấy được, mỗi phần tử html có chung một cấu trúc, hầu như có chung một số thuộc tính nào đó. Do vậy, Selenium cung cấp cho chúng ta một số cách bắt dựa trên các thành phần cấu tạo nên một phần tử html. 

Selenium cung cấp 2 phương thức dùng để bắt WebElement:

• FindElement: bắt một phần tử html và trả về một IWebElement
• FindElements: bắt các phần tử thỏa điều kiện, trả về danh sách các IWebElement thỏa các điều kiện bắt.

Tham số truyền vào của 2 phương thức trên là By Object. Trong đó By là cơ chế để xác định attribute của phần tử html. 

Đây là cách bắt một element: 

Ngoài cách By.Id thì Selenium còn cung cách tìm bằng các phương thức sau:

• Id
• Name
• CssSelector
• LinkText
• XPath
• TagName
• ClassName
• PartialLinkText
• ....

Để xem được html source thì bạn có thể sử dụng chức năng Inspect của trình duyệt để kiểm tra phần tử, từ đó xác định các attribute định danh (chỉ phần tử đó mới có (duy nhất)) và bắt element.

Trên trình duyệt: Chrome, Firefox, EDGE: Nhấn chuột phải vào đối tượng bạn muốn xem >> Chọn Inspect hoặc nhấn F12

1.1. By.Id

By.Id(string idToFind) - Đây là một cách đơn giản và được ưa chuộng để xác định vị trí của một phần tử html vì hầu hết các trường hợp thì id là duy nhất. Tham số truyền vào là một chuỗi giá trị của thuộc tính (attribute) Id.

IWebElement webElement = driver.FindElement(By.Id("IDofElement"));

Nếu tìm thấy phần tử html thỏa với thuộc tính: id="IDofElement" thì sẽ trả về một IWebDriver. Nếu không tìm thấy phần tử nào phù hợp thì một NoSuchElementException sẽ được đưa ra.

Code:

            //Bắt element Tên đăng nhập dựa vào Id
            IWebElement txtUserName = driver.FindElement(By.Id("UserName"));
            //Nhập vào element này đoạn chữ: luannt
            txtUserName.SendKeys("luannt");

Lưu ý: Trong hầu hết các trường hợp thì ID là duy nhất, tuy nhiên bạn cần phải check lại để đảm bảo ID đang chỉ có 1 đối tượng sỡ hữu tránh trường hợp thao tác sai đối tượng.

1.2. By.Name

By.Name(string nameToFind) - Tương tự ID thì đây là một cách đơn giản và được ưa chuộng để xác định vị trí của một phần tử html vì hầu hết các trường hợp thì id là duy nhất. Tham số truyền vào là một chuỗi giá trị của thuộc tính (attribute) name.

IWebElement webElement = driver.FindElement(By.Id("NameofElement"));

Nếu tìm thấy phần tử html thỏa với thuộc tính: name="NameofElement" thì sẽ trả về một IWebDriver. Nếu không tìm thấy phần tử nào phù hợp thì một NoSuchElementException sẽ được đưa ra.

Code:

            //Bắt element Tên đăng nhập dựa vào Name
            IWebElement txtUserNameByName = driver.FindElement(By.Name("UserName"));
            //Nhập vào element này đoạn chữ: luannt
            txtUserNameByName.SendKeys("luannt");

Lưu ý: Cũng giống như Name thì trong hầu hết các trường hợp thì Name là duy nhất, tuy nhiên bạn cần phải check lại để đảm bảo Name đang chỉ có 1 đối tượng sỡ hữu tránh trường hợp thao tác sai đối tượng.

1.3. By.TagName

By.TagName(string tagNameToFind) - Với thẻ này thì mình thấy ít được sử dụng đối với các trang có nhiều nội dung, vì những trang như vậy thì sẽ có nhiều thẻ được dùng lặp đi lặp lại với nhau => Số lượng đối tượng quá nhiều và không duy nhất. Thẻ này được dùng cho những trang đơn giản, ít nội dung hoặc bạn muốn lấy một danh sách các thẻ để lọc và thao tác. Tham số truyền vào là một chuỗi giá trị của thẻ html.

IWebElement webElement = driver.FindElement(By.TagName("input"));

Nếu tìm thấy phần tử html thỏa các thẻ là "input" thì sẽ trả về một IWebDriver. Nếu không tìm thấy phần tử nào phù hợp thì một NoSuchElementException sẽ được đưa ra.

Code:

            //Bắt element Tên đăng nhập dựa vào Tag Name
            IWebElement txtUserNameByTagName= driver.FindElement(By.TagName("input"));
            //Nhập vào element này đoạn chữ: luannt
            txtUserNameByTagName.SendKeys("luannt");

1.4. By.ClassName

By.ClassName(string classNameToFind) - Tương tự Name hay ID thì đây là một cách đơn giản và được ưa chuộng để xác định vị trí của một phần tử html. Tham số truyền vào là một chuỗi giá trị của thuộc tính (attribute) class.

IWebElement webElement = driver.FindElement(By.ClassName("k-textbox k-textbox required-field"));

Nếu tìm thấy phần tử html thỏa với thuộc tính: class="k-textbox k-textbox required-field" thì sẽ trả về một IWebDriver. Nếu không tìm thấy phần tử nào phù hợp thì một NoSuchElementException sẽ được đưa ra.

Code:

            //Bắt element Tên đăng nhập dựa vào Class Name
            IWebElement txtUserNameByClassName 
                = driver.FindElement(By.ClassName("k-textbox k-textbox required-field"));
            //Nhập vào element này đoạn chữ: luannt
            txtUserNameByClassName.SendKeys("luannt");

1.5. By.XPath

Trước khi tìm hiểu về phương thức này thì chúng ta cần hiểu XPath là gì? XPath tương đương với việc bạn tự mô tả thông tin/đặc điểm (attribute) của phần tử html. Các phương thức ở trên là Selenium dựa trên các đặc điểm thường có của một phần tử html, tuy nhiên nhiều phần tử có những đặc điểm đặc thù hơn, những đặc điểm đặc thù này lại mang tính định danh cho phần tử => bạn sẽ sử dụng XPath để mô tả nó.

By.XPath(string XPath) - Xpath là phương thức được sử dụng nhiều cho việc xác định WebElement, nhất là trong giai đoạn hiện tại khi mà các framework UI tự sinh code => các phần tử html sẽ đa dạng và ít các thuộc tính định danh. Tham số truyền vào là đặc điểm của phần tử html.

IWebElement webElement = driver.FindElement(By.XPath("//input[@id='UserName']"));

Nếu tìm thấy phần tử html thỏa là một thẻ input với thuộc tính: id="UserName" thì sẽ trả về một IWebDriver. Nếu không tìm thấy phần tử nào phù hợp thì một NoSuchElementException sẽ được đưa ra.

1.6. By.LinkText & By.PartialLinkText

Có thể thấy được trên một trang web, sẽ thường có nhiều đường dẫn đến đến một trang khác, thì selenium có hỗ trợ 2 phương thức dùng để get những đối tượng html dạng hyperlink.

• By.LinkText(string textOfLink) - Phương thức này tìm các phần tử dạng hyperlink và có đoạn text bằng tham số truyền vào (một chuỗi)
• By.PartialLinkText(string textOfLink) - Phương thức này tìm các phần tử dạng hyperlink và có đoạn text chứa tham số truyền vào (một chuỗi)

IWebElement webElement = driver.FindElement(By.LinkTest("Text of Link"));
IWebElement webElement = driver.FindElement(By.PartialLinkText("a part of Text"));

Code

            //Bắt element Tên đăng nhập dựa vào LinkText & PartialLinkText
            IWebElement linkText
                = driver.FindElement(By.LinkText("2.3.Find Web Element trong C#"));
            IWebElement partialLinkText
                = driver.FindElement(By.LinkText("2.3.Find Web"));

2. Phân biệt FindElement và FindElements