Cara menggunakan FINDELEMENT pada JavaScript

Pernah mendengar atau menggunakan Selenium ?. Selenium adalah library yang digunakan untuk mengendalikan web browser. Sederhananya dengan menggunakan Selenium kita dapat membuat aplikasi yang dapat melakukan banyak hal melalui web browser, seperti membuka url tertentu, mengisi input text, memilih select box, menekan tombol dan lain sebagainya, secara otomatis. Selenium dapat digunakan melalui bahasa pemrograman Java, Javascript, Kotlin, Python, C# dan Ruby.

Selenium digunakan dalam berbagai bidang aplikasi. Sebagai contoh, Selenium digunakan untuk testing otomatis fungsi-fungsi suatu website, membuat robot aplikasi untuk melakukan alur kerja tertentu pada suatu website bahkan bisa untuk membuat spam ataupun untuk melakukan hacking.

Pada kesempatan kali ini kita akan mencoba mengenal konsep dasar Selenium dengan memakai bahasa pemrograman Java. Bagi yang belum mahir Java bisa mengikuti kursus java dari Nextgen. Aplikasi yang akan kita buat adalah aplikasi sederhana untuk melakukan alur kerja login melalui facebook secara otomatis.

Persiapan

Pastikan beberapa hal ini sudah terpasang pada komputer Anda :

1. Java Development Kit minimal versi 8.
2. Eclipse.
3. Maven.
4. Web browser Firefox versi terbaru.

Kemudian buatlah satu proyek bertipe Maven dengan nama FacebookAutoLogin dan pastikan pom.xml berisi dependency Java Selenium.

<dependency>
	<groupId>org.seleniumhq.selenium</groupId>
	<artifactId>selenium-java</artifactId>
	<version>3.141.59</version>
</dependency>

Langkah selanjutnya adalah mengunduh geckodriver.exe melalui https://github.com/mozilla/geckodriver/releases/tag/v0.27.0. Kita akan menjelaskan fungsi geckodriver nantinya. Kopikan geckodriver.exe pada root direktori proyek yang sudah dibuat sebelumnya.

Konsep Dasar Selenium

Selenium yang akan kita pakai pada artikel ini berbentuk library Java. Didalam library tersebut terdapat class-class dan fungsi-fungsi yang dapat kita pakai untuk mengendalikan web browser. Selenium mengendalikan web browser dibantu oleh driver tertentu, setiap web browser mempunyai driver masing-masing. Seperti misalnya pada artikel ini kita menggunakan Firefox maka kita menggunakan driver geckodriver.exe. Apabila kita menggunakan chrome web browser maka kita harus menggunakan driver yang lain lagi.

Library Selenium terdiri dari beberapa fungsi dasar :

1. Fungsi untuk membuka web browser.
2. Fungsi untuk membuka url tertentu melalui web browser.
3. Fungsi untuk mengambil komponen html tertentu berdasarkan atribut komponen dalam url tersebut.
4. Fungsi untuk mengubah atribut komponen html.
5. Fungsi untuk melakukan aksi tertentu pada komponen html, misal fungsi tekan tombol.

Sekarang mari kita perlihatkan fungsi-fungsi dasar ini dalam satu aplikasi sederhana untuk login otomatis kedalam facebook.

Memulai Coding

Buka class utama dari proyek yang sudah kita buat sebelumnya. Kemudian tambahkan line code dibawah ini pada method main.

System.setProperty("webdriver.gecko.driver","geckodriver.exe");

Fungsi code diatas adalah untuk memakai geckodriver sebagai driver Selenium dan lokasi geckodriver.exe adalah pada root direktori proyek. Kita bisa mengubah parameter kedua apabila ingin meletakkan geckodriver.exe pada lokasi lain dalam harddrive.

Kemudian dilanjutkan dengan line berikutnya, untuk membuka web browser Firefox secara otomatis.

FirefoxDriver driver = new FirefoxDriver();

Dengan menggunakan object driver kita dapat mengendalikan web browser yang sudah terbuka. Seperti contoh pada line code dibawah ini kita bisa membuka facebook melalui object driver dan memerintahkan web browser untuk membuka halaman facebook.

driver.get("https://facebook.com");

Kemudian siapkan dua variable bertipe String untuk menyimpan email dan password yang digunakan sebagai login facebook. Ganti xxxx dengan email dan password masing-masing.

String userEmail = "xxxx";
String userPassword = "xxxx";

Selanjutnya mari kita perhatikan pada halaman facebook yang sudah terbuka pada web browser. Gunakan fungsi Inspect Element pada Firefox untuk melihat atribut input text email, input text password dan tombol Login. Kita akan menemukan atribut name pada input text email adalah email, kita juga akan menemukan atribut name pada input text password adalah pass dan terakhir atribut name pada tombol Login adalah login.

Dengan menggunakan ketiga atribut name diatas kita bisa mengambil object khusus untuk mengendalikan masing-masing komponen html. Seperti misalnya mengisi email dan password pada masing-masing input text pada halaman login facebook yang sudah terbuka.

WebElement inputEmail = driver.findElement(By.name("email"));
inputEmail.sendKeys(userEmail);

WebElement inputPassword = driver.findElement(By.name("pass"));
inputPassword.sendKeys(userPassword);

Object bertipe WebElement adalah object khusus untuk mengendalikan komponen html. Object tersebut dapat dibuat dengan menemukan komponen html tertentu berdasarkan atribut name dengan menggunakan fungsi driver.findElement(By.name. Melalui object WebElement ini kita bisa mengirimkan perintah tertentu kepada komponen html. Misal fungsi sendKeys memerintahkan web browser untuk mengisi nilai input text dengan nilai yang kita inginkan. Kita juga bisa menemukan komponen html dengan atribut lain, misalnya id, class, value dan sebagainya.

Kemudian kita juga bisa mengambil object WebElement untuk mengendalikan tombol login dan melakukan perintah klik pada tombol tersebut.

WebElement loginButton = driver.findElement(By.name("login"));
loginButton.click();

Dengan melakukan klik pada tombol login maka aplikasi akan secara otomatis memerintahkan web browser untuk login kedalam facebook.

Sekian dulu artikel penjelasan konsep dasar dan coding dasar untuk mengenal Java Selenium. Source code lengkap dapat diambil melalui github kami di : https://github.com/PT-Nextgen/ng-facebookautologin.