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.
Chém về XPath
Trước tiên, bạn cần 1 chút kiến thức về DOM. Nếu chưa biết, bạn hãy đọc qua bài này để có cái nhìn tổng quan về DOM nhé.
Để 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. Bạn hãy mở link dưới đây ở 1 tab mới, để có thể thực hành cùng anh Tèo nghen ^^
https://minhphong306.github.io/static/teo_xpath.html
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:
- 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='cbSonTung']
- 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é ^^
Nguồn
Bài viết được trích từ blog của mình: Link
Nếu trong bài viết có gì sai sót, bạn hãy cho mình biết nhé ^^
Đầu năm mới, chúc toàn thể anh chị em Viblo một năm tràn đầy năng lượng, đặt goal và giữ kỉ luật để đạt goal của mình nhé 🔥🔥