Dalam bidang otomatisasi  , baik web automation maupun web scrapping , salah satu pokok penting yang harus kita kuasai adalah pemilihan element.  jika elemen tidak ditemukan oleh pencari umum menggunakan ID, CLASS, NAME dll. maka XPath merupakan cara yang paling powerfull digunakan untuk menemukan elemen di halaman web.

Contents

Jenis cara untuk menemukan sebuah element di halaman web.

Sebelumnya kita ketahui dahulu jalur yang bisa gunakan untuk mendapatkan element dari suatu halaman.

XPath : Dengan path XML ( yang akan kita pelajari kali ini )
ID  : mencari element berdsarkan id suatu element
Classname : mencari element berdsarkan nama Class suatu element
Name mencari element berdsarkan name suatu element
Link text  : mencari element berdsarkan link text suatu element ( selenium )
CSS selector: CSS selector digunakan untuk mencari elements yang tidak memiliki nama, kelas, atau ID.

Tools untuk mendapatkan xpath

  • Chrome devtools
  • Chrome extention xpathfinder
  • Ui Vision
  • XpathHelper
  • Dll

Struktur web Dinamis

Saat ini banyak sekali web yang menggunakan struktur dinamis. Selalu berubah rubah jika halaman di refresh. Contohnya google, facebook dan web web besar yang menggunakan random ID. jadi untuk menangani web web seperti ini kita harus melupakan auto inpect element di chrome, inpector ui vision , ui vision recorder, imacros recorder. Karena kalau kita berpatok dari tool2 seperti ini, atumation yang akan kita kerjakan akan gagal di tengah jalan. Karena tools2 ini belum bisa menganalisa secara mendetail tentang struktur web dynamic.

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

Apakah itu XPATH?

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

Types of X-path

Xpath memiliki 2 type yaitu absolute dan juga relative. Apakah perbedaan dari kedua type xpath tersebut?

1) Absolute XPath

Absolute xpath adalah cara langsung untuk menemukan elemen dengan root nya adalah main root dari halaman html. Biasanya rootnya adalah “/html”,  Ketika kita menggunakan type ini bisa mengalami error ketika terjadi perubhan jalur dan struktur dalam html . Karakteristik utama dari XPath adalah dimulai dengan satu garis miring (/) , yang berarti Anda dapat memilih elemen dari simpul akar.
Contoh penulisan xpath dengan type absolute.

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

2) Relative XPath

Xpath relatif tidak di mulai dari simpul akar, tatapi bisa dimulai dari tengah struktur DOM HTML. Xpath jenis ini ditandai dengan garis miring ganda (//). dengan gaya penulisan relative, kita dapat mencari elemen di mana saja di halaman web ntapa kita menulis xpath dengan sintax yang panjang dan Anda bisa mulai dari tengah struktur DOM HTML. Xpath Relatif selalu lebih disukai karena lebih simpel. Karena kita tidak menuliskan xpath menggunakan jalur lengkap dari elemen root.

Contoh penulisan xpath dengan type relative.

//*[@id="post"]/div[1]/h1

Rumus – rumus dalam XPATH

1. Penulisan Standar ( Basic xpath )

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

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

JIka kita memiliki element html dibawah ini.

Maka kita bisa menuliskan xpath berdasarkan beberapa attribute. kita bisa menggunakan name, type, value ataupun id.

//input[@type='text']
//input[@name='fname']
//input[@id='textbox1']
//input[@value='Selenium Webdriver']
//*[@type='text']
//*[@name='fname']
//*[@id='textbox1']
//*[@value='Selenium Webdriver']

Jika terdapat lebih dari satu element dengan xpath yang sama, kita bisa mentargetkan by index ( index dimulai dari 1 )

(//*[@attribute='Value'])[index]

 

2. Penggunaan AND dan OR

JIka menggunakan keyword and dan or, maka kita menggunakan lebih dari satu kondisi. Bisa 2, 3 dan seterusnya. Jika kita menggunakan or ( atau ) maka, kita bisa menemukan sebuah element , jika salah satu kondisi adalah benar. Sedangkan kita menggunakan kondisi and ( dan ), kita akan menemukan element jika kedua kondisi benar.

Kita masih menggunakan studi kasus yang sama dengan menggunakan gambar dibawah

Kitaq ambil studi kasus dari gambar diatas dengan penulisan sintax xpath dibawah

//input[@id='textbox1' or @name='fname']

Maka output dari xpat diatas adalah True, atau kita bisa menemukan element tersebut karena semua kondisi benar. element dengan @id=’textbox1′ tersedia dan element dengan @name=’fname’ juga tersedia.

 //input[@id='textbox1' or @name='xxxxx'] 

Maka output dari xpat diatas adalah True, atau kita bisa menemukan element tersebut karena salah satu kondisi benar. element dengan @id=’textbox1′ tersedia walaupun element dengan @name=’xxxxx’ tidak tersedia. Ingat jika menggunakan or, maka kita cukup memerlukan salah satu kondisi benar.

//input[@id='textbox1' and @name='fname']

Maka output dari xpat diatas adalah True, atau kita bisa menemukan element tersebut karena semua kondisi benar. element dengan @id=’textbox1′ tersedia dan element dengan @name=’fname’ juga tersedia.

 //input[@id='textbox1' and @name='xxxxx'] 

Maka output dari xpat diatas adalah False, atau kita tidak bisa  menemukan element tersebut karena ketika kita menggunakan and , maka semua kondisi harus benar. element dengan @id=’textbox1′ tersedia dan element dengan @name=’xxxxx’ tidak tersedia. Ingat jika menggunakan and, maka semua kondisi harus benar.

Table Untuk OR

Table Untuk And

3) XPath Text() Function

Fungsi XPath text() adalah fungsi yang digunakan untuk menemukan elemen berdasarkan teks elemen web. Fungsi text() membantu untuk menemukan elemen teks yang tepat dan menempatkan elemen dalam set node teks. Elemen yang akan ditempatkan harus dalam bentuk string. Dengan katalain text mencari element menggunakan text yang tampak dalam front end / innertext. JIka element berupa link, maka ini bisa di artikan pencaraian berdasarkan anchor text nya.

Contoh : Penggunaan fungsi text()

//a[text()="My Anchor Text"]

Code diatas merupakan rumus xpath yang digunakan untuk mencari link dengan anchor text “My Anchor Text”

4) Contains() , Starts-with()

Contains(), Starts-with() adalah method  yang digunakan dalam ekspresi XPath yang berguna untuk menemukan elemen yang selalu berubah ubah didalam halaman web, atau halaman yang  attibute dinamis. Jadi method ini merupakan jawaba yang kami jelaskan diawal tutorial, bahwa untuk menangani elemen dinamis kita bisa menggunakan xpath. dan method yang bisa kita gunakan adalah dengan menggunakan method contains() dan starts-with.

Sintax dasar penggunaan contains()

//tagname[contains(@attributename,"attributevalue")]

Sintax dasar penggunaan starts-with()

//tagname[starts-with(@attributename,"attributevalue")]

Sebagai contaoh sebuah element button memiliki id yang selalu berubah ubah ketika di reload dengan format seperti dibawah ini

Kita memiliki button dengan id selalu berubah

id="12334login4455"
id="login467"
id="3455login"

Untuk menangani attibute yang dimasi tersebut maka kita bisa menggunakan method contains. Kemudian rumus apa yang cocok untuk element yang memiliki format id diatas?
Jika kita lihat element diatas, id nya adalah 12334login4455 , login467  dan 3455login. Dan jika kita amati dengan teliti, maka dari ketiga id tersebut selalu memiliki string “login” jadi kita akan menggunakan login sebagai keyword yang digunakan. jadi rumus xpath yang bisa kita gunakan adalah

//button[contains(@id,"login")]

Beda halnya jika id selalu di awali dengan login seperti dibawah ini

id="login4455"
id="login467"
id="login1235522215"

maka kita bisa  menggunakan starts-with

//button[starts-with(@id,"login")]

Sebenarnya masih ada lagi method yang bisa kita gunakan untuk attribute dinamis yaitu ends-with(). Tetapi ends-with ini hanya bekerja pada xpath 2.0. Sedangkan untuk google chrome menggunakan xpath 1.0 jadi method ends-with belum bisa kita gunakan untuk rekan rekan yang menggunakan chrome sebagai browsernya. Dan sebagai alternative untuk ends-with agar bisa digunakan di chrome, kita bisa menggunakan substring.

5) Fungsi Substring()

Sebelum kita ke pokok pembahasan kita akan menjelaskan beberapa fungsi pendukung yang sering kita gunakan bersamaan dengan substring. Fungsi fungsi itu adalah
–  string-length() : Fungsi digunakan untuk menghitung jumlah character
–  translate(string1, string2, string3) : Untuk mereplace character di dalam string
–  normalize-space(string) : Untuk menghilangkan spasi awal dan akhir dalam string

Selain kita membahas tentang substring, Dalam section ini kita juga akan membahas beberapa fungsi yang hampir mirip dengan subsring. OK langsung saja kita bahas

Fungsi Substring() :

Mengembalikan bagian dari string. Bagian dimulai pada offset hingga panjang yang disediakan. Untuk mengunakan fungsi substring, kita membutuhkan 3 masukan. yaitu content, start index dan jumlah character yang dikehendaki

substring(String,ofset,Lenght)

Sebagai contoh kita memiliki 3 element sebagai berikut,

Kita akan mentargetkan element yang memiliki akhiran domain, atau kita akan meargetkan tag h1 paling atas. Ini meruppakan alternative pangganti ends-with yang tidak bisa kita gunakan di xpath type 1.0 .Maka kita bisa menuliskan rumus xpath dengan

//h1[substring(text(), 9 , 6 )='Domain']
//h1[substring(text(), string-length()-5 , 6 )='Domain']

Fungsi Substring juga bisa kita gunakan sebagai alternative pengganti starts-with() .

 
//button[substring(@id, 1 , 5 )='login']

 

Fungsi substring-after() :

Mengembalikan bagian string1 setelah kemunculan pertama string2. fungsi substring-after membutuhkan 2 input dengan format penulisan sebagai berikut.

substring-after(string1, string2)

Kita masih menggunakan contoh yang sama namun kita rubah menggunakan substring-after.

Jiki kita menargetkan tag h1 yang berkahiran dengan domain, kita bisa menggunkan format substring berikut

//h1[substring-after(text(),"Example ")="Domain"]

 

Fungsi substring-before() :

Merupakan kebalikan dari fungsi substring-after. Fungsi substring-before membutuhkan 2 input dengan format penulisan sebagai berikut.

substring-before(string1, string2)

Contoh kita akan menggunakan sample html dibawah ini, dan kita akan mencoba menggunakan substring-before

Jiki kita menargetkan button login dengan menggunakakn substring-before, kita bisa menggunkan format substring berikut

//button[substring-before(@id,"-button")="x123"]

 

6)  Fungsi  not(@attribute)

Fungsi not(@attribute) adalah merupakan fungsi yang di gunakan untuk mencari sebuah element yang tidak memiliki attribute tertentu. Sebagai contoh kita memiliki beberapa element yang mirip, akan tetapi salah satu di antaranya tidak memiliki element tertentu.

Jika dilihat dari data diatas kita memiliki 3 input dengan type text. Baris 1 dan 2 memiliki attribute nama. Sehingga kalau ingin menargetkan baris 1 dan 2 kita bisa mentargetkan by name. Tetapi bagaimana untuk mentargetkan yang line 3?. Jika kita mentargetkan dengan type kita harus menggunakan index dengan format seperti yang saya contohkan di awal

(//input[@type="text"])[3] 

Selain cara diatas kita juga bisa menggunakan not(@attribute). Kalau kita lihat baris ke 3 tidak memiliki attibute name. jadi kita bisa menargetkan line 3 dengan not(@attribute) dengan sintax sebagai berikut

//input[@type="text" and not(@name)]

Jika di artikan kita mentargetkan input yang memiliki type text dan tidak memiliki attribute name