XPath digunakan untuk mengidentifikasi elemen secara unik dalam dokumen XML atau HTML. Saya telah membahas secara singkat cara menggunakan XPath untuk memilih elemen dan menggunakannya sebagai objek dalam automation. Untuk blog ini, saya ingin membahas penggunaan XPath dalam pengujian web secara lebih mendalam. Saya hanya ingin berbagi cara saya menggunakan XPath khusus untuk memilih elemen, yang dapat digunakan saat menangani elemen dinamis, dan dapat dengan mudah diparameterisasi untuk penggunaan yang lebih fleksibel.
Saya ingin membahas beberapa cara saya menggunakan XPath khusus. Jadi, saya tidak akan membahas semua cara atau metode di sini. Namun, saya akan membagikan sumber daya saya tentang cara saya mempelajarinya di akhir blog ini. Saya akan menggunakan halaman ini sebagai contoh di blog ini.
1. Memilih elemen XPath dasar
Untuk contoh ini, katakanlah saya ingin memilih tombol “Double Click Me”, dan beginilah struktur HTML-nya:
Dengan mengklik kanan dan memilih “Inpect” di halaman browser, kita dapat melihat bahwa elemen tersebut adalah sebuah tombol dan memiliki atribut id, tipe, kelas, dan teks “Double Click Me”. Kita dapat membuat pemilih XPath unik untuk memilih elemen ini. Misalnya:
//button[@id='doubleClickBtn']
Jika di search pada window elemen ini (ctrl + F) dan menggunakan Xpath diatas, kita akan berhasil memilih elemen tombol yang kita inginkan, karena itu adalah satu-satunya tombol yang memiliki id “doubleClickBtn”.
2. Menggunakan text(), contains(), dan starts-with()
Kali ini, selain menggunakan atribut “id”, kita bisa gunakan teks tombol, “Double Click Me”. Kita bisa melakukannya dengan menggunakan metode “text()”.
//button[text()='Double Click Me']
Kita akan berhasil memilih tombol yang kita inginkan karena tombol tersebut merupakan satu-satunya tombol yang memiliki teks “Double Click Me”.
Selanjutnya, mari kita coba metode contains(). Metode ini memungkinkan Anda memilih atribut tanpa mengetikkan seluruh nama atribut atau teksnya. Misalnya, untuk memilih tombol yang sama seperti sebelumnya, kita dapat mencoba:
//button[contains(text(), 'Double')]
Kali ini, kita hanya menggunakan sebagian teks tombol. Fungsi ini akan mencari tombol yang berisi teks “Double” dan memilih elemennya. Kita juga bisa menggunakan metode starts-with(), dan sesuai namanya, metode ini dapat membantu kita memilih elemen hanya dengan menyebutkan awal atribut atau teks, misalnya:
//button[starts-with(text(), 'Double')]
3. Menggunakan statement AND & OR
Kita bisa menggunakan satu atau beberapa atribut dan teks saat memilih. Untuk membantu kita memilih elemen, kita bisa menggunakan pernyataan AND & OR. Untuk memilih tombol “Double Click Me” kesayangan kita, kita bisa mencoba:
//button[@type='button' and text()='Double Click Me']
Dengan menggunakan atribut tombol tipe “button” dan teks tombol “Double Click Me”, kita telah berhasil memilih tombol kita kembali. Kita juga dapat menggunakan pernyataan OR:
//button[@type='button' or text()='Double Click Me']
Namun, ketika menggunakan pernyataan OR, kita tidak dapat menemukan tombol “Double Click Me” secara unik. Pernyataan ini juga memilih tiga tombol lain karena ketiganya juga memiliki tipe atribut “button”. Mengikuti logika pernyataan AND dan OR, jika salah satu pernyataan [@type=’button’] atau [text()=’Double Click Me’] bernilai true, maka elemen tersebut terpilih.
4. Menggunakan beberapa metode yang sering digunakan
Metode following-sibling
Mari kita lihat apakah kita bisa menemukan tombol kita menggunakan metode following-sibling. Pada tangkapan layar di bawah, kita bisa melihat bahwa <h1> kita berada pada level yang sama dengan div kita (ditandai dengan warna hijau), dan setiap div memiliki tombol kita (ditandai dengan warna kuning).
Jadi bisa dicoba:
//h1//following-sibling::div
Dan akan memilih ketiga div setelah <h1> yang berada pada level yang sama.
Menggunakan metode parent
Untuk contoh ini, katakanlah kita telah menemukan tombol “Double Click Me”, tetapi kita ingin memilih div yang berisi tombol tersebut. Kita dapat melakukannya dengan menggunakan XPath berikut:
//button[text()='Double Click Me']//parent::div
Ini akan memilih div induk dari elemen tombol kita.
Menggunakan metode Ancestor
Saat menggunakan metode induk (parent), kita hanya dapat memilih satu induk dari elemen kita. Namun, bagaimana jika kita ingin memilih semua div yang berada di atas elemen kita? Kita dapat menggunakannya dengan menggunakan metode ancestor:
//button[text()='Double Click Me']//ancestor::div
Ini akan memilih semua div yang berada di atas atau semua induk hebat dari elemen tombol kita.
5. Mengambil elemen SVG
Untuk memilih elemen SVG, perlu ditambahkan sintaksis tambahan. Misalnya, di halaman ini saya ingin mengklik kotak centang “Beranda”, dan kita ingin memilih elemen SVG. Kita dapat melakukannya dengan menambahkan “//*[nama-lokal()=’svg’]“. Jadi, untuk memilih kotak centang, kita dapat menggunakan XPath:
//span[@class='rct-checkbox']//*[local-name()='svg']
6. Apa yang harus dilakukan ketika Anda tidak dapat mengidentifikasi elemen secara unik?
Terkadang kita kesulitan menemukan XPath unik untuk mengidentifikasi elemen kita. Saya punya trik sederhana untuk mengatasinya. Mari kita kembali ke tombol kita. Saat kita mencoba:
//button[@class='btn btn-primary']Perintah ini akan memilih ketiga tombol tersebut, karena semuanya memiliki kelas “btn btn-primary” yang sama. Untuk memilih tombol pertama, kita dapat menggunakan sintaks berikut:
(//button[@class='btn btn-primary'])[1]Tentu saja, seperti yang Anda duga, untuk memilih tombol kedua dan ketiga, Anda cukup mengubah
“[1]” menjadi “[2]” dan “[3]”. Anda dapat mencobanya di halaman ini.
(//button[@class='btn btn-primary'])[2]
(//button[@class='btn btn-primary'])[3]Untuk mempelajari lebih dalam lagi, saya merekomendasikan halaman ini.