Memulai Selenium WebDriver Dengan Javascript

Hello guys,

Selenium dapat dijalankan dengan berbagai bahasa pemrogaman. Kali ini #sharingtestingwithanisa akan membahas bagaimana memulai selenium webdriver dengan javascript.

Pertama pastikan sudah menginstall code editor ya. Disini kita akan menggunakan code editor visual studio code yang bisa didownload disini https://code.visualstudio.com/

Kedua install node js, karena selenium web-driver pada javascript menggunakan library npm. Maka perlu untuk install node js berikut link untuk download nya https://nodejs.org/en/download Lebih baik download versi LTS ya, karena lebih stabil.

Setelah node js berhasil diinstall. Konfigurasi npm dan node js di Environtment variable windows. Hal ini agar npm dan node dapat dipanggil dimanapun direktori. Tambahkan path directory dari npm dan node js ke Path di Environment Variable. Berikut cara untuk mengakses environtment variables https://docs.oracle.com/en/database/oracle/machine-learning/oml4r/1.5.1/oread/creating-and-modifying-environment-variables-on-windows.html

Ketiga instal browser driver. Disini kita akan menggunakan browser chrome ya. Jadi perlu untuk mendownload chromedriver. Kita juga bisa menggunakan browser lain sesuai kebutuhan, dengan mendownload driver dari versi browser tersebut. Perlu diperhatikan untuk menginstall chromedriver sesuai versi chrome yang terinstall di devices. https://chromedriver.chromium.org/downloads Download dan install chromedriver. Kemudian konfigurasi chromedriver di environment variable seperti cara sebelumnya.

Keempat, setelah sudah berhasil melakukan step-step diatas. Selanjutnya buat sebuah folder project dan buka di code editor.

Buka terminal, cek apakah npm dan node js sudah terinstall dengan benar. Jalankan perintah “npm -v” dan “node -v” untuk memeriksa versi npm dan node yang terinstall. Jika menemui error seperti npm atau node tidak terdeteksi, maka restart laptop kemudian jalankan kembali.

npm -v
node-v

Kemudian jalankan perintah “npm init” untuk menginisiasi project.

npm init

Setelah menjalankan “npm init” maka akan terbentuk file package.json.

Kemudian jalankan “npm install” untuk menginstall npm. Npm ini nantinya merupakan library dimana kita akan mengintall selenium web-driver.

npm install

Setelah menjalankan “npm install” maka akan terbentuk file package-lock.json.

Selanjutnya, install selenium web-driver via npm https://www.npmjs.com/package/selenium-webdriver

npm install selenium-webdriver

Setelah berhasil menjalankan “npm i selenium-webdriver” maka akan di folder project akan ada folder baru yaitu node_modules.

Selanjutnya buat file baru didalam project selenium ini. Disini kami membuat file dengan nama test.js. Selanjutnya tambahkan script selenium dari link npm selenium webdriver https://www.npmjs.com/package/selenium-webdriver?activeTab=readme . Jangan lupa untuk mengganti browser dari FIREFOX menjadi CHROME, karena tadi kita menggunakan chromedriver.

const {Builder, Browser, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  try {
    await driver.get('https://www.google.com/ncr');
    await driver.findElement(By.name('q')).sendKeys('webdriver', Key.RETURN);
    await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
})();

Saat ini project selenium sudah dapat dijalankan dengan menjalankan “node nama-file.js”

Nantinya akan terbuka chrome dan menjalankan script yang ada di file test.js. Chrome yang dijalankan oleh selenium akan ada tulisan “Chrome is being controlled by automated test software”.

Selanjutnya kita melakukan testing singkat website Kopi Kenangan dengan selenium. Disini kita menginstall framework mocha https://mochajs.org/ untuk testing, karena kita menggunakan node js untuk selenium ini. Dan mocha adalah framework testing untuk node js

npm install --global mocha

Kita juga menginstall library assertion chai https://www.chaijs.com/, sehingga dalam script kita dapat menggunakan assertion untuk memvalidasi actual result apakah sesuai dengan expected result.

npm install chai

Jika telah ditambahkan mocha dan chai js, maka di package.json dibagian dependencies akan ada tambahan seperti berikut.

Berikut adalah script testing singkat Kopi Kenangan dan hasilnya. Disini terliat untuk test case tersebut passed atau expected.

const assert = require('assert');
const {Builder} = require('selenium-webdriver');

describe('Website Kopi Kenangan', function () {
    let driver;

    before(async function() {
        driver = await new Builder().forBrowser('chrome').build();
    });

    it('Landing page Kopi Kenangan', async function() {
        await driver.get('https://kopikenangan.com');
        let URL = await driver.getCurrentUrl();
        let title = await driver.getTitle();
        assert.equal(URL, 'https://kopikenangan.com/');
        assert.equal(title, 'Kopi Kenangan');
    });

    after(() => driver && driver.quit());
})

Code diatas berbeda dengan code sebelumnya. Karena pada code sebelumnya kita masih menggunakan bawaan selenium javascript untuk code nya. Nah saat ini kita menggunakan sebuah Test Suit. Dimana Test Suit dari code ini adalah ‘Website Kopi Kenangan’ yang ada di line 4. Di line 1 kita mengimpor assert sehingga kita dapat menggunakan assert di line 15 dan 16. Demikian juga pada line 2 dimana kita mengimpor builder yang berfungsi untuk memanggil browser di line 8, sehingga kita dapat menjalankan script automation ini. Karena kita menggunakan library mocha chai, maka penulisannya dalam Test Suit. Yang didalamnya ada beberapa skenario. Namun dalam hal ini kita hanya membuat satu skenario yaitu skenario ‘Landing page Kopi Kenangan’ di line 11–17. Dimana pada line 12 berisi perintah agar driver mengakses website kopi kenangan. Kemudian di line 13 merupakan perintah untuk mengambil apa url terbaru yang diakses dengan funtion getCurrentUrl() dimana, url ini kemudian di assert.equal di line 15. Yang berarti .equal merupakan function milik assert yang telah kita import diline 1, dimana didalam tanda kurung struktur nya yaitu (variable yang akan dibandingkan dalam hal ini actual result, expected result). Demikian juga untuk line 14 dan 16. Selanjutnya pada line 19 merupakan perintah untuk mengclose browser setelah skenario dijalankan. Cara menjalankannya dengan perintah

mocha --recursive --timeout 10000 "namafile.js"

Untuk dokumentasi dari selenium webdriver dengan javascript ini bisa diakses disini ya https://www.selenium.dev/selenium/docs/api/javascript/index.html

Terimakasih..

Email : anisanursekararum@gmail.com

Linkedin : www.linkedin.com/in/anisa-nur-sekar-arum

Website : https://anisanursekararum.my.canva.site/