XPath cho người nông dân – Phần 1

Một phần của series "Automation test cho người nông dân"

Anh Tèo là nông dân ở một trang trại rau A nọ. Dịch COVID-19 bùng phát, trang trại phải chấp hành lệnh của chính phủ, tạm dừng hoạt động.
Chả có việc gì làm ngoài lướt thiên địa cả ngày, anh Tèo chán quá nên tìm lại đống sách cũ đọc. Nào là bí kíp xem xong xóa, học tiếng Nhật cùng idol,… cùng vô vàn các cuốn kinh thư đi cùng tuổi thơ anh. Chợt anh thấy ở góc nhà có cuốn sách lạ, lật lên và đọc tiêu đề: “Automation chân kinh”.

Nhờ đọc cuốn sách trên, anh đã trở thành một QA thực thụ tại công ty công nghệ A. Series automation này kể lại quá trình mà anh Tèo học automation, các kiến thức cơ bản, các lỗi thường gặp mà anh học được. Đây là bài đầu tiên trong series này.

Tóm tắt kiến thức

• XPath là gì: là XML Path; một cách để tìm kiếm các phần tử trên trang web, sử dụng cú pháp của XML.
• Test XPath như thế nào: mở console của chrome lên, tab element, bấm Ctrl + F, nhập vào Xpath để search.
• Cú pháp cơ bản:
  • <loại xpath> <tagname>[<@atttribute>=<value>]
  • <loại xpath> <tagname>[<method>]
• Các loại Xpath
  • Tuyệt đối: bắt đầu bằng `/`, tìm kiếm chính xác
  • Tương đối: bắt đầu bằng `//`, tìm kiếm tương đối

Chém về XPath

Để việc học dễ dàng và thực hành thú vị hơn, anh Tèo đã chuẩn bị 1 chiếc DOM html ở đây:

https://minhphong306.github.io/static/teo_xpath.html

Bạn hãy mở link trên ở 1 tab mới, để có thể thực hành cùng anh Tèo nghen ^^

Chiếc DOM trên sẽ hiển thị như sau.

Lưu ý là thứ tự trong bảng danh sách ca sĩ được random, nên mỗi lần F5 refresh lại trình duyệt sẽ có thể khác nhau.

Anh Tèo mở sách, đọc những dòng đầu tiên

-- XPath, hay XML Path là cách để tìm kiếm phần tử trên trang,
sử dụng cú pháp của xml.

-- XPath có hai loại: tìm kiếm tuyệt đối và tìm kiếm tương đối
Tuyệt đối: bắt đầu bằng "/" (một dấu gạch chéo)
Tương đối: bắt đầu bằng "//" (hai dấu gạch chéo)

-- Cú pháp cơ bản:
<loại_xpath> <tagname>[<thuộc_tính>=<giá_trị>]

— Củ lạc giòn tan – anh Tèo nghĩ – cái gì mà tương đối với tuyệt đối, nghe phắc tạp vậy. Oh, có ví dụ này

-- Ví dụ tìm kiếm tới thẻ tiêu đề "Tèo học xpath", ta làm như sau:
Tìm kiếm tuyệt đối:
/html/body/div/div/div/h2
Tìm kiếm tương đối
//h2[@class='header']

Anh Tèo mở link thực hành phía trên, bấm F12, chọn tab elements để test thử. Anh nhập đoạn xpath tìm kiếm tuyệt đối vào ô tìm kiếm thì thấy hiển như như hình dưới:

— Oh, thì ra tuyệt đối ở đây nghĩa là cần chỉ ra chính xác tuyệt đối đường dẫn từ nhỏ tới lớn. Trong ví dụ trên thì cần chỉ ra đi từ thẻ html rồi đến body, div, div,…, giống như khi tìm đường bằng Google Map, cần nhập chính xác tọa độ (kinh độ, vĩ độ) vậy

/html/body/div/div/div/h2

— Hơi nông dân nhỉ. Giờ mà tìm kiếm cái nào sâu sâu tí thì khéo xpath dài hơn cả … của mình ấy chứ. Thử cái tương đối xem có tiến bộ hơn không nào

— Ahh, thú vị hơn này. Thay vì nhập đường dẫn tuyệt đối, ta chỉ cần chỉ ra những đặc tính riêng biệt của phần tử cần chọn. Trong ví dụ trên thì chỉ cần chỉ ra thẻ cần tìm là thẻ h2, có class là header là được. Cũng giống như việc tìm đường, chỉ cần chỉ ra phố Trần Duy Hưng, gốc cây số bao nhiêu, à nhầm số nhà bao nhiêu, là được. Không cần phải kinh độ hay vĩ độ gì cho khó nhớ cả. Hihi

//h2[@class='header']

— Dễ nhỉ. Thử làm bài tập coi.

Bài tập:
1. Viết xpath tìm kiếm ô checkbox của Sơn Tùng M-TP

Mở tab elements lên, anh Tèo bắt đầu phân tích

— Cái ô checkbox cần tìm có thẻ là input, id là “cbSonTung”. Như vậy chỉ cần viết 1 chiếc XPath đơn giản thế này là ngon ngay

//input[@id='cbSonTun']

— Dễ quá. Bài 2 xem nào

2. Giống bài 1, nhưng không được dùng thuộc tính id

— Không dùng id à. Vậy thì mình sẽ tìm tất cả các input có type là checkbox. Sau nó tìm đến cái checkbox thứ 3 là được.

(//input[@type='checkbox'])[3]

Bạn đọc lưu ý chỗ này nha. Bình thường để tìm phần tử có input có type là checkbox, chúng ta làm như sau:

//input[@type='checkbox']

Vì kết quả có thể có nhiều hơn 1 phần tử, nên ta có thể dùng cặp ngoặc vuông, bên trong là số thứ tự của phần tử để chọn chính xác phần tử đó

[3]

Và để search được trong ô tìm kiếm của chrome, bạn cần bao cái xpath bằng 1 cặp ngoặc tròn “()”

(xpath)[vị_trí]

Như trong ví dụ của anh Tèo:

(//input[@type='checkbox'])[3]

— Nggonnnn – anh Tèo cao hứng.

Bây giờ, bạn thử F5 lại trình duyệt, tìm kiếm lại với xpath vừa làm ở bài 2

— Thử F5 coi có gì khác nào

Sau khi F5, anh Tèo thấy vẫn tìm được phần tử, nhưng lần này lại là checkbox của Bích Phương, không phải Sơn Tùng M-TP.

— Thôi toang. Hiểu rồi. Thì ra các phần tử có thể thay đổi được thứ tự, nên tìm kiếm kiểu dùng vị trí là hơi dâm, sẽ bị sai. Làm thế nào nhỉ ??

Vừa nghĩ, anh Tèo vừa lật trang sách

Lúc này bạn cần dùng tới axes method để tìm kiếm các phần tử động.

Muốn biết anh Tèo tìm checkbox của Sơn Tùng M-TP kiểu gì, bạn hãy đón đọc phần 2: Tìm kiếm XPath cho checkbox Sơn Tùng M-TP nhé ^^

Lời cảm ơn

Xin gửi lời cảm ơn tới bạn Tuyết, má Trang và các chị em QA đã support Phong trong quá trình viết bài ^^

Cảm ơn bạn đã bỏ thời gian đọc bài. Nếu có gì sai sót hoặc chưa tối ưu, bạn hãy comment cho mình biết nhé ^^

Have a good day ^^

Nguồn tham khảo

https://www.guru99.com/xpath-selenium.html