WELCOME

Selamat datang
Sugeng rawuh
wilujeung sumping
Horas !
CONGRATULATION
Kamu adalah anggota dari blibli sekarang ,
You are now member of blibli.
Silahkan merujuk ke dokumen ini sebelum anda mulai bekerja
Please refer to this document before you start to working.
Agenda
Tak kenal maka tak sayang / if you don’t know , then you don’t love it , so let’s introduce

• Pengenalan /
Introduce
• Cara Kerja Framework Automation /
How To Our Automation work
• Cara Koding yang baik dan benar /
How to Write Automation code https://badak.gdn-app.com
• Standard dari kode automation /
Standard from automation code
Agenda
Mulai Ngoding kuy / Let’s start to code

• Persiapan Ngoding Automation/

Things to do before coding automation
• Project Pertama /
first Project
• UI Automation /
Ui Automation
• API Automation / https://badak.gdn-app.com
api automation
• Penggunaan Properties File/
Properties File
• Menjalankan Automation /
Running Automation
Agenda
Habis Ngoding Perlu diintegrasikan / after code , next is integration

• Mendeploy Artifactory /
deploying artifactory
• Menggunakan Module /
Module Usage
• Integrasi dengan testlink /
Integrate it with Testlink https://badak.gdn-app.com
• Git Branching
• Integrasi dengan Jenkins/
Jenkins Integration
• Setting Badak Jobs
Pengenalan
Introduce
• Automation kita mempunyai 3 macam
model ( Jmeter , UI , dan API )
Our Automation have 3 kinds of models UI
(Jmeter , UI ,and API)
• Dan Basic Codenya adalah Bahasa Java
and basic code language is Java

Let’s Code
Together Java API JMETER
JMETER
Jmeter

Jmeter adalah sebuah tools yang

digunakan untuk mengetest API ,
biasanya digunakan untuk component
test
Jmeter is an tools to test API , usually used Download Jmeter Disini
for component Testing Download Jmeter in here
JMETER
Jmeter

+ Lebih Cepat dalam melakukan test API

FastTo Develop and test API
- Belum Bisa Diintegrasikan dengan UI
testing , sehingga tidak bisa digunakan
untuk regression dari depan hingga Download Jmeter Disini
belakang Download Jmeter in here
Could Not yet Integrated with UI testing,
so we can’t do a regression test from front
end until back end.
UI Testing
Ui testing

UI testing disini adalah melakukan testing

terhadap UI yang ada di masing – masing
system ( Baik Mobile , Web , maupun
Apps) .Kami menggunakan Selenium /
Appium sebagai Framework
automationnya , dan serenity sebagai
reportingnya
Untuk Tutorial mendownload Archetype silahkan klik link ini
UI testing is to test the existing UI in each For guide how to download archetype please click this link
system (Both Mobile, Web, and Apps). We Untuk tutorial setup, silahkan mengunjungi link ini
use selenium / Appium for automation For setup guide , Please Follow this Link
framework and Serenity as Reporting.
 UI Testing
Ui testing

+ Code Mudah dikembangkan

Easy to develop
+ Dapat diintegrasikan dengan API
Testing
can be integrated with API Testing
- Ditulis dalam Bahasa java , sehingga Untuk Tutorial mendownload Archetype silahkan klik link ini
perlu sedikit belajar For guide how to download archetype please click this link
Untuk tutorial setup, silahkan mengunjungi link ini
Written in java, so need a little learning For setup guide , Please Follow this Link

Note :
kami menggunakan Java 8 Sebagai standar dalam code automation
We Use Java 8 as the standard in automation Code
API testing
API testing

Sama Halnya dengan UI Testing , dalam

API Testing , kami menggunakan Rest
Assured dalam standard API Testing.
Similar to UI Testing, in API Testing, we use
Rest Assured in the standard API Testing. Untuk memulai penggunaan rest assured , silahkan ke link ini
For getting started in rest assured , please go to this link
API testing
API testing

+ Mudah Dikembangkan dan diintegrasikan

Easy to Develop and integrated
+ Report lebih Jelas ,
Clearly Report

- Harus didevelop manual menggunakan

Untuk memulai penggunaan rest assured , silahkan ke link ini
java code. For getting started in rest assured , please go to this link
Must be developed manual using java code.
Pengenalan
Introduce

• Jika Anda ingin mengetest API

disarankan menggunakan Rest Assured
daripada JMETER
if you want to test API we recommend to
use Rest Assued instead of JMETER
• Karena Restassured Didukung untuk
VS
Modular System
Because Restassured supported by
modular system
BDD Testing
BDD Testing

Write
BDD Adalah Pengembangan dari TDD , scenario
TDD Sendiri adalah Test driven
Developmen yaitu development mengacu
pada story yang telah ditulis terlebih
dahulu. Baik BDD dan TDD Scenario Develop
ditulis terlebih dahulu sebelum Code
mendevelop code.
BDD is emerged from TDD , TDD is Test
driven Development that is development
refers to the story that has been written
first . Both BDD and TDD , the Scenarios Run it !
are written first before developing the code
Konsep BDD
BDD Concept
1. Deskripsikan Behaviour (Login , Order ,
Etc)
Describe Behaviour (Login , Order , Etc) Describe
Behaviour
2. Tuliskan Step ( Klik Tombol login , etc)
Written step definition ( Click button login ,
etc) Written
Run and
Step
3. Ketika dijalankan pertama kali , hasilnya Pass
Definition
akan gagal
When it run first time , it will fail
4. Tulis kodenya agar stepnya berhasil
Write the code and make it pass
5. Jalankan kembali sehingga hasilnya akan Write Code
Run And
to make
pass step pass
Fail
Re-Run the test , so the result will be pass
Skenario BDD
BDD Scenario
Initial context Event Occurs
1. Keyword Given digunakan untuk
Initial context (Open Seoul Page, dll)
keyword given used for initial context
(Open Seoul page etc)
Given When
2. Keyword When digunakan untuk
eventnya ( Click btn a , dll)
Keyword When , Used For Event (Click
btn A , etc)
3. Keyword Then digunakan untuk
Then
assertion
Keyword Then , used for Assertion
Expected Outcome
Contoh Penulisan Skenario
Example for Writing scenario

Initial context on
• i’m on meat ball Restaurant Meat ball Restaurant
Given

Do Action Order meat ball

• i order meat ball
When
Assertion For Receive
• i should receive a delicious delicious Meat balls

Then meat balls

Cara Kerja Dari Automation
How Automation Work ?
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

Automation script
Dimapping keJava Code /
( Selenium , Appium ,
Mapped to Java code
Restassured )

Otomatis Membuat Testcase

creating testcase in badak Run it !
testcase management system
Struktur Folder dari Automation
Folder Structure for automation Framework

Main Package , For Action ( Hit API ) UI

Intercation etc.

Test Package , for logic automation ,

Mapping Between Feature files with
java code
Struktur Folder dari Automation
Folder Structure for automation Framework

Api : API testing , for hit the api

Data : saving Data that used by other class or
other steps
Models : modeling java response , UI Table etc
Pages : contains UI element and logic for click
, drag , etc
Properties : Save variable that read from
properties file
Utils : common class that can be used for
constant , utility , etc
 Struktur Folder dari Automation
Folder Structure for automation Framework

Hooks used for method

That run before test is running

For Mapping Between Cucumeber Feature

With Java code

File Runner for running Test

Contains all BDD Scenario

Schemas used for validating API Template
Request Body Template for API Testing
Properties for data in
each Environtment
Browser , Apps , Selenium Properties
KODINGYANG BAIK DAN
BENAR
Create a good code
Mendefinisikan Class
how to define a class

Dalam mendefinisikan sebuah class , Camelcase

nama pada sebuah class harus bersifat Public class MyPage {
camelCase.
// field, constructor, and
When You define a class , the name must be
a camelCase // method declarations
Anda juga dapat mendefiniskan sebuah }
class tersebut public atau
 Mendefinisikan Fungsi / Method
how to define a function / method

Dalam Mendefinisikan Method , definisikan nama method / fungsi dengan jelas , sehingga orang lain
dapat mengerti apa maksud dari method tersebut.
When You define a method , please define clearly name for that method , so the other people will understand what the
method do.

DO DON’T
Clearly method Did’t know which Button
name to click btnLogin that want to be clicked

public double btnLoginClick(String aParameter) { public double BtnClick(String aParameter) {

//do the Action Here //do the Action Here
} }
Mendefinisikan Variabel dalam PageObject
Defining Variable in PageObject
Dalam mendefinisikan Elemen di dalam page Object mohon dibuat sejelas mungkin , sehingga mudah
untuk dipahami
When You define an element in page object , please make it as simple as easy to read , so the other people able to
understand what is that.

DO Clearly method DON’T

name to btnLogin type is Did’t know which Element
button and login is action that want to be clicked

public WebElementFacade btnLogin; public WebElementFacade login;

 Standard Code
• Silahkan merujuk ke halaman ini untuk naming convention ,
please refer this link for naming convention

https://www.oracle.com/technetwork/java/codeconventions-135099.html
PERSIAPAN
Preparing your Environtment
Hal hal yang dibutuhkan / things to do

Install Java Install maven Install Intellij Install Intellij plugin Install Chrome
Lombok , Json2Pojo
, Cucumber
INSTALLING JAVA
Preparation – 1 of 5
Checking Java Instalation
• To check your java Instalation , In terminal or Command Line , please type

Java -version

• Make sure You have Java 1.8.xxxx inside that , if it’s not using Java 1.8 , please uninstall it
first , because our automation supported in Java 1.8 ( Java 1.9 is not supported Yet )
• If you have java installed , you can skip java installation and continue to setup JAVA
_HOME environtment
Installing Java
• Our Automation is Supported From Java 8 ( Please not using Java 9 or newest )
• To install java , please go to and select JDK 8
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-
2133151.html
• And download based on your operating system (Mac OS or Windows )
• And then install the Java
• After installing Java , please check again in the command line in the previous slide
, and make sure the version is same with mentioned previously
SETTING JAVA_HOME
For Windows
Add environment
Variable ( Windows)
• Right click on MyComputer / This PC in
explorer and Click on Advanced System
Settings ,
• It will Open new Window System
Properties
• Press on Environment Variables
Add environment
Variable ( Windows)
• Press New if there are no JAVA_HOME
defined in the System Variables
• Put the variable name JAVA_HOME
• And press Browse Directory
 Add environment Variable (
Windows)
• In the windows select folder , choose java Instalation until
jdk.1.8.0_xxx
• And press OK
• Make sure , variable Value is correct for path
• And press Ok again
• And Done

2
1
3
SETTING JAVA_HOME
For MacOs
Setting JAVA_HOME

• Open your terminal and type “vi .bash_profile”

• Add This line into that terminal by pressing I (i)
export JAVA_HOME=$(/usr/libexec/java_home)

• And then Press escape followed by :wq and

press enter
Check your JAVA_HOME variable
• Type echo $JAVA_HOME in terminal , and make sure the the variable is appear like
this screenshoot below
Enable java to access outside link
• Folow this tutorial to enable your java Dev kit , in order to allow java access
outside blibli’s network ( But please make sure you have internet access )
• https://confluence.gdn-app.com/display/GDNIT/Import+CA+Cert+-+Java+Dev+Kit
INSTALLING MAVEN
Preparation – 2 of 5
Installing maven
• Since Mac 10.6.8 MacOSx Snow Leopard , Mac OS X comes with Apache Maven 3 built in, and can be
located at /usr/share/maven
• To verify the Maven installation, in terminal, issue the command mvn -version.

• But if your command is not recognized you can continue in this installation process, if you already
installed maven correctly in your workstation , you can skip this process
Downloading Maven
• Please go to this page
https://maven.apache.org/download.cgi to
download maven and extract in your folder
library
• For windows , create one folder called
appserver in C:/ and extract the
downloaded maven into that folder
rename folder to maven
Additional setting for
Windows
• Make sure in
C:\appserver\maven
The folder structure is same with this picture
Instalation Windows
• After put the installation maven folder ,
please go to environment variable and add
2 variable , M2_HOME and MAVEN_HOME
in there with the same way
• Make Sure the variable value is
“C:\appserver\maven”
Instalation maven on
windows
• Still same in Environment Variable , Find path
in that dialog and press edit
• Press new in that dialog , and type
“%MAVEN_HOME%\bin”
• Press ok until all dialog is closed
Verify installation maven on windows
• To verify your maven installation , log off or open new command prompt and
type mvn –v

• If your terminal appear like that picture , congratulation , your maven is installed
correctly
Instalation maven on Mac OS
• To install maven , the easiest way is using homebrew , what is homebrew ?
• Homebrew is a package management for Mac os
• To install maven just type “brew install maven” in your terminal and wait until
installation is finish , then verify your installation using mvn -v
Add Setting.xml into
your maven project
• Because we are using internal Repository
, we should setting maven artifactory to
pointed to our repository ,
• If you are using windows , go to explorer
and go to “C:\Users\{{your
username}}\.m2” or mac ~/.m2
• If the folder .m2 is not exist you can
create that folder from your gitbash
• Type “mkdir .m2” and make sure your
folder .m2 is exist
Add setting.xml into your folder
• Please download your setting.xml in this link
https://confluence.gdn-
app.com/display/QKBS/How+To+Run+Automation+Testing+in+Windows
• and put it on your .m2 folder
INSTALLING INTELLIJ
Preparation – 3 of 5
Installing Intellij

Our Main IDE is Intellij , You can download

Intellij In this link
https://www.jetbrains.com/idea/download/
You can use Community version
We recommend you to download newest
intellij Idea because it’s offer new Cool
feature , such as detailed process etc
INSTALLING PLUGIN INTELLIJ
Preparation – 4 of 5
Installing Plugin
• Before you start code , you need some plugin to make easy while you do some
code in intellij
• To Install Intellij Plugin , Go to Configure ->Setting or File -> Setting
1. Lombok Plugin
• Lombok Plugin is used for getter and setter and / or other usage. It’s needed by
intellij to identify getter and setter for your model or your data.

With Lombok Plugin

Installing Lombok Plugin
• To Install Plugin , Search “Lombok” into Tab Marketplace

Click Button Install if

available ,
Installing ignore plugin
• Ignore plugin is used for exclude folder that want to uploaded into version control
(git) repository
In repository , we just need src folder
, .ignore and pom.xml
But when we open it via IntelliJ idea ,
it will create .idea , target folder and
xxxx.iml as well , that file / folder is
no need to upload in stash , to
exclude it we need to add .ignore file
, so that file will not be uploaded into
stash.

Maven Anime style Crunchzilla.com

Installing .ignore plugin
• To install ignore plugin , please go to plugin windows and type ignore

• And click Install , it will download ignore file.

Installing Cucumber Plugin
• Cucumber plugin is used to detect .feature files.
• Below is comparison between before and after installing cucumber plugin
Install Cucumber
Plugin
• To install cucumber plugin , please go to
plugin window , and type Cucumber for
java
• The Plugin is already installed by default
if you installing newest version of IntelliJ
( either community or ultimate )
• If your feature files still not detected
after installing cucumber plugin ,
right click on your feature files and select
mark as cucumber scenario
 Installing JSON 2 Pojo
• In our automation , we have to test api automation and usually response or
request from API service is Json , to make easy access during automation test , we
need to convert that JSON to Java Model , so we can easy to access any variable
inside that JSON

{
"name":"argo",
"address":"mojokerto",
"phone":"+628111111111"
}
 Installing JSON2Pojo

• There are 2 Plugin with name Json2Pojo ,

because we already implement Lombok
plugin into our automation , so you can
install Json2Pojo With Lombok.
• If you install Json2Pojo without Lombok ,
the code should have getter and setter ,
• But if you install json2Pojo with Lombok ,
you will get Shorten Model.

Without Lombok With Lombok

INSTALLING BROWSER
Preparation – 5 of 5
Chrome browser
• For automation development ,
many team use chrome as their
automation browser when
develop their automation.
• Make sure your chrome browser
is latest version to avoid any
failure during development , to
check your version please go to
triple dot in top ➔ Help ➔
About chrome
• Make sure your version is
uptodate
Installing Chrome plugin
• There are some Useful plugin that you can use to make easy
your automation development , there are Chropath that can
be get Xpath automatically from element
https://chrome.google.com/webstore/detail/chropath/ljngjb
naijcbncmcnjfhigebomdlkcjo
• And Xpath Helper , it will help you searching xpath manually
https://chrome.google.com/webstore/detail/xpath-
helper/hgimnogjllphhhkhlmebbmlgjoejdpjl Chropath UI

Xpath Helper
Firefox
• If you prefer using firefox instead of Chrome , we recommend to use firefox for
developer instead of default firefox , because that version of firefox is design for
development

• You can download this firefox version in this link

https://www.mozilla.org/id/firefox/developer/
PREPARATION IS
COMPLETE
Let’s Code !
PROJECT PERTAMA
First Project
Creating Project

For creating Project , we use Maven Archetype

What is archetype ? Archetype is like project template to create

project in less than 2 minutes
 Create first project
• Open your Intellij Idea and select file -> New -> Project ,
• or Create New Project in the Welcome Page
• It will appear new Window for creating new Project

OR
 2. Make sure
it’s Checked

Creating project

1. In New Project Dialogue , Select Maven

and Click Check button in Create From
archetype
3. Click Add
Archetype 2. Make Sure Project SDK is 1.8 if not
available , please click New on Project
SDK and search your Java SDK
Instalation
3. Click Add Archetype To Add our Custom
Archetype
1. Select Maven in
this Section

Trivia :
Artifactory is a place to store .jar file. FYI , java
will produce some executable file ,
probably .jar or .war . All of that file will be
stored in the artifactory and the other people
can use that or deployed in server
Creating New Project
• Go to this link to get latest Version for
Archetype
https://artifactory.gdn-
app.com/artifactory/webapp/#/artifacts/bro
wse/tree/General/libs-releases-
local/com/gdn/qa/module/archetypes/bada
k-cucumber-spring-archetype
• Select for newest Version for that folder ,
in that case , it’s 1.4.0 but it might be
different when you trying to access that
• Inside that folder select that have
extension .jar
In the detail Column , Look at Dependency Declaration
You will get something like in that picture

<dependency>
<groupId>com.gdn.qa.module.archetypes</groupId>
<artifactId>badak-cucumber-spring-archetype</artifactId>
<version>1.4.0</version>
</dependency>
 • Back to your intellij Idea and click on Add Archetype

<dependency>
<groupId>com.gdn.qa.module.archetypes</groupId>
<artifactId>badak-cucumber-spring-archetype</artifactId>
<version>1.4.0</version>
</dependency>

Put Detail Information about Dependency into Add

Archetype window (copy and paste recommended) , and
check your archetype is already added into list
 Create Project
• Click on expand and click on version 1.4.0
on list archetype in this case badak-
cucumber-spring-archetype:1.4.0
• And click next
1

2
 Fill your Group id with com.gdn.qa.module.api / ui depen on
your automation and followed by your system name , in this
case we will use training as system name
Fill your artifactID with your detailed System name ( for
example if your system is payment api so you can put
payment-api-automation in there) in this case we will use
training-new-hire , after done click next

This is groupID

Trivia : Group ID and Artifact id is used for

deployment in the artifactory that will be This is ArtifactID
explained in the end of this section. Group id
will represent the folder , artifact id will
represent your jar file

https://artifactory.gdn-app.com/artifactory/webapp/#/artifacts/browse/tree/General/libs-releases-
local/com/gdn/qa/module/api/hotel/content/cucumber-api-hotel-content/1.1.0-26/cucumber-api-
hotel-content-1.1.0-26.jar
• Make sure , you have correctly input your
data ,
• Please recheck again it’s correct or not.
• If you are wrong when inpputing your
data you should start to beginning from
creating project
• And if it’s already correct , you can go to
Next
Last steps
• If all already correct , you can put your
project location and proect name , please
remember it ☺ , because some of QA is
often forget about their project location
• And after that , you can click on finish
Waiting for project creation

Please wait until folder is created ,

and if there are modal dialog for
maven project imported , please
click on enable auto-import , it will
import automatically your
dependency
Project creation

• If it’s success , it will create some folder

and some example code , you can check
on the project side there will be some
folder.
Updating some dependency
• In your file pom.xml you will get some of properties of that version , in this tutorial we will
use badak.core with version 1.9.3 and serenity.version 1.9.45 and
serenity.testlink.integration 3.4.6 and selenium.vesion 3.14.0
Run IT!
• After creating project and updating dependency , you can run via maven or via
Junit , in the first time , we will using maven because it will download some
dependency. To run via maven go to View -> Tool Window -> Maven

• Click 2x on clean
under lifecycle
• And then after it’s
finished , click 2x
on Verify , it will run
your automation
Congratulation you have run your 1st Automation test
 Checking report
• After you running your
automation , it will creating new
folder called “target” , it’s located
with Red / Orange folder , go to
that target->site->serenity-> and
search for index.html , it will give
you the report
• Right click on that , and select
Open with browser -> Chrome or
Your favourite browser
Reporting Result

• This is your Report result , you

can check how many test is failed
or passed
• And you can check for ui you can
check it has some screenshoot
and for api you can check
detailed api that hit or getting
from server
START CODING YOUR
AUTOMATION
Using Simple Selenium Demo Page
Start to code
• After your project created , it will have
structure that has been explained in this
page
• In this session we will start to code with
this Selenium Demo page
• You can access demo page from this URL
https://www.seleniumeasy.com/test/
Creating first scenario
• In this practice ,
we will start to
click Start
practicing and
then go to simple
form demo. Type
Hello World and
then click on
Show Message
and assert that
display is correct
• You can see how
we do it
manually in that
video
Creating scenario
• Before we create automation code , we should write our scenario first in the folder
features
Create new file under folder features ( Right click on features folder ->
then click new -> file

Please remember ,
prefix is .feature ,
otherwise it will
not detected as
cucumber feature

Give name seleniumEasy.feature

Writing scenario
• Please Write scenario as a example in the
image
• You can use ctrl + space to do auto
complete on scenario or feature
Auto generated Steps
• As we know in this page After you write some scenario , next step is mapped
between your feature files with you java code. Cucumber plugin has that feature
to generate automatically. To generate java code please use alt + enter or click on
Yellow lamp on that feature files
Click On Create step definition , and
create step definition

Select XCartSteps or other available class

Create Steps

• In Your XcartSteps there will be a

mapping code , we will move that
code into new class steps
• Right click on package steps and
click new Class
• Add name SeleniumEasySteps
 Move steps into new class
• Cut that code from XCartSteps and paste it into that New class

Cut to here

XcartSteps.java SeleniumEasySteps.java
Explanation Steps Class SeleniumEasy.feature

Please add it , to activate spring

mapping between Java Code and Feature

steps
Explanation Steps Class

Steps that has been mapped into java

code will have different color with steps
that not yet implemented in java code.
You can use ctrl + click on that steps and
it will directly go to Java code that
mapped that steps
 Create other steps
• Repeat the steps for other steps but
SelenumEasySteps will be appear
when you generate steps
• Generate until All steps until all of
that feature have same color

Choose This File

 We have standard to
Create Tags , you can view
Explanation for feature files this page before continue
to other steps
https://confluence.gdn-
app.com/display/QKBS/Tag
s+Standardization

Tag Feature
Feature Title
Tag Scenario
Scenario Title , Will became Title in
testlink
Scenario Steps ,
inside double quote
usually will be
converted
automatically as a
parameter
Code On Page Object
• Alright now you have create your mapping between your feature files and your
java code , but it will not do nothing until you add some logic in there.
• In this UI we will using Page Object Design Pattern ( One Class Page represents
One UI Page ) for example , we have blibli home page , so that page should be
mapped into one class ( for example blibliHomePage.java)

BlibliHomePage.java
Tips Creating Page Object
• You can create some Generic PageObject if that element is appear in the most of
page , some example , Search bar in header blibli page will appear in most of page
, so you can create some java class page that represent that element .

Header.java

Footer.java

You are allowed to create some of class util to

make your automation development more
easy.
Creating SeleniumEasy page object
• We will create 2 Page Class Object , One for HomePage second for FormPage

HomePage.java FormPage.java
Creating HomePage.java
• Because it’s Ui so we put PageObject under class src/main/pages
• Create new class in there with name HomePage.java and extend with PageObject
from serenity

Add This , you can use ctrl space

to help on this code
Start Page Object Code
• We will mapping this Element into Java code
Preparing Java Class
• Before you code into PageObject , Add annotation @Component (Packagename
+ class name ) it will activate Spring functionality. You can read more in this page
https://confluence.gdn-app.com/pages/viewpage.action?pageId=62194101
Opening Web browser
• In the beginning , first steps that we need is opening web browser and go to
selenium easy page , to do that , we can use function openAt(Your url )
public void openSeleniumEasyPage(){
openAt("https://www.seleniumeasy.com/test/");
}

• So the complete code will became like in this picture

Searching element in
page
• For searching element in page , please
open website that we want to test
(https://www.seleniumeasy.com/test/)
and right click on button start practicing
and click on inspect
• It will open new windows for html code
Locator Strategy
• There are some ways to search Element in HTML
• By.id ,
• By.xpath ,
• By.css
• By.Class name

• But we usually use id or class name , or css if it’s possible if there are none of them appear ,
you can use xpath as well

ID Class name
• You can request class name by following this confluence page https://confluence.gdn-
app.com/display/GDNIT/QA+UI+Component+ID+Naming+Convention
• And also you can learn about Xpath in this page
https://www.w3schools.com/xml/xpath_intro.asp
Add element into page
• Because we have found ID in that element , we can use that as a identifier
Explanation about how to finding element
• For finding element we can use 2 kind of finding elemen t, 1st is using annotation
@FindBy(Id , xpath , somehing)

• Or You can use function find(By.xpath , id or something) inside java method

• Both of them have same functionality but have different usage. For @FindBy usually we use
it on non SPA ( single page application ) because it will scanned in the beginning
• For find(By.xxxx)) will scan element when that function is being called. Usually we use it for
dynamic DOM or SPA
Do Some Action with element
• In general , for doing some action , you just call the element and do some action

btnBasicExample is the element

and click is action. You can see
available action by type dot (.)
and then you can complete
action that you can do in there
Calling Page Class into Steps class
• Open SeleniumEasySteps.java and call HomePage into that class. For calling
HomePage we use annotation @AutoWired

Add it for activating Spring

Annotation from spring

Your class that need for auto wiring
 Call function for open selenium Easy Page for
steps user open selenium easy home page

And also call function for clickBtnBasicExample

You can use autocomplete as well , Play

Video for demonstration
Run IT !
• To Run it we will use Tags for running, open
file CucumberRunner.java
• Change Tags inside that file for running
@SeleniumEasyFeature
• right click on CucumberRunner.java and
click on Run CucumberRunner
 After Runing

Make sure that has been checked

After you run automation , there will be

status in your intellij idea in there you can
see the status is passed or not
Another way to run the automation
• You can run your automation via maven , to open maven panel click on view ->
Tool Window -> Maven , and 2x click on Clean and then 2x click on verify
 Open Report

• If you run your automation via Maven ,

there will be report created. You can open
report inside Folder target -> site ->
serenity -> index.html and you can open
it via chrome or your favourite browser

Your Intellij Idea

Your Browser
Waiting Until element Appear
• After you click on button Start practicing , there are some delay that make the next button
is not available for some time , like this video , so we need to wait until element is avaiable

Play Video
If you want to see Demo
Waiting Until element appear
• To wait for button we use this function
yourWebElement.waitUntilVisible();
• Default time out for waiting is 2 seconds but you can set the timeout using this
function

• There are some other ways to wait some element , you can learn in this Page (
Section 8.5 Working with timeout)
http://thucydides.info/docs/serenity-staging/#_working_with_timeouts
 Searching List Element
• After clicking Start Practicing , it will show list of menu ,

Inside container
has different
Main Container menu it’s mean
has different
xpath

We want to make menu as flexible as we can , so we create one function that can click on the all menu based on parameter
Creating function to click menu
• Before clicking menu we will make sure the menu is already show in the ui
• In the HomePage.java please write this code

We will fill this function for waiting

container and clicking menu
Searching xpath for menu container
• Same with previous method , we will analyse the xpath
Searching xpath for menu
• After Container the menu is located Under tag <a>

So After we found menu

we will search ./a for get
Menu the list of menu
Let’s Code
• In the file HomePage.java go to menu clickMenu(String menu) and add this code

Filter Menu Based on parameter

How does it works ?
• Automation will scan all menu inside
How does it works ?
• And then using filter , it will search for the menu using stream java 8 , you can
learn more about stream in this link
For example you want to click Menu “Simple Form Demo”

Find First if
founded

Get Object and do action

Filter Condition
Play Me

CHANGING
PAGE
Congratulation , your
automation now entering
new page
Create New Page Class
• Every you find new page on
your automation , you
should create new page
class inside package
“pages”. In package pages
right click on that folder and
click on new -> class . Add
name FormPage and don’t
forget to extend
pageObject and add
annotation @Component
 Registering element into page object
class
• Same with previous , let’s register the component that needed in this automation
project.

https://www.seleniumeasy.com/test/basic-first-form-demo.html FormPage.java
Add function to type Input text
• For typing Object , you can use this function youBeautifulElement.type(“Your Type”)

The result for that function if it’s called from steps will be similar with Video
Add function to click Show Message and
get Text
• After typing Message , next scenario is click on buton “Show Message” and we
need to get the Text that appear in “Your Message” after it’s clicked

We need This

• Try to test it manually until message hello world is appear ( play video for detail)
because we need to get message after click btn “Show Message”
Register button and text
• Add function to click Button and get Text into FormPage.java

FormPage.java
 Getting text
• As our standard , All selenium Code ( click , getText , Action dll) should placed in
the Page class , it’s not allowed to access that kind of method outside class page ,
because we want to isolate it if there are changes in selenium , so it will not
impacted to other package and the changes can be minimized.
• For getting text , we use YourElement.getText() , it will get the text from element
that you have registered.

Will Return Hello

World from this UI

FormPage.java
Getting text from Title “Simple Form
Demo”
• In order to wait form loaded , we need to wait a element and make sure the page
that loaded is the form that we need , in this scenario ,we are using title “Single
Input Field”
Same with previously , we will using method
.getText() for getting the title and do some
assertions in the steps
 Registering Form Title
• We are using this xpath for getting the form title

(//div[@class="panel-heading"])[2]

FormPage.java
Preparing API
• There are steps to writing Api testing ,
1. Define default endpoint data for the API using properties file.
2. Define default header and parameters using properties file.
3. Define default header and parameters using interceptors.
4. Convert the response data into object using rest-web model that developer already
created.
5. Save the data using model classes for future use during runtime.
6. Preparing the request body using Java Object Model or using Template.
 Getting title text
• And then we add function to getting the text

It Will return

FormPage.java
Wait until Visible
Getting Text

• Time out for waiting until visible is 2 seconds , and it can be configurable. After 2 seconds
if it’s not visible will be throw error
 CODE FOR
FORMPAGE.JAVA
Assertions
In our framework we use Hamcrest as our standard assertions in order to make
sure the expected condition is same , for example in the steps {Then user should
able to see “……….”}

SeleniumEasySteps.java
 Why Assertions
• Assertions is used for make sure the data or the value that get from API / UI is
expected as we want , for example

In order to make sure the page is expected, we

need to getting this element and do some
assertions. So , we wil getting this text , and return
to steps , and do the assertions in tere
In this case , the steps will be marked as passed if
there are title “Single Input Field” in the Form title.
So How We do that ?

https://www.seleniumeasy.com/test/basic-first-form-demo.html
Hamcrest
• Hamcrest is an alternative assertions library that make us to make sure the data is
expected as we want ,
• Hamcrest has so many function, and we use Hamcrest as our standard assertions
tools.
• To learn more about hamcrest , you can visit http://hamcrest.org/JavaHamcrest/
• In this tutorial we will use basic function from hamcrest.
Put FormPage.Java into
SeleniumEasySteps.java
• In order to changing page , you should put the FormPage.java class into
SelenumEasySteps.java so the function from page can be called in there and can
be mapped. Play video for more detail
Do Assertions
• Back to your project and open your SeleniumEasySteps.java

Make sure the import from assertThat is

import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.Matchers.equalToIgnoringWhiteSpace;

Play video to see demo code

Explanation

Reason , when it’s failed

It will appear on report

Mathcers, there are some function to

check the expected Conditions , you
can check in this link
Actual condition , in this case , we will get from this one

Has Result
Single Input
Field
FormPage.java

https://www.seleniumeasy.com/test/basic-first-form-demo.html
 CODE FOR
SELENIUMSTEPS.JAVA
RUN THE AUTOMATION TEST
Mapping the other steps
• Please continue the mapping for other steps on file SeleniumEasySteps.java
 Check the automation
After you complete your code , all automation steps should be green ( all is passed )
, please play video if you want to view demonstration
Run with Maven

• You can run your automation with Maven

as well , please follow this slide to run
with maven and you can open your report
in target/site/serenity/index.html
 TUTORIAL FOR USING REST
ASSURED IN BADAK-CUCUMBER
ARCHETYPE
API Testing
Introduce Blibli’s API
Testing
• In order to make api testing
more easier , there are UI
that make your API testing
more easy. It’s called
swagger.
• It’s example swagger
Trying out swagger

Please open http://172.18.69.70:8081/swagger-

ui.html#/mahasiswa-controller

It’s a dummy Api Testing , in the real condition , the swagger

will be like that , but have more API
 Port Server ( Not always there)

Server , it might be different

( can be xprodct-uata.gdn-app.com )

It’s Called Controller

Inside Controller , there are method or endpoint,

Each service might has different total of Method
If you are notice ,there are Square with Blue , Green , Oranhe or
red in there , it’s called HTTP Method. You can learn more about
HTTP Method in this link https://developer.mozilla.org/en-
US/docs/Web/HTTP/Methods
Get: Usually for getting Data
Post : Usually for Add Data
Put : Usually for updating data
Delete : Usually for deleting data
But it’s depend on your case , other system might has
different usage for HTTP Method,

In some case there are symbol mustache {} after endpoint

It’s indicated that Endpoint is need some variable that put in
the url , so for example [GET] /api/mahasiswa/{idMahasiswa}
( for getting detail mahasiswa by idMahasiswa)
You can get it by
[GET] /api/mahasiswa/1
[GET] /api/mahasiswa/2
Etc……
 If you click on one end point , it will have more detail
option that you can use for API testing

Parameters

There are section called parameter , In this section , you

can put the parameter that needed by API , including
query param , Request body etc it’s called HTTP
Messages that sent to server, to learn more about
HTTP Messages , you can open this page
https://developer.mozilla.org/en-
US/docs/Web/HTTP/Messages

Response In the next sections , there are called Responses , this

section contains the message that receive by swagger
from Server, you can view Response Code , Response
Body , Response Header , etc
LET’S START TO CODE
Our scenario today
• We will create simple CRUD based on that API ,
Given user set mahasiswa name "Argo"
Given user set mahasiswa majors "Informatic technology"
Given user set mahasiswa nim "12345"
When user add Mahasiswa
Then error should be "false"
Then code should be "200"
Then mahasiswa name should be "Argo"
Then mahasiswa majors should be "Informatic technology"
Given user set id mahasiswa from add mahasiswa
When user get mahasiswa by id
Then error should be "false"
Then code should be "200"
Then mahasiswa name should be "Argo"
Then mahasiswa majors should be "Informatic technology"

{ {
"id": 0,
"mahasiswaName": "string",
"majors": "string",
"nim": "string"
} }
Trying Swagger
• Before we call api for post add
mahasiswa , we will create JSON request
body that define in the Request,
• If you open detail of [POST]
/api/mahasiswa it has parameter with
type body
• You can copy that body and put your
name in there
• Click on and put the
modified json into there
"id": 0,
"mahasiswaName": “Argo",
"majors": “Informatics Engineering",
"nim": “7411040040"
Hitting the API

• Put response body into field and click on

Execute
• It will do some API request to server , And
you will receive the response from server
 Getting Response
from Server
• After pressing Execute , you will get
some information in Server Response , it
will contain Response body , response
header and Code

Response Code Response Body that getting from

server

Response Header that getting

from server

You can use that response for assertions , and make sure the API is getting right.
We will make sure the data is same with the data that we post for controller add.
Demo API

You can learn how to use swagger by playing that video.

Writing feature file
• Create new File under package features
Writing feature steps

• Please write the scenario same with this

slide
Mapping Steps into
java
• Create new File under steps with name
MahasiswaSteps , and add mapping for feature
files in there
• In some of steps , you will find some variable
under that steps.
• Text that marked as Variable by cucumber will be
marked as yellow , cucumber use Regex to catch
some variable if you have define it from feature
file
Make sure, the data that marked as variable became blue
 WRITING API TEST
https://confluence.gdn-
app.com/display/QKBS/Tutorial+for+using+rest+assured+in+badak-
cucumber+archetype
 Define default
endpoint data for the
API using properties file
• There are some properties that you can
use for setting endpoint for API

This URL could be different in each

environment so we need to define it in
each properties
Detailed properties
• If you open one of that properties , it will looks like this

At least that 3 properties

before going to code API
automation
 Writing properties
In this example , we will use application-UATA.properties ( in the reality this
properties is used for hit the endpoint that located in QA 1 or UAT A environment)

URL for API End Point

application-UATA.properties Port API End Point

Because All end point have same prefix ( /api/mahasiswa) sowe put this
in the basePath
MAHASISWA
PROPERTIES
This is full file of
application.properties
Writing interceptors
• Interceptors is a helper that help qa to
write code faster and reduce more
redundancy on API testing
• For example , some of our endpoint have
query param 1001 and it should be
available in all request , so instead of
writing 1001 in all controller , you just write
once in interceptors.
Writing interceptors
• Create new class under api/interceptor’s package , and add implementation
ServiceInterceptor
 Implement interceptors method

There are 2 Method that sould be implemented during creation , you can implement it by pressing alt enter or
right click and click on show context action and click implement method ( please play video for detail)
 Writing interceptors
When you implement Service interceptor’s method , there will be 2 method that created. One is isSupport , and the
other is prepare.

Defining is this interceptors class will be used or not

Defining , method implementation , this function will

be called before controller. Usually to set the data ,
default query param , or another code that might be
duplicate in each controller
 Writing interceptors
We will use “mahasiswa” as a service name, so in
ther properties after
service.client.<servicename> so make sure
between properties and interceptors , otherwise
it will be null pointer exceptions, so it will able to
run with that properties and interceptors

MahasiswaInterceptor.java application-UATA.properties
 Writing interceptors Because in our API controller swagger there are
no base query param ( 1001 , web etc) so we just
define response content type same as swagger

MahasiswaInterceptor.java
http://172.18.69.207:8083/swagger-ui.html#/mahasiswa-
controller/getMahasiswaUsingGET
Complete code for interceptors
package com.gdn.qa.module.ui.training.api.interceptors;

import com.gdn.qa.automation.core.restassured.ServiceInterceptor;
import io.restassured.specification.RequestSpecification;

/**
* User: argo.triwidodo
* Date: 05-Dec-19
* Time: 17:18
*/
public class MahasiswaInterceptor
implements ServiceInterceptor {
@Override
public boolean isSupport(String serviceName) {
return serviceName.equalsIgnoreCase("mahasiswa");
}

@Override
public void prepare(RequestSpecification requestSpecification) {
requestSpecification.accept("*/*");
}
}
 Implementation
for API

Package Interceptors is for preparing data

Next , We will add controller to call the API

Tips :
Usually QA writes one
controller in one Java Class,
 Writting Scenario
Preparing Data
• In our Scenario there are 2
API call activity ,
Both of this steps is • First is creating mahasiswa
using API testing data
• And second is getting
mahasiswa By ID
• Before we hit Api for add ,
we will set the data using
“Given” Keyword
• The data is including Name ,
Majors , and NIM same with
Request body that we got
from controller swagger
Writting Controller
• Create new class in controller package with name MahasiswaController , Extend it
with ServiceAPI , and add one Method For add mahasiswa

Make sure your Classname

is end with xxxxController ,
It will make other QA easy
to understand
 Preparing Data
In this trial we will use harcoded body , and create variable on that method with
name body

{ {
"id": 0, "id": 0,
"mahasiswaName": "string", "mahasiswaName": “Argo",
"majors": "string", "majors": “Informatika",
"nim": "string" "nim": “123456"
} }
 Writing Controller

Intellij has capability to automatically reformat string that you have copied , please play video for more details
 Calling Service
• For calling Service , you just need to call service(String serviceName) from
ServiceApi that has been extended previously.

Make sure , the servicename between interceptors and

properties is same
Add Body Request for service
• Because we have prepare json Body in
the previous steps , we can put body in
the service before hit the api
• Request body can support string ,
hashmap or Object. In this tutorial it’s
using String and for object will explain
later
• For method POST (etc) it’s depend on
Swagger , for add it’s using POST , so
in API Call we use post method.
Add Spring Functionality
• Don’t forget to add @Component in the controller , so we can use Spring
functionality
Calling Mahasiswa Controller and add to
step
• Open MahasiswaSteps.java , and add annotation
@CucumberStepsDefinition
• Call mahasiswa Controller using @AutoWired
• Search for steps “user add Mahasiswa” and call that
function
Removing Throwable
• When you open steps , sometimes there will be code like this

• It’s indicated that your steps is not finished yet , and need to be coded later , in this tutorial
we will remove all throw new PendingExceptions() , so when we run our test , it will not
marked as pending
Please do it on all method inside MahasiswaSteps Class
Run IT!

• Please call that method in the steps

When user add Mahasiswa
• Add Tag @MahasiswaFeature under file
Mahasiswa.feature
• Try to run it by change tags in cucumber
Runner
• Try it using maven clean verify , so we can
generate the report as well.
API Reporting
Do Assertions On Request
• Assertions should placed in “Then” Steps , so in order to do that , we will change
return value from function AddMahasiswa from void to ResponseApi
• Create one Local Variable so we get the object response from post api

MahasiswaController.java
(Optional) Print Body Response
• You can Print your Response Body , so in console you can see response from
Server , but this steps is optional for real condition
Convert JSON Response To Java Model
• Instead of using Json , we will use Java Model . So we will accessing Java model
instead of directly to Json
• Open swagger again and Copy the response from addMahasiswa’s end point.
 Converting Response
Using Json to Pojo
• Right Click on package models ->
response -> New -> Generate Pojo’s From
Json
• Click generate and you will get the java
class

*Prerequisete Please install Json to Pojo With Lombok in here

Converting Response To Response API
• Add Autowired JsonApi from Badak Core

• And Call jsonAPI to convert response to model using function .fromJson()

Change Return Value
• Change return value from Void To ResponseApi<MahasiswaResponse>
Add data for save the response
• In order to save the response , we need to save the data that will be used in other
steps. To save the data , we will used class under package Data.
• Create new class under package data with name MahasiswaData add annotation
@Data and add @Component(Package + Class name)
Create data class [WIP]
• https://confluence.gdn-
app.com/display/QKBS/Tutorial+for+using+rest+assured+in+badak-
cucumber+archetype