Automation Testing

for UI Application
A g i t ha P ra m e s t i S e m b i ri ng / A s s o c i a t e S D E T a t B l i b l i .c o m

Page | 1
Introduction
Automation pada dasarnya merupakan penciptaan dan pengaplikasian dari teknologi
untuk memproduksi dan men-deliver service-service dengan intervensi manusia seminimal
mungkin.

Ketika suatu aplikasi didevelop, beberapa tim disatukan untuk membuat aplikasi tersebut
stabil. QA/Testers memulai dengan memeriksa dokumen yang berisi requirements atau
kebutuhan-kebutuhan serta fungsi yang akan didevelop pada aplikasi tersebut dan membuat test
cases dari dokumen tersebut. Di Blibli.com, kita menggunakan beberapa tools untuk melakukan
automation ui yaitu Selenium, BDD Testing, Cucumber, dan Serenity BDD.

• Selenium

Selenium merupakan testing tools yang berbasis JavaScript Framework, dapat menjalankan
scenario/testcase secara langsung ke browser(Google, Firefox, dll) yang kita inginkan.

• BDD Testing

Behavior Driven Development merupakan software test yang adalah pengembangan dari
TDD, menggunakan human-readable descriptions, atau yang biasa dikenal sebagai Gherkin. BDD
Testing memiliki format yaitu ‘Given-When-Then’, sebagai contoh:

Given a certain scenario

When an action takes place
Then this should be the outcome.
https://medium.com/javascript-scene/behavior-driven-development-bdd-and-functional-testing-62084ad7f1f2

Page | 2
Scenario BDD

1. Keyword Given digunakan untuk Initial context (Open Blibli Page, dll)

2. Keyword When digunakan untuk eventnya (Click button login, dll)

3. Keyword Then digunakan untuk assertion

Given When

Then

Contoh Penulisan Scenario / Testcase

Initial context on Meat ball R

• i’m on meat ball Restaurant estaurant
Given

• i order meat ball Do Action Order meat ball

When

• i should receive a delicious Assertion For Receive deli

cious Meat balls
Then meat balls

Page | 3
 • Cucumber

Cucumber merupakan open source tool yang mendukung Behavior Driven Development
(BDD) framework. Bagaimana BDD bekerja pada Cucumber Automation?

https://www.guru99.com/introduction-to-cucumber.html

• Serenity BDD

Serenity BDD merupakan tools yang sangat berguna untuk membuat automation test web,
mobile, dan api test.

Serenity BDD merupakan open souce library yang membantu dalam mengenerate well-illustrated
testing report. Serenity tidak hanya menampilkan hasil reports test dari automation kita, namun
juga dapat membuat dokumentasi secara berkala.
https://serenity-bdd.github.io/theserenitybook/latest/index.html

https://www.baeldung.com/serenity-bdd

Page | 4
Contoh hasil report Serenity

Page | 5
How automation works ?
Story: I want To eat delicious meat balls

Scenario 1: Go to Restaurant and eat meat balls

Given I’m on Meat ball Restaurant

When I order meat ball

Then I should receive a delicious meat balls

Mapping ke
Automation Script
Java Code Run it ! Result
(Selenium)

Implementasi Dalam Project :

Scenario/Test Case dituliskan secara dengan Cucumber BDD dalam file dengan extension
‘.feature’

Page | 6
Dimappingkan ke dalam bahasa Java melalui kelas Steps

Lalu Jalankan dengan memanggil nama featurenya

Berikut hasil report automation ui.

Page | 7
Struktur Folder Automation

Main Package, For Action ( Hit API ) &

UI Intercation etc.

Test Package, for logic automation,

Mapping Between Feature files
with Java code

Page | 8
 Hooks used for method

That run before test is running

For Mapping Between Cucumber Feature

With Java code

File Runner for running Test

Contains all BDD Scenario

Browser , Apps , Selenium Properties

Page | 9
 DEMO 😊
Langkah-langkah
Sebelum memulai pastikan memiliki :
• IDE dan telah melakukan setup/install keperluan seperti ppt panduan yang telah diberikan
• Tambahkan extension “Xpath Helper” pada google browser
(https://chrome.google.com/webstore/detail/xpath-
helper/hgimnogjllphhhkhlmebbmlgjoejdpjl?hl=en)

• Tambahkan extension “Cropath” pada google browser

(https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo/) lalu
restart aplikasi (tutup lalu buka kembali)

Format Penamaan : NPM_Kelas_Automation_UI

1. Buat folder bernama „150708418_C_Automation_UI‟

2. Buka IntelJ dan klik New Project/New Project

Page | 10
3. Tambahkan Archetype dengan klik „Add Archetype‟

Berikut link untuk mendapatkan archetype ➔ https://mvnrepository.com/artifact/net.serenity-

bdd/serenity-cucumber-archetype/2.0.81
Group ID : net.serenity-bdd
Artifact ID: serenity-cucumber-archetype

Version : 2.0.81

Masukkan archetype dan klik tombol „OK‟ dan klik tombol „Next‟:

Page | 11
4. Lalu pastikan lokasi folder sesuai dengan yang telah dibuat di Langkah pertama.
Expand Artifact Coordinates. Untuk name akan sama dengan artifactId menggunakan format
‘NPM_Kelas_Automation_UI’ dan groupId dapat menggunakan ‘org.uajy.modul.automation.ui’
lalu klik tombol „Next‟

Page | 12
5. Lalu klik tombol „Finish‟
Sebelum klik Finish, pastikan Maven home directorynya dipilih Bundled (Maven 3)

Bundled (Maven 3)

6. Karna kita akan mengimplementasikan Custom WebDriver, maka tambahkan dependency berikut di
pom dan klik ikon kanan berwarna biru untuk mendownload dependency yang telah dimasukan ke pom:
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>4.1.0</version>
<scope>test</scope>
</dependency>

Page | 13
Pada pom.xml ubah url menjadi https seperti berikut ini:

Jika masih ada dependency yang belum terdownload, buka Terminal (letaknya di kiri bawah), lalu ketik:
mvn clean install

Tunggu sampai selesai semua, lalu restart dengan cara:

Klik File  Invalidate Caches/Restart

7. Lalu klik kanan di package org.uajy.modul.automation.ui, lalu buat package dan kelas untuk Driver
seperti berikut:

Page | 14
Beri nama packagenya sebagai „driver‟:

Lalu buat kelas Java dengan nama CustomDriver.java di dalam package driver yang telah kita buat :

Page | 15
8. Lalu buka kelas CustomDriver.java dan masukkan settingan driver yang akan digunakan (di sini kita
menggunakan chrome sebagai browser yang akan menjalankan automation UI) :

package org.uajy.modul.automation.ui.driver;

import io.github.bonigarcia.wdm.WebDriverManager;
import net.thucydides.core.util.EnvironmentVariables;
import net.thucydides.core.util.SystemEnvironmentVariables;
import net.thucydides.core.webdriver.DriverSource;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class CustomDriver implements DriverSource {

private EnvironmentVariables environmentVariables =
SystemEnvironmentVariables.createEnvironmentVariables();

@Override
public WebDriver newDriver() {

ChromeOptions options = new ChromeOptions();

options.addArguments("start-maximized");
WebDriverManager.chromedriver().setup();
return new ChromeDriver(options);
}

@Override
public boolean takesScreenshots() {
return false;
}
}

Page | 16
9. Selanjutnya tambahkan di serenity.properties untuk menyatakan bahwa kita akan menggunakan custom
webdriver (alias bukan driver default):
webdriver.driver = provided
webdriver.provided.type = mydriver
webdriver.provided.mydriver = org.uajy.modul.automation.ui.driver.CustomDriver

(tips: untuk nilai dari webdriver.provided.mydriver silakan diketik manual saja, untuk
memastikan benar)

Page | 17
10. Lalu buka file „DefinitionTestSuite‟ dimana ia merupakan cucumber runner dan lakukan perubahan
seperti berikut:
@RunWith(CucumberWithSerenity.class)
@CucumberOptions(features="src/test/resources/features/",
tags = {"@LookupADefinition"}
)
public class DefinitionTestSuite {}

Page | 18
11. Lalu klik „Add Configuration‟ ➔ „+‟ ➔ „Junit‟ :

Page | 18
12. Isikan seperti berikut:

Jangan diketik manual, tapi pilih dari

titik tiga dalam kotak merah ini

13. Tambahkan tag „LookupADefinition‟ di file feature :

Page | 19
14. Lalu run dengan panah hijau berikut:

15. Result ➔ Success

Page | 20
16. Report : open target → open site → find index.html → klik kanan dan pilih browser untuk
menampilkan report :
Jika index.html belum muncul, ketik “ mvn serenity:aggregate “ di Terminal, dan tunggu
sebentar.

Page | 21
Task:

Let‟s create scenario for: http://gosoft.web.id/wonderfulQuote/ 😊

Page | 22