XPath di Selenium WebDriver Tutorial: Bagaimana Menemukan XPath?

Dalam otomatisasi Selenium, jika elemen tidak ditemukan oleh pencari lokasi umum seperti id, class, name, dll. Maka XPath digunakan untuk mencari elemen di halaman web.

Dalam tutorial ini, kita akan belajar tentang xpath dan ekspresi XPath yang berbeda untuk menemukan elemen kompleks atau dinamis, yang atributnya berubah secara dinamis saat refresh atau operasi apa pun.

Dalam tutorial XPath ini, Anda akan belajar-

  • Apa itu XPath?
  • Jenis X-path
    • XPath mutlak
    • XPath relatif
  • XPath dasar
  • Mengandung()
  • Menggunakan OR & AND
  • Mulai dengan fungsi
  • Teks()
  • Metode sumbu XPath
    • Berikut
    • Leluhur
    • Anak
    • Mendahului
    • Saudara kandung
    • Induk
    • Diri
    • Keturunan

Apa itu XPath di Selenium?

XPath di Selenium adalah jalur XML yang digunakan untuk navigasi melalui struktur HTML halaman. Ini adalah sintaks atau bahasa untuk menemukan elemen apa pun di halaman web menggunakan ekspresi jalur XML. XPath dapat digunakan untuk dokumen HTML dan XML untuk menemukan lokasi elemen apa pun di halaman web menggunakan struktur HTML DOM.

Format dasar XPath di selenium dijelaskan di bawah ini dengan screen shot.

Format Dasar XPath

Sintaks untuk XPath selenium:

XPath berisi jalur elemen yang terletak di halaman web. Sintaks standar XPath untuk membuat XPath adalah.

Xpath = // tagname [@ atribut = 'nilai']
  • //: Pilih node saat ini.
  • Tagname: Tagname dari node tertentu.
  • @: Pilih atribut.
  • Atribut: Nama atribut node.
  • Nilai: Nilai atribut.

Untuk menemukan elemen pada halaman web secara akurat ada berbagai jenis pencari lokasi:

XPath Locators Temukan elemen yang berbeda di halaman web
Indo Untuk menemukan elemen dengan ID elemen
Nama kelas Untuk menemukan elemen dengan Classname dari elemen tersebut
Nama Untuk menemukan elemen dengan nama elemen
Tautkan teks Untuk menemukan elemen dengan teks tautan
XPath XPath diperlukan untuk menemukan elemen dinamis dan melintasi antara berbagai elemen halaman web
Jalur CSS Path CSS juga menempatkan elemen yang tidak memiliki nama, kelas atau ID.

Jenis X-path

Ada dua jenis XPath:

1) XPath mutlak

2) XPath Relatif

XPath mutlak:

Ini adalah cara langsung untuk menemukan elemen, tetapi kerugian dari XPath absolut adalah jika ada perubahan yang dibuat di jalur elemen maka XPath itu akan gagal.

Karakteristik utama XPath adalah ia dimulai dengan garis miring tunggal (/), yang berarti Anda dapat memilih elemen dari simpul akar.

Di bawah ini adalah contoh ekspresi xpath absolut dari elemen yang ditampilkan di layar di bawah ini.

CATATAN: Anda dapat berlatih latihan XPath berikut di http://demo.guru99.com/test/selenium-xpath.html

Klik di sini jika video tidak dapat diakses

XPath mutlak: 

/ html / body / div [2] / div [1] / div / h4 [1] / b / html [1] / body [1] / div [2] / div [1] / div [1] / h4 [1] / b [1]

XPath mutlak

Xpath Relatif:

Relatif Xpath dimulai dari bagian tengah struktur DOM HTML. Ini dimulai dengan garis miring ganda (//). Ia dapat mencari elemen di mana saja di halaman web, artinya tidak perlu menulis xpath yang panjang dan Anda dapat memulai dari tengah struktur HTML DOM. Relatif Xpath selalu disukai karena ini bukan jalur lengkap dari elemen root.

Di bawah ini adalah contoh ekspresi XPath relatif dari elemen yang sama yang ditampilkan pada layar di bawah ini. Ini adalah format umum yang digunakan untuk mencari elemen oleh XPath.

Klik di sini jika video tidak dapat diakses

Relatif XPath: // div [@ class = 'kotak unggulan cloumnsize1'] // h4 [1] // b [1]

XPath relatif

Apa itu sumbu XPath.

Sumbu XPath mencari node yang berbeda dalam dokumen XML dari node konteks saat ini. Sumbu XPath adalah metode yang digunakan untuk menemukan elemen dinamis, yang sebaliknya tidak mungkin dilakukan oleh metode XPath normal yang tidak memiliki ID, Nama Kelas, Nama, dll.

Metode sumbu digunakan untuk menemukan elemen tersebut, yang berubah secara dinamis saat refresh atau operasi lainnya. Ada beberapa metode sumbu yang biasa digunakan di Selenium Webdriver seperti child, parent, leluhur, sibling, preceding, self, dll.

Menggunakan XPath Menangani elemen kompleks & Dinamis di Selenium

1) XPath Dasar:

Ekspresi XPath memilih node atau daftar node berdasarkan atribut seperti ID, Name, Classname , dll. Dari dokumen XML seperti yang diilustrasikan di bawah ini.

Xpath = // masukan [@ name = 'uid']

Berikut ini link untuk mengakses halaman http://demo.guru99.com/test/selenium-xpath.html

XPath dasar

Beberapa ekspresi xpath yang lebih mendasar:

Xpath = // masukan [@ type = 'text']Xpath = // label [@ id = 'message23']Xpath = // masukan [@ value = 'RESET']Xpath = // * [@ class = 'barone']Xpath = // a [@ href = 'http: //demo.guru99.com/']Xpath = //img[@src='//cdn.guru99.com/images/home/java.png.webp ']

2) Berisi ():

Contains () adalah metode yang digunakan dalam ekspresi XPath. Ini digunakan ketika nilai atribut apa pun berubah secara dinamis, misalnya, informasi login.

Fitur berisi memiliki kemampuan untuk menemukan elemen dengan teks parsial seperti yang ditunjukkan pada contoh XPath di bawah ini.

Dalam contoh ini, kami mencoba mengidentifikasi elemen hanya dengan menggunakan nilai teks parsial dari atribut. Di bawah ekspresi XPath nilai parsial 'sub' digunakan sebagai pengganti tombol kirim. Dapat diamati bahwa elemen berhasil ditemukan.

Nilai lengkap 'Type' adalah 'submit' tetapi hanya menggunakan nilai parsial 'sub'.

Xpath = // * [berisi (@ type, 'sub')]

Nilai lengkap 'name' adalah 'btnLogin' tetapi hanya menggunakan nilai parsial 'btn'.

Xpath = // * [berisi (@ name, 'btn')]

Pada ekspresi di atas, kami telah mengambil 'nama' sebagai atribut dan 'btn' sebagai nilai parsial seperti yang ditunjukkan pada gambar di bawah. Ini akan menemukan 2 elemen (LOGIN & RESET) karena atribut 'name' mereka dimulai dengan 'btn'.

Demikian pula, dalam ekspresi di bawah ini, kami telah mengambil 'id' sebagai atribut dan 'message' sebagai nilai parsial. Ini akan menemukan 2 elemen ('User-ID tidak boleh kosong' & 'Kata sandi tidak boleh kosong') karena atribut 'name' diawali dengan 'message'.

Xpath = // * [berisi (@ id, 'message')]

Pada ekspresi di bawah ini, kami telah mengambil "teks" dari tautan sebagai atribut dan 'di sini' sebagai nilai parsial seperti yang ditunjukkan pada gambar di bawah. Ini akan menemukan tautan ('di sini') karena teks 'di sini' ditampilkan.

Xpath = // * [berisi (teks (), 'di sini')]Xpath = // * [berisi (@ href, 'guru99.com')]

3) Menggunakan ATAU & DAN:

Dalam ekspresi OR, dua kondisi digunakan, apakah kondisi pertama ATAU kondisi kedua harus benar. Ini juga berlaku jika salah satu kondisi benar atau mungkin keduanya. Berarti salah satu kondisi harus benar untuk menemukan elemen.

Dalam ekspresi XPath di bawah ini, ini mengidentifikasi elemen yang satu atau kedua kondisinya benar.

Xpath = // * [@ type = 'submit' atau @ name = 'btnReset']

Menyoroti kedua elemen sebagai elemen "LOGIN" yang memiliki atribut 'type' dan elemen "RESET" yang memiliki atribut 'name'.

Dalam ekspresi AND, dua kondisi digunakan, kedua kondisi harus benar untuk menemukan elemen. Gagal menemukan elemen jika salah satu kondisinya salah.

Xpath = // input [@ type = 'submit' dan @ name = 'btnLogin']

Pada ekspresi di bawah ini, sorot elemen 'LOGIN' karena memiliki atribut 'type' dan 'name'.

4) Xpath Dimulai dengan

XPath start-with () adalah fungsi yang digunakan untuk menemukan elemen web yang nilai atributnya diubah saat penyegaran atau oleh operasi dinamis lainnya pada halaman web. Dalam metode ini, teks awal atribut dicocokkan untuk menemukan elemen yang nilai atributnya berubah secara dinamis. Anda juga dapat menemukan elemen yang nilai atributnya statis (bukan berubah).

Misalnya -: Misalkan ID elemen tertentu berubah secara dinamis seperti:

Id = "message12"

Id = "message345"

Id = "message8769"

dan seterusnya… tapi teks awalnya sama. Dalam kasus ini, kami menggunakan ekspresi Start-with.

Pada ekspresi di bawah ini, ada dua elemen dengan id yang memulai "pesan" (yaitu, 'User-ID tidak boleh kosong' & 'Kata sandi tidak boleh kosong'). Dalam contoh di bawah ini, XPath menemukan elemen yang 'ID' nya dimulai dengan 'message'.

Xpath = // label [dimulai-dengan (@ id, 'message')]

5) Fungsi XPath Text ()

Fungsi XPath text () adalah fungsi bawaan dari selenium webdriver yang digunakan untuk mencari elemen berdasarkan teks dari elemen web. Ini membantu untuk menemukan elemen teks yang tepat dan menempatkan elemen dalam kumpulan node teks. Elemen yang ditempatkan harus dalam bentuk string.

Dalam ekspresi ini, dengan fungsi teks, kami menemukan elemen dengan teks yang sama persis seperti yang ditunjukkan di bawah ini. Dalam kasus kami, kami menemukan elemen dengan teks "UserID".

Xpath = // td [text () = 'UserID']

6) Metode sumbu XPath:

Metode sumbu XPath ini digunakan untuk menemukan elemen kompleks atau dinamis. Di bawah ini kita akan melihat beberapa metode ini.

Untuk mengilustrasikan metode sumbu XPath ini, kami akan menggunakan situs demo bank Guru99.

a) Mengikuti:

Memilih semua elemen dalam dokumen node saat ini () [UserID input box is the current node] seperti yang ditunjukkan pada layar di bawah ini.

Xpath = // * [@ type = 'text'] // berikut :: input

Ada 3 node "masukan" yang cocok dengan menggunakan sumbu- kata sandi, tombol login dan reset. Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan metode XPath di bawah ini:

Xpath = // * [@ type = 'text'] // berikut :: input [1]

Anda dapat mengubah XPath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

Dengan input sebagai '1', screen shot di bawah ini menemukan node tertentu yaitu elemen kotak input 'Password'.

b) Leluhur:

Sumbu leluhur memilih semua elemen leluhur (kakek-nenek, orang tua, dll.) Dari simpul saat ini seperti yang ditunjukkan pada layar di bawah ini.

Pada ekspresi di bawah ini, kami menemukan elemen leluhur dari node saat ini (node ​​"PENGUJIAN ENTERPRISE").

Xpath = // * [text () = 'Pengujian Perusahaan'] // leluhur :: div

Ada 13 node "div" yang cocok dengan menggunakan sumbu "leluhur". Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan XPath di bawah ini, di mana Anda mengubah angka 1, 2 sesuai kebutuhan Anda:

Xpath = // * [text () = 'Pengujian Perusahaan'] // leluhur :: div [1]

Anda dapat mengubah XPath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

c) Anak:

Memilih semua elemen anak dari node saat ini (Java) seperti yang ditunjukkan pada layar di bawah ini.

Xpath = // * [@ id = 'java_technologies'] // anak :: li

Ada 71 node "li" yang cocok dengan menggunakan sumbu "anak". Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan xpath di bawah ini:

Xpath = // * [@ id = 'java_technologies'] // anak :: li [1]

Anda dapat mengubah xpath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

d) Sebelumnya:

Pilih semua node yang datang sebelum node saat ini seperti yang ditunjukkan pada layar di bawah ini.

Pada ekspresi di bawah ini, ini mengidentifikasi semua elemen input sebelum tombol "LOGIN" yaitu elemen input Userid dan kata sandi .

Xpath = // * [@ type = 'submit'] // sebelum :: input

Ada 2 node "masukan" yang cocok dengan menggunakan sumbu "sebelumnya". Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan XPath di bawah ini:

Xpath = // * [@ type = 'submit'] // sebelumnya :: input [1]

Anda dapat mengubah xpath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

e) Saudara kandung berikut:

Pilih saudara berikut dari node konteks. Saudara kandung berada pada level yang sama dari node saat ini seperti yang ditunjukkan pada layar di bawah ini. Ini akan menemukan elemen setelah node saat ini.

 xpath = // * [@ type = 'submit'] // following-sibling :: input

Satu node masukan yang cocok dengan menggunakan sumbu "following-sibling".

f) Induk:

Memilih induk dari node saat ini seperti yang ditunjukkan pada layar di bawah ini.

Xpath = // * [@ id = 'rt-feature'] // induk :: div

Ada 65 node "div" yang cocok dengan menggunakan sumbu "induk". Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan XPath di bawah ini:

Xpath = // * [@ id = 'rt-feature'] // induk :: div [1]

Anda dapat mengubah XPath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

g) Diri:

Memilih node saat ini atau 'self' berarti menunjukkan node itu sendiri seperti yang ditunjukkan pada layar di bawah ini.

Satu node yang cocok dengan menggunakan sumbu "sendiri". Itu selalu menemukan hanya satu node karena itu mewakili elemen diri.

Xpath = // * [@ type = 'password'] // self :: input

h) Keturunan:

Memilih turunan dari node saat ini seperti yang ditunjukkan pada layar di bawah ini.

Dalam ekspresi di bawah ini, ini mengidentifikasi semua elemen turunan ke elemen saat ini (elemen bingkai 'Main body surround') yang berarti di bawah node (node ​​anak, node cucu, dll.).

Xpath = // * [@ id = 'rt-feature'] // keturunan :: a

Ada 12 node "link" yang cocok dengan menggunakan sumbu "turunan". Jika Anda ingin fokus pada elemen tertentu maka Anda dapat menggunakan XPath di bawah ini:

Xpath = // * [@ id = 'rt-feature'] // keturunan :: a [1]

Anda dapat mengubah XPath sesuai dengan kebutuhan dengan meletakkan [1], [2]

… dan seterusnya.

Ringkasan:

XPath diperlukan untuk menemukan elemen di halaman web untuk melakukan operasi pada elemen tertentu.

  • Ada dua jenis selenium XPath:
    • XPath mutlak
    • XPath relatif
  • Sumbu XPath adalah metode yang digunakan untuk menemukan elemen dinamis, yang sebaliknya tidak mungkin ditemukan dengan metode XPath normal
  • Ekspresi XPath memilih node atau daftar node berdasarkan atribut seperti ID, Name, Classname, dll. Dari dokumen XML.

Artikel yang menarik...