XPath masuk Selenium: Tutorial

Oleh: Krishna rungta Krishna rungta
Hours Updated

XPath masuk Selenium

Apa yang ada di XPath Selenium?

XPath masuk Selenium adalah jalur XML yang digunakan untuk navigasi melalui struktur halaman HTML. 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.

In Selenium otomatisasi, jika elemen tidak ditemukan oleh penentu lokasi umum seperti id, kelas, nama, dll. maka XPath digunakan untuk menemukan elemen di halaman web.

Dalam tutorial ini, kita akan mempelajari tentang Xpath dan berbagai ekspresi XPath untuk menemukan elemen kompleks atau dinamis, yang atributnya berubah secara dinamis saat penyegaran atau operasi apa pun.

Sintaks XPath

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

Xpath=//tagname[@attribute='value']

Format dasar XPath di Selenium dijelaskan di bawah ini dengan cuplikan layar.

Sintaks XPath
Format Dasar XPath
  • // : Pilih simpul saat ini.
  • Nama tag: Tagname dari node tertentu.
  • @: Pilih atribut.
  • atribut: Nama atribut dari node.
  • Nilai: Nilai atribut.

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

Pencari XPath Temukan elemen yang berbeda di halaman web
ID Untuk menemukan elemen berdasarkan ID elemen
Nama kelas Untuk menemukan elemen berdasarkan Nama Kelas elemen
Nama Untuk menemukan elemen dengan nama elemen
Teks tautan Untuk menemukan elemen dengan teks tautan
XPath XPath diperlukan untuk menemukan elemen dinamis dan melintasi berbagai elemen halaman web
jalur CSS Jalur CSS juga menemukan elemen yang tidak memiliki nama, kelas, atau ID.

Jenis jalur X

Ada dua jenis XPath:

1) XPath Mutlak

2) XPath Relatif

XPath mutlak

Ini adalah cara langsung untuk menemukan elemen, tetapi kelemahan dari XPath absolut adalah jika ada perubahan apa pun yang dilakukan pada jalur elemen maka XPath tersebut 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 ditunjukkan pada layar di bawah.

CATATAN: Anda dapat mempraktikkan latihan XPath berikut di sini https://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 mutlak

Xpath relatif

Xpath relatif dimulai dari tengah struktur HTML DOM. Dimulai dengan garis miring ganda (//). Dapat mencari elemen di mana saja pada halaman web, artinya tidak perlu menulis xpath yang panjang dan Anda dapat memulai dari tengah struktur HTML DOM. Xpath Relatif selalu lebih disukai karena bukan merupakan jalur lengkap dari elemen akar.

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

Klik di sini jika video tidak dapat diakses

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

XPath Relatif
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 tidak mungkin dilakukan dengan metode XPath normal yang tidak memiliki ID, Nama Kelas, Nama, dll. XPath di Selenium mencakup beberapa metode seperti Contains, AND, Absolute XPath, dan Relative XPath untuk mengidentifikasi dan menemukan elemen dinamis berdasarkan berbagai atribut dan kondisi.

Metode sumbu digunakan untuk menemukan elemen-elemen yang berubah secara dinamis saat penyegaran atau operasi lainnya. Ada beberapa metode sumbu yang biasa digunakan Selenium Driver web seperti anak, orang tua, leluhur, saudara kandung, pendahulu, diri sendiri, dll.

ARTIKEL TERKAIT

Cara Menulis XPath Dinamis Di Selenium webdriver

1) XPath Dasar

Ekspresi XPath memilih node atau daftar node berdasarkan atribut seperti ID, Nama, Nama Kelas, dll. dari dokumen XML seperti diilustrasikan di bawah ini.

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

Berikut ini tautan untuk mengakses halaman tersebut https://demo.guru99.com/test/selenium-xpath.html

XPath Dasar
XPath Dasar

Beberapa ekspresi xpath yang lebih mendasar:

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

2) Berisi()

Berisi() 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 sebagian teks seperti yang ditunjukkan pada contoh XPath di bawah ini.

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

Nilai lengkap 'Jenis' adalah 'kirim' tetapi hanya menggunakan sebagian nilai 'sub'.

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

Nilai lengkap 'nama' adalah 'btnLogin' tetapi hanya menggunakan sebagian nilai 'btn'.

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

Dalam 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 'nama' dimulai dengan 'btn'.

Mengandung()

Demikian pula, dalam ekspresi di bawah ini, kami mengambil 'id' sebagai atribut dan 'pesan' sebagai nilai parsial. Ini akan menemukan 2 elemen ('ID Pengguna tidak boleh kosong' & 'Kata sandi tidak boleh kosong') karena atribut 'id' dimulai dengan 'pesan'.

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

Mengandung()

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

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

Mengandung()

3) Menggunakan ATAU & DAN

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

Dalam ekspresi XPath di bawah ini, ini mengidentifikasi elemen yang kondisi tunggal atau keduanya benar.

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

Menyoroti kedua elemen sebagai elemen “LOGIN” yang memiliki atribut 'tipe' dan elemen “RESET” yang memiliki atribut 'nama'.

Menggunakan ATAU & DAN

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

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

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

Menggunakan ATAU & DAN

4) Xpath Dimulai dengan

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

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

Id=”pesan12″

Id=”pesan345″

Id=”pesan8769″

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

Dalam ekspresi di bawah ini, ada dua elemen dengan id yang diawali dengan “pesan” (yaitu, 'ID Pengguna tidak boleh kosong' & 'Kata Sandi tidak boleh kosong'). Dalam contoh di bawah ini, XPath menemukan elemen yang 'ID'-nya dimulai dengan 'pesan'.

Xpath=//label[starts-with(@id,'message')]

Xpath Dimulai dengan

5) Fungsi Teks XPath()

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

Dalam ekspresi ini, dengan fungsi teks, kita 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']

Fungsi Teks XPath()

Metode sumbu XPath

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

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

1) Mengikuti

Memilih semua elemen dalam dokumen node saat ini ( ) [Kotak input UserID adalah node saat ini] seperti yang ditunjukkan pada layar di bawah ini.

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

Berikut

Ada 3 node “input” yang cocok dengan menggunakan sumbu “berikut”: kata sandi, login, dan tombol reset. Jika Anda ingin fokus pada elemen tertentu, Anda dapat menggunakan metode XPath di bawah ini:

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

Anda dapat mengubah XPath sesuai kebutuhan dengan memasukkan [1],[2]............dan seterusnya.

Dengan masukan '1', gambar layar di bawah menemukan simpul tertentu yang merupakan elemen kotak masukan 'Kata Sandi'.

Berikut

2) Leluhur

Sumbu leluhur memilih semua elemen leluhur (kakek, orangtua, dll.) dari node saat ini seperti yang ditunjukkan pada layar di bawah ini.

Dalam ekspresi di bawah ini, kita menemukan elemen leluhur dari node saat ini (“ENTERPRISE TESTING”).

Xpath=//*[text()='Enterprise Testing']//ancestor::div

Leluhur

Ada 13 node “div” yang cocok dengan menggunakan sumbu “ancestor”. 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()='Enterprise Testing']//ancestor::div[1]

Anda dapat mengubah XPath sesuai kebutuhan dengan memasukkan [1], [2]............dan seterusnya.

3) Anak

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

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

Anak

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']//child::li[1]

Anda dapat mengubah xpath sesuai kebutuhan dengan memasukkan [1],[2]............dan seterusnya.

4) Sebelumnya

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

Dalam ekspresi di bawah ini, ini mengidentifikasi semua elemen input sebelum tombol “LOGIN”. Identitas pengguna dan kata sandi elemen masukan.

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

Mendahului

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

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

Anda dapat mengubah xpath sesuai kebutuhan dengan memasukkan [1],[2]............dan seterusnya.

5) Saudara kandung berikutnya

Pilih saudara kandung berikut dari simpul konteks. Saudara kandung berada pada level yang sama dengan simpul saat ini seperti yang ditunjukkan pada layar di bawah. Elemen setelah simpul saat ini akan ditemukan.

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

Saudara kandung berikutnya

Satu input node yang cocok dengan menggunakan sumbu “following-sibling”.

6) Orangtua

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

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

Induk

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']//parent::div[1]

Anda dapat mengubah XPath sesuai kebutuhan dengan memasukkan [1],[2]............dan seterusnya.

7) Diri sendiri

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

Diri

Pencocokan satu node dengan menggunakan sumbu “self”. Ia selalu menemukan hanya satu node karena mewakili elemen diri.

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

8) Keturunan

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

Dalam ekspresi di bawah ini, ini mengidentifikasi semua elemen turunan dari elemen saat ini (elemen bingkai 'Main body surround') yang artinya berada di bawah node (child node, grandchild node, dll.).

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

Menurun

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

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

Anda dapat mengubah XPath sesuai kebutuhan dengan memasukkan [1],[2]............dan seterusnya.

Pertanyaan Umum (FAQ)

XPath (XML Path Language) digunakan untuk menavigasi melalui elemen dan atribut dalam suatu XML atau dokumen HTML. Ini membantu mengidentifikasi dan mengambil node tertentu, menjadikannya penting dalam pengikisan web, pemrosesan data XML, dan alat pengujian otomatis seperti Selenium untuk menemukan elemen web.

Gunakan XPath ketika Anda perlu menemukan elemen web yang kompleks atau berubah secara dinamis yang tidak dapat diidentifikasi dengan mudah menggunakan penentu lokasi yang lebih sederhana seperti ID atau nama kelas. XPath ideal untuk menavigasi struktur hierarkis, memilih node berdasarkan atribut, dan menangani elemen tanpa pengenal unik.

Lokator dalam XPath adalah ekspresi yang digunakan untuk mengidentifikasi elemen dalam struktur dokumen. Ekspresi ini menentukan jalur ke node menggunakan atribut, teks, hierarki, atau posisi. Strategi lokator yang umum meliputi pemilihan elemen berdasarkan nama tag, nilai atribut, kecocokan parsial, atau kombinasi logis dari berbagai kondisi.

XPath terdiri dari dua jenis: XPath mutlak dan XPath Relatif.

  • XPath mutlak dimulai dari simpul akar (misalnya, /html/body/…) dan menyediakan jalur lengkap.
  • XPath Relatif dimulai dari node mana saja (misalnya, //div[@id='content']) dan lebih fleksibel dan mudah dipelihara.

Garis miring tunggal (/) memilih simpul langsung di bawah simpul akar atau simpul saat ini, yang mewakili jalur absolut. Garis miring ganda (//) mencari simpul di mana pun dalam dokumen, terlepas dari hierarkinya, sehingga lebih fleksibel untuk menemukan elemen tanpa menentukan jalur lengkap.

Ya, XPath peka huruf besar-kecil. Nama elemen, nama atribut, dan nilai harus sama persis dengan yang muncul di dokumen. Misalnya, //div dan //DIV diperlakukan berbeda. Untuk menangani ketidakpekaan huruf besar-kecil, fungsi seperti translate() dapat digunakan dalam ekspresi XPath.

Ringkasan

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

  • Ada dua jenis Selenium XPath:
    • XPath mutlak
    • XPath Relatif
  • Sumbu XPath adalah metode yang digunakan untuk menemukan elemen dinamis, yang jika tidak, tidak mungkin ditemukan dengan metode XPath normal
  • Ekspresi XPath memilih node atau daftar node berdasarkan atribut seperti ID, Nama, Nama Kelas, dll. dari dokumen XML.

Juga Periksa: - Selenium Tutorial untuk Pemula: Pelajari WebDriver dalam 7 Hari

Ringkaslah postingan ini dengan: