TABLE OF CONTENTS TÌM HIỂU VỀ XPATH .............................................................................................................. 2 XPATH TUYỆT ĐỐI....................................................................................................................... 2 XPATH TƯƠNG ĐỐI ...................................................................................................................... 3 CÁC LOẠI XPATH THÔNG DỤNG TRONG SELENIUM...................................................................... 4 XPATH CƠ BẢN ........................................................................................................................................4 CONTAINS() ..............................................................................................................................................4 TOÁN TỬ OR VÀ ADD .............................................................................................................................5 STARTS-WITH() ........................................................................................................................................5 TEXT() ......................................................................................................................................................6 TÌM HIỂU VỀ CSS .................................................................................................................... 7 CÚ PHÁP CSS ............................................................................................................................ 7 CSS SELECTOR LÀ GÌ? ................................................................................................................ 8 CÁC LOẠI CSS SELECTOR CƠ BẢN:.............................................................................................. 8 CSS SELECTOR: ID ..................................................................................................................................8 CSS SELECTOR: CLASS ............................................................................................................................9 CSS SELECTOR: ATTRIBUTE ....................................................................................................................9 CSS SELECTOR: ID/CLASS VÀ ATTRIBUTE .......................................................................................... 10 CSS SELECTOR: SUB-STRING................................................................................................................ 10 CSS SELECTOR: INNER TEXT ................................................................................................................ 11 VÀI MẸO KHI SỬ DỤNG XPATH VÀ CSS TRONG SELENIUM ......................................... 12 ID ............................................................................................................................................. 12 CLASS ....................................................................................................................................... 12

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR DIRECT CHILD ........................................................................................................................... 13 CHILD / SUBCHILD ..................................................................................................................... 13 NTH CHILD ................................................................................................................................ 13 PARENT OF AN ELEMENT ........................................................................................................... 13

NEXT SIBLING ........................................................................................................................... 14 INNERTEXT ............................................................................................................................... 14 MATCH BY SUB-STRING ............................................................................................................. 14

TÌM HIỂU VỀ XPATH

XML là một ngôn ngữ tuyệt vời để mô tả và lưu trữ dữ liệu. Tuy nhiên với tốc độ phát triển của công nghệ thông tin, nhu cầu của các ứng dụng không chỉ dừng lại ở mức lưu trữ, các hệ thống cần trao đổi thông tin với nhau. Để trao đổi thông tin trong các tài liệu XML, người ta cần một chuẩn chung để truy xuất dữ liệu. Giải quyết vấn đề đó, XML Path Language (XPath) được sinh ra. XPath là một ngôn ngữ thiết kế ra với mục đích giúp cho ứng dụng có thể di chuyển bên trong XML document và truy xuất các giá trị cũng như thuộc tính của các elements. Để có thể tiếp cận được Xpath nhanh nhất, trước tiên bạn cần hiểu về những ngôn ngữ đặc tả giống như XML, HTML. Cấu trúc 1 tài liệu XML có thể hình dung như 1 cái cây với nhiều cành và nhánh nhỏ khác nhau. Tất cả các thành phần đó đều được gọi là element. Giờ ta sẽ xem mối quan hệ giữa các element này trong Xpath như thế nào: •

Parent: mỗi node (element, attribute) đều có một node parent.

•

Children: mỗi node có thể có nhiều và cũng có thể không có node children nào.

•

Siblings: là các nodes có chung node parent.

•

Ancestors: là các nodes tổ tiên, bao gồm node parent và các nodes parent của parent.

•

Descending: là các nodes con cháu, bao gồm node children và các nodes children của children.

Xpath xử dụng path expressions để di chuyển hay truy xuất thuộc tính trong các node của XML document.

XPATH TUYỆT ĐỐI

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR Đây là cách trực tiếp để tìm phần tử, nhưng nhược điểm của XPath tuyệt đối là nếu có bất kỳ thay đổi nào được thực hiện trong đường dẫn của phần tử thì XPath sẽ bị lỗi. Đặc điểm chính của XPath là nó bắt đầu bằng dấu gạch chéo đơn (/), có nghĩa là bạn có thể chọn phần tử từ nút gốc. Ví dụ: /html/body/section[1]/div/div[1]/div/div[1]/form/div[3]/button

XPATH TƯƠNG ĐỐI

Đối với Xpath tương đối, đường dẫn bắt đầu từ giữa cấu trúc DOM HTML. Bắt đầu bằng dấu gạch chéo kép (//), có nghĩa là nó có thể tìm kiếm phần tử ở bất kỳ đâu trên trang web. Bạn có thể bắt đầu từ giữa cấu trúc DOM HTML và không cần phải viết xpath dài lê thê. Ví dụ: //button[@type="submit"] Đây là định dạng phổ biến được sử dụng để tìm phần tử thông qua XPath tương đối.

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

CÁC LOẠI XPATH THÔNG DỤNG TRONG SELENIUM XPATH CƠ BẢN

XPath chọn các node hoặc danh sách các node trên cơ sở các thuộc tính như ID, name, class… Ví dụ: //input[@type='text'] //label[@id='email'] //input[@value='Submit'] //*[@class='city'] //a[@href='kiemthuphanmem.com/khoa-hoc-tester-in-life'] //img[@src='//images/kiemthuphanmem/tester-in-life.png'] CONTAINS()

contains() là một phương thức thường được sử dụng trong biểu thức XPath. Nó được sử dụng khi giá trị của bất kỳ thuộc tính nào thay đổi động. Ví dụ: //*[contains(@type,'sub')]

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

Trong ví dụ này, chúng ta xác định phần tử bằng cách chỉ sử dụng giá trị văn bản một phần của thuộc tính. Giá trị của thuộc tính type là ‘submit’ nhưng chúng ta chỉ cần sử dụng chuỗi con của nó là ‘sub’. Và để ý bạn sẽ thấy rằng, có 2 node được tìm thấy. TOÁN TỬ OR VÀ ADD

Trong biểu thức OR, hai điều kiện được sử dụng, cho dù điều kiện 1 HOẶC điều kiện thứ 2 có đúng không. Nó cũng được áp dụng nếu bất kỳ điều kiện nào là đúng hoặc có thể cả hai. Có nghĩa là bất kỳ điều kiện nào cũng đúng để tìm phần tử. Ví dụ: XPath xác định các phần tử có một hoặc cả hai điều kiện là đúng. //*[@type='submit' or @name='btnReset']

STARTS-WITH()

Trong thực tế, có nhiều trang web tự động refresh hoặc trường hợp tương tự thì sẽ làm thay đổi giá trị của thuộc tính dẫn đến chúng ta không thể nào xác định được Xpath chính xác. Trong trường hơp này, bạn nên sử dụng hàm ‘starts-with()’ này để tìm phần tử có thuộc tính thay đổi động. Bạn cũng có thể tìm thấy phần tử có giá trị thuộc tính là tĩnh (không thay đổi). Ví dụ: Giả sử ID của phần tử thay đổi động: Id = “message12” Id = “message345” Id = “message8769” WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

Trong đó, các ký tự bắt đầu giống thì giống nhau.

TEXT()

Với phương thức này, chúng ta có thể tìm thấy phần tử có văn bản khớp với văn bản được chỉ định. Ví dụ: //*[text()='Nhớ tài khoản']

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

Hàm text() có thể kết hợp với hàm contains(): //*[contains(text(), 'Nhớ tài khoản')] TÌM HIỂU VỀ CSS

CSS - Cascading Style Sheet - Là tập tin định dạng theo tầng dùng để thiết lập bố cục của trang web bằng các thẻ HTML - hay chính là sử dụng CSS để thay đổi cách hiển thị: vị trí, màu sắc, text... của trang web. CÚ PHÁP CSS

Mỗi đoạn mã CSS sẽ được chia làm 2 phần:

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

•

Selector: phần này sẽ trỏ tới các đối tượng chịu ảnh hưởng của CSS. Thông thường các đối tượng này dưới dạng HTML.

•

Declaration: là các thuộc tính CSS được dùng để tạo thành style: màu sắc... cho thẻ selector trên.

CSS SELECTOR LÀ GÌ?

Selector được sử dụng để truy vấn đến các thẻ HTML nhằm tác động lên chúng. Tuy nhiên trong cùng 1 file HTML có rất nhiều các thẻ giống nhau và thường chúng sẽ được phân biệt với nhau bởi ID, Class. Cách thức sử dụng ID và Class để truy xuất được gọi là Selector. Các thủ tục để tạo CSS Selector và Xpath là tương tự như nhau, nó chỉ khác nhau về giao thức xây dựng. Giống như Xpath, CSS selector cũng có thể định vị các phần tử web không có ID, class hoặc Name. CÁC LOẠI CSS SELECTOR CƠ BẢN: CSS SELECTOR: ID

Như chúng ta đã biết thì mỗi phần tử trên web đều được phân biệt bằng thuộc tính ID - nó cụ thể và ko bị trùng lặp. Cú pháp: css= •

HTML tag - chính là phần tử web mà chúng ta muốn tương tác WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR •

'#' - được sử dụng để tượng trưng cho thuộc tính ID.

•

Giá trị của thuộc tính ID - là giá trị của ID sẽ được truy cập

•

Luôn có '#' trước ID.

Lưu ý: • •

Bắt buộc phải có # nếu sử dụng thuộc tính ID để tạo CSS Selector. Thứ tự của các thành phần trong cú pháp - không được phép thay đổi

•

Nếu có hơn 2 phần tử có cùng tag HTML và giá trị thuộc tính thì luôn mặc định xác định phần tử đầu tiên.

CSS SELECTOR: CLASS

Cũng giống như ID, Class cũng là một thuộc tính dùng để xác định một phần tử nào đó trên trang. Tuy nhiên, Class có thể sử dụng cho nhiều phần tử trên trang HTML, còn ID thì chỉ được sử dụng cho 1 phần tử duy nhất. Áp dụng Class khi người dùng muốn check một loạt các phần tử trong đó như màu nền, text... Cú pháp: css= •

"." - được sử dụng để biểu trưng cho thuộc tính Class (giống như ID sẽ sử dụng #).

•

Luôn có dấu "." trước giá trị của Class.

Lưu ý: Bắt buộc có "." khi sử dụng thuộc tính Class để tạo CSS Selector. CSS SELECTOR: ATTRIBUTE

Đây là cách xác định các phần tử web bằng những thuộc tính khác trong thẻ HTML mà không cần khai báo ID hay Class. Một cách chính xác hơn đó là sẽ sử dụng giá trị của thuộc tính để xác định phần tử nào đó trên trang web. Cú pháp: css= •

Thuộc tính - đó là thuộc tính mà chúng ta sẽ sử đụng để tạo CSS Selector. Nó có thể là value (giá trị), type, name...

•

Giá trị của thuộc tính - giá trị của thuộc tính mà ta đang muốn truy cập

Lưu ý: Nên sử dụng một thuộc tính mà giá trị của nó có thể xác định duy nhất một phần tử web.

WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR CSS SELECTOR: ID/CLASS VÀ ATTRIBUTE

Là sự kết hợp giữa ID hoặc Class với Attribute để xác định phần tử trên web hiệu quả hơn. Tuy nhiên việc kết hợp này cũng ảnh hưởng tới tốc độ của Selector khi truy vấn. Cú pháp: css= •

Nếu sử dụng Class kết hợp với Atrribute, có "." trước giá trị Class. Nếu kết hợp ID và Attribute thì sẽ thay thế "." bằng "#".

•

Trường hợp có nhiều hơn 2 thuộc tính thì vẫn có thể sử dụng cú pháp trên. Ví dụ: css=

CSS SELECTOR: SUB-STRING

Trường hợp người dùng muốn xác định các phần tử mà giá trị của thuộc tính có thể bắt đầu, kết thúc hoặc chứa một giá trị hay một đoạn ký tự nào đó, chúng ta sẽ sử dụng substring để tạo CSS Selector. Có 3 cách để tạo dựa trên cơ chế xác định sự phù hợp với substring. CÁC LOẠI CƠ CHẾ:

1. KHỚP VỚI TIỀN TỐ - PREFIX Thường được sử dụng để so sánh và tìm ra các phần tử mà giá trị của nó bắt đầu với chuỗi cho trước. Cú pháp: css=. •

^ - ký hiệu để xác định khớp với tiền tố.

•

Tiền tố - là chuỗi bắt đầu của giá trị thuộc tính.

Ví dụ: "css=input

regacc_pwd[type^='pass']". 2. KHỚP VỚI HẬU TỐ - SUFFIX Ngược với dạng trên thì ở loại này chúng ta sẽ xác định các phần tử web mà giá trị của chúng kết thúc bằng chuỗi nhất định. WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

Cú pháp: css=. •

$ - ký hiệu để xác định khớp với hậu tố.

•

Hậu tố - là chuỗi kết thúc của giá trị thuộc tính.

Ví dụ: "css=input

regacc_pwd[type$='ord']". 3. KHỚP VỚI 1 CHUỖI Với loại cuối cùng, chúng ta sẽ xác định phần tử web mà giá trị của chúng có chứa 1 chuỗi nhất định. Cú pháp: css=*. •

$ - ký hiệu để xác định khớp với hậu tố.

•

Chuỗi - là chuỗi nằm trong giá trị thuộc tính.

Ví dụ: Xác định trường Mật khẩu "css=input

regacc_pwd[type*='ss']". CSS SELECTOR: INNER TEXT

InnerText là một thuộc tính được sử dụng trên web để xuất các văn bản động như xuất tin nhắn xác nhận... Cú pháp: css=. •

: - tượng trưng cho phương thức chứa.

•

Contains - là giá trị của một thuộc tính Class được truy cập.

•

Text - văn bản hiển thị ở bất cứ đâu trên trang web.

Đây là một trong những cách được sử dụng nhiều nhất để định vị các phần tử web vì có cú pháp khá đơn giản. Một số trường hợp do element bị trùng class nhưng khác div thì có thể sử dụng phân cấp để tìm một cách chính xác. WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR

Một số điểm khác nhau cơ bản giữa CSS Selector và XPath: CSS Selector Có Syntax đơn giản hơn và nhanh hơn so với XPath. Các browser khác nhau đều có CSS Selector giống nhau Trong một số trường hợp, không thể tìm được phần tử web bằng CSS Selector (ví dụ như các phần tử không có id, name, class,..) Chỉ tìm được phần tử web theo hướng forward

XPath Các query thường phức tạp hơn so với CSS khi cùng thực hiện một nhiệm vụ và có tốc độ chậm hơn Mỗi một browser có Xpath engine khác nhau nên chúng ta thường phải sử dụng các path khác nhau cho từng browser Linh động hơn so với CSS Selector và có thể tìm được nhiều phần tử hơn.

Tìm phần tử theo cả hai hướng backward và forward do đó có thể tìm được cả parent node và child node Như vậy, cả CSS Selector và XPath Selector đều có những ưu nhược điểm của riêng mình. Do đó cách tốt nhất là chúng ta nên sử dụng kết hợp cả hai phương pháp trên. Trong phần lớn trường hợp chúng ta nên sử dụng CSS Selector vì tính đơn giản và tốc độ nhanh của nó. Tuy nhiên, trong một số trường hợp chúng ta buộc phải sử dụng XPath để có thể xác định được phần tử Web mà CSS Selector không thể xác định được. VÀI MẸO KHI SỬ DỤNG XPATH VÀ CSS TRONG SELENIUM ID

ID của một phần tử được định nghĩa viết theo cú pháp Xpath là “[@id=’idName’]” nhưng theo cú pháp CSS thì nó là “

idName”/ Ví dụ: • •

Xpath: //div[@id=’panel’] CSS: div

panel

CLASS

Class của một phần tử được định nghĩa theo cú pháp Xpath là “[@class=’className’]” nhưng theo cú pháp CSS nó được định nghĩa là “.className”. Ví dụ: Xpath: //div[@class=’panelClass’] CSS: div.panelClass Đối với những phần tử có nhiều class thì cần tách riêng những class đó bằng cách sử dụng dấu cách (“ “) trong Xpath, và sử dụng dấu chấm (“.”) trong CSS. • •

Ví dụ: WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR • •

Xpath: //div[@class=’panelClass1 panelClass2′] CSS: div.panelClass1.panelClass2

DIRECT CHILD

Một phần tử con liền kề của một phần tử được biểu thị bằng hai dấu gạch chéo “//” trong Xpath và dấu ngoặc lớn hơn (“>“) trong Css selector. Ví dụ: • •

Xpath: //ul/li CSS: ul > li

CHILD / SUBCHILD

Phần tử con hoặc phần tử “cháu” (phần tử con của phần tử con) được biểu thị bằng hai dấu gạch “//” trong Xpath, và dấu cách (“ “) trong CSS Selector. Ví dụ: Xpath: //ul//li CSS: ul li Lưu ý tránh nhầm lẫn giữa “ul li” và “ul > li”. • •

NTH CHILD

Để tìm phần tử con thứ nth, theo cú pháp Xpath ta sẽ sử dụng “[n]”, theo CSS chúng ta sẽ theo cú pháp “:nth-of-type(n)”. Ví dụ: Ta có phần tử có id =’drinks’ chứa 1 danh sách các loại đồ uống: 1. Coffee 2. Tea 3. Milk 4. Soup 5. Soft Drinks Để lấy ra đồ uống số 5 trong danh sách trên: • •

Xpath: //ul[@id=’drinks’]/li[5] CSS: ul

drinks li:nth-of-type(5), cũng có thể sử dụng cú pháp khác là li:nth-child(5).

PARENT OF AN ELEMENT

Cha của một phần tử có thể được biểu diễn thông qua ký tự “/..” trong Xpath và “:parent” trong CSS. Ví dụ: Tìm cha của danh sách các mục của class ‘blue’: 1. first 2. second WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR 3. third 4. fourth 5. fifth • Theo Xpath: //li[@class=’blue’]/.. • Theo CSS: css=li.blue:parent NEXT SIBLING

Next Sibling chính là những phần tử anh em cùng cấp với nhau thuộc cùng một phần tử cha nào đó. Tìm phần tử next sibling tức là lấy ra 1 phần tử tiếp theo sau một phần tử cụ thể nào đó khác, điều kiện là nằm trong cùng 1 cha. Ví dụ: Chọn ra anh em của phần tử “li” ở vị trí thứ 2 trong danh sách có class “blue”: Xpath: //li[@class=’blue’]/../li[2] CSS: li.blue + li Tương tự lấy phần tử thứ 3 trong danh sách ta theo cú pháp lần lượt như sau: • •

• •

Xpath: //li[@class=’blue’]/../li[3] CSS: li.blue + li + li

INNERTEXT

Ta sẽ sử dụng một phương thức Javascript là methodcontains() để kiểm tra đoạn văn bản “text” bên trong một phần tử web. Ví dụ: Một link có text là “Sign in” • •

Xpath: //a[contains(text(), ‘Sign in’)] hoặc a//[contains(string(), ‘Sign in’)] CSS: a:contains(‘Sign in’)

MATCH BY SUB-STRING

Với cách này ta sẽ kết hợp các chuỗi dựa vào một phần của chuỗi đó. Ví dụ: dựa vào tiền tố (Prefix), hậu tố (suffix) hoặc một dạng mẫu (sub-string) nào đó. (*) TÌM THEO SUB-STRING (BỘ MẪU) – SUBSTRING (PARTERN) Ví dụ: 1 phần tử ‘div’ với một ‘id’ và chứa đoạn text là “partern” • Với Xpath chúng ta sẽ cần sử dụng hàm contains() để kết hợp 1 sub-string: //div[contains(@id,’pattern’)]

Với CSS ta sẽ sử dụng “*=” để kết hợp 1 sub-string: css=div[id*=’pattern’] •

(*) TÌM THEO TIỀN TỐ – PREFIX Ví dụ: 1 phần tử ‘div’ với một ‘id’ và đoạn text bắt đầu với đoạn text “prefixString”: WWW.KIEMTHUPHANMEM.COM

The iTMS Coaching

CẨM NANG TỐI ƯU HÓA CÁCH SỬ DỤNG XPATH LOCATOR VÀ CSS SELECTOR • Theo Xpath ta cần sử dụng từ khóa “starts-with” để tìm prefix tương ứng: //div[starts-with(@id,”prefixString”)] •

Theo CSS ta sẽ sử dụng “^{=”: Css=div[id}=’prefixSring’]

(*) TÌM THEO HẬU TỐ Ví dụ: Tìm phần tử div có id và đoạn text kết thúc là “suffixString”: Theo Xpath, chúng ta sẽ sử dụng “ends-with” để tìm hậu tố tương ứng. //div[ends-with(@id,”suffixString”)] (Lưu ý: method “ends-with()” là một chuẩn chỉ được sử dụng trong Xpath2.0, nó sẽ không chạy với Xpath1.0) • Theo CSS, ta sẽ cần sử dụng “$=”: css=div[id$=’suffixString’] Match Substring Match Prefix Match Suffix Xpath contains() starts-with() ends-with() •

CSS

*=

^=

$=

Đây là bộ tài liệu hỗ trợ học viên trong khóa học Automation Test tại iTMS Coaching, mọi sự sao chép là bất hợp pháp. Mọi thắc mắc hay đóng góp vui lòng liên hệ chúng tôi tại email: [email protected]