BAB 3 PELAKSANAAN KERJA MAGANG

(1)

7

BAB 3

PELAKSANAAN KERJA MAGANG

3.1 Kedudukan dan Koordinasi

Dalam pelaksanaan Praktek Kerja Magang (PKM) di Paola.id, penulis

memegang jabatan sebagai Quality Assurance Engineer Intern yang berada di

dalam divisi IT Development bersama dengan tim front-end engineer dan tim

back-end engineer. Tim IT Development dipimpin oleh seorang Chief Technology

Officer (CTO) yaitu Bapak Bayu Kresno Prasetyo. Dalam workflow dari tim IT

Development, Bapak Bayu berperan dalam memimpin sprint meeting, memberikan

pendapat, memberikan bimbingan dan panduan, serta menjadi orang terakhir yang

mengecek kesiapan kode sebelum di-deploy ke branch master. Dalam

melaksanakan PKM di Paola.id, tim dari penulis bekerja sama dengan kedua tim

lain yaitu tim front-end engineer dan tim back-end engineer dimana tim quality

assurance engineer akan melakukan perancangan automated test berdasarkan apa

yang telah tim front-end engineer dan tim back-end engineer lakukan pada sprint

sebelumnya. Selain itu, penulis juga melakukan manual testing terhadap apa yang

telah tim front-end engineer dan tim back-end engineer kerjakan sebelum merge

dilakukan.

3.2 Tugas yang Dilakukan

Tanggung jawab yang diberikan pada penulis selama 40 hari terhitung dari

hari pertama pelaksanaan PKM di PT. Paola.id dapat dilihat pada Tabel 3.1.

(2)

8 Tabel 3.1 Tugas yang dilakukan selama PKM

Minggu

Ke -

Progress

1 a. Perkenalan lingkungan kerja Paola.id

b. Instalasi linux dan framework cypress

c. Menyusun test case yang menjadi pedoman automated test

2 a. Membuat skrip automated test untuk footer dari situs

https://paola.id/

b. Melakukan smoke testing dan bug report untuk fitur yang

telah dideploy pada sprint yang baru saja selesai

3 a. Melakukan sprint planning untuk membahas apa yang akan

dikerjakan selama 2 minggu kedepan

b. Menyusun test case yang akan dijadikan pedoman dari

automated test

c. Membuat skrip automated test untuk truncate weight

4 a. Melakukan smoke testing dan bug report untuk fitur yang

telah dideploy pada sprint yang baru saja selesai

b. Membuat skrip automated test untuk pengecekan multi origin

product

c. Presentasi fitur baru yang telah di-deploy pada sprint yang

baru saja selesai

5 a. Melakukan sprint planning untuk membahas apa yang akan

dikerjakan selama 2 minggu kedepan

b. Menyusun test case yang akan dijadikan pedoman dari

automated test

c. Membuat skrip automated test untuk general error page

6 a. Melakukan smoke testing dan bug report untuk fitur yang

(3)

9 b. Menyusun test case yang menjadi pedoman automated test

7 a. Melakukan sprint planning untuk membahas apa yang akan

dikerjakan selama 2 minggu kedepan

b. Menyusun test case yang menjadi pedoman automated test

8 a. Melakukan smoke testing dan bug report untuk fitur yang

telah dideploy pada sprint yang baru saja selesai

b. Presentasi fitur baru yang telah di-deploy pada sprint yang

baru saja selesai

c. Membuat skrip automated test untuk product gallery image

check

3.3 Uraian Pelaksanaan

3.3.1 Proses Pelaksanaan

Dalam perancangan sistem automated test

,

diperlukan beberapa perangkat

lunak dan perangkat keras. Berikut adalah perangkat lunak yang digunakan dalam

proses penyusunan sistem automated test

:

1. Oracle Virtual Machine Virtualbox

2. Webstorm

3. Google sheets

4. Google chrome

5. Cypress

6. Slack

7. Trello

(4)

10 Adapun perangkat keras yang digunakan yaitu laptop dengan spesifikasi

sebagai berikut:

1. Processor: Intel core i7-7700k

2. RAM: 8GB

3. Sistem Operasi Laptop: Windows 10 home edition

4. Sistem Operasi Virtual Machine: Ubuntu 20.04

5. Sistem penyimpanan laptop: 256 GB SSD + 1 TB HDD

6. Kartu Grafis: NVIDIA GTX 1050 2 GB

3.3.2 Framework yang digunakan

Selama minggu pertama magang, belum ada tugas yang diberikan kepada

penulis. Dalam minggu tersebut, penulis lebih diutamakan untuk beradaptasi,

instalasi dan pengenalan framework dan bahasa pemrograman yang digunakan di

paola.id. Framework yang digunakan untuk automated testing di paola.id adalah

Cypress yang didasari dari bahasa pemrograman Javascript.

Cypress adalah sebuah framework yang digunakan untuk End to End (E2E)

testing atau testing yang dilakukan untuk memvalidasi kinerja situs atau aplikasi

dari sudut pandang seorang user. Framework ini dinilai lebih unggul dibanding

framework automated testing lainnya karena dapat digunakan di semua framework

front-end dan pada situs manapun. Semua arsitektur dari Cypress disusun dari

Javascript sehingga dapat menjalankan bermacam-macam framework Javascript

modern dengan sangat baik.

(5)

11 Cypress sendiri merupakan aplikasi open-source yang dirilis pada tahun

2014 dan didasari oleh bahasa pemrograman Javascript. Dan karena program ini

didasari oleh Javascript, maka dalam pengeksekusian framework ini juga hanya

dapat menggunakan Javascript. Cypress disini beroperasi didalam aplikasi atau

situs yang kita test, sehingga memiliki akses terhadap setiap objek didalamnya baik

window, dokumen, DOM element, function, bahkan waktu dapat diakses didalam

Cypress.

Semua proses automated test di paola.id harus berjalan sesuai dengan test

case yang telah disusun sebelumnya. Apabila terjadi hal-hal diluar dari test case,

maka proses testing dianggap gagal dan wajib dilakukan code fixing. Setelah kode

dari situs telah selesai diperbaiki, maka proses testing dapat dilanjutkan kembali

dan dikatakan berhasil apabila telah menjalankan setiap proses yang telah disusun

pada test case.

3.3.3 Perancangan Sistem

A. Flowchart

Berikut ini adalah flowchart diagram yang menunjukkan alur dari setiap

modul yang telah dibuat

A.1 Flowchart Footer

Footer merupakan bagian paling bawah dari sebuah situs. Footer yang

berada pada situs paola.id digunakan untuk menyimpan beberapa tautan

tambahan, media sosial paola.id, serta beberapa widget yang dapat digunakan

(6)

12 dalam mengakses situs paola.id. Berikut ini adalah flowchart dari automated

test footer pada situs paola.id

(7)

13 Gambar 3.2 Flowchart footer with external link

(8)

14 Gambar 3.3 Flowchart footer for widget

(9)

15 A.2 Flowchart Truncate Weight

Truncate weight merupakan fitur yang dikembangkan pada situs paola.id

untuk menyingkat penulisan dari satuan berat yang ditampilkan pada situs

paola.id. Berikut adalah flowchart yang telah dibuat untuk menggambarkan

fungsi ini

(10)

16 A.3 Flowchart Multi Origin

Paola.id sebagai sebuah situs yang bergerak di bidang e-commerce tentunya

harus memperhatikan pengiriman barang dari berbagai lokasi. Pengiriman dari

lokasi yang berbeda tentunya akan memiliki resi pengiriman yang berbeda.

Flowchart ini akan menggambarkan proses checkout barang.

(11)

17 A.4 Flowchart General Error Page

Dalam situs paola.id, terdapat 2 tipe error yang memiliki tampilan tersendiri

yaitu page untuk error 404 dan error 500. Berikut adalah flowchart dari

automated test untuk melihat halaman error dari website paola.id.

(12)

18 Gambar 3.7 Flowchart error 500 page

A.5 Flowchart Product Image Check

Setiap produk pada situs paola.id tentunya memiliki gambar dari produk

tersebut untuk keterangan tambahan kepada pembeli mengenai produk tersebut.

Gambar yang ditampilkan tentunya harus sesuai dengan apa yang telah

di-assign sebelumnya agar tidak menciptakan kekeliruan. Berikut adalah flowchart

dari automated test pengecekan gambar produk.

(13)

19 Gambar 3.8 Flowchart product image check

(14)

20 B. Test Case

Berikut ini adalah test case yang menjadi pedoman dari pembuatan

automated test. Test case dibuat 2 minggu sebelum penyusunan skrip automated

(15)

21 B.1 Test Case Footer

Tabel 3.2 Test case footer

I D Module Test Scenar io _CaseTest Pre Conditio

n Steps Test Data Expected Result Actual Result

Test Res ult Foot er

About

Paola.i

d

About

Paola.id

on

footer

Click text

"About

Paola.id"

- User

acces:

https://pa

ola.id

1. Click

"About

Paola.id"

on

footer

Redirect to About Paola.id

As expected PAS

S - Language: English Contac t Us Contact Us on footer Click text "Contact Us"

- User

acces:

https://pa

ola.id

1. Click "Contact Us" on

footer Redirect to Contact Us _{As expected} PAS

S - Language: English

(16)

22

_Blog Blog on footer Click text "Blog"

- User

acces:

https://pa

ola.id

1. Click "Blog"

on footer Redirect to Blog _{As expected} PAS

S - Language: English _FAQ FAQ on footer Click text "FAQ"

- User

acces:

https://pa

ola.id

1. Click "FAQ"

on footer Redirect to FAQ _{As expected} PAS

S - Language: English How to Purcha se How to Purcha se on footer Click text "How to Purchas e"

- User

acces:

https://pa

ola.id

1. Click "How to Purchas e" on

footer Redirect to How to Purchase As expected PAS

S - Language: English

(17)

23

Payme nt Method s Payme nt Method s on footer Click text "Paymen t Methods "

- User

acces:

https://pa

ola.id

1. Click "Paymen t Methods " on

footer Redirect to Payment Methods As expected PAS_S

- Language: English Return Policy Return Policy on footer Click text "Return Policy"

- User

acces:

https://pa

ola.id

1. Click "Return Policy"

on footer Redirect to Return Policy

As Expected PAS S - Language: English Privacy Policy Privacy Policy on footer Click text "Privacy Policy"

- User

acces:

https://pa

ola.id

1. Click "Privacy Policy"

on footer Redirect to Privacy Policy _{As expected} PAS S

-

Language:

(18)

24

Terms and Conditi on Terms and Conditi on on footer Click text "Terms and Conditio n"

- User

acces:

https://pa

ola.id

1. Click "Terms and Conditio n" on footer

Redirect to Terms and

Condition As expected PAS S - Language: English Newsle tter Newslet ter on footer Typing email in newslett er

- User

acces:

https://pa

ola.id

1. Type valid email in input box newslett er 1. Valid Email: "robert.dw4@mailina tor.com"

User can typing email in newsletter input box

Not As Expected FAIL - Language: English - User cannot typing continously

(19)

25

- It only can type word one by one Newsle tter Newslet ter on footer Click "Subscri be" in newslett er

- User

acces:

https://pa

ola.id

1. Type valid email in input box newslett er 1. Valid Email: "robert.dw4@mailina tor.com" 1. Green pop up

"Congratulation! Your email have been subscribed in Paola.id news letter" (English)/ Selamat! Email Anda telah terdaftar di newsletter Paola.id" (Indo)

Not As

(20)

26

- Language: English 2. Click "Subscri be" - User cannot subscribe - Yellow pop up show message "Hi abc@mailinato r.com, Kami sedang mengalami gangguan. Silahkan coba lagi" Instagr am icon Instagr am icon on footer Click Instagra m icon at Follow Us

- User

acces:

https://pa

ola.id

1. Click Instagra m icon at Follow Us on footer

Redirect to

instagram.com/paola.id

As expected PAS S

(21)

27

- Language: English Linkedi n icon Linkedi n icon on footer Click Linkedin icon at Follow Us

- User

acces:

https://pa

ola.id

1. Click Linkedin icon at Follow Us on footer

Redirect to

https://www.linkedin.com/c

ompany/pt-pentasada-andalan-kelola/

As expected PAS S - Language: English

(22)

28

Switch Langua ge Switch languag e to Indones ian on footer Click "Indones ian" Button for switch languag e

- User

acces:

https://pa

ola.id

1. Click "Indones ian" Button on footer Switch language to Indonesian As expected PAS S - Language: English Switch languag e to English on footer Click "Inggris" Button for switch languag e

- User

acces:

https://pa

ola.id

1. Click "Inggris" Button

on footer Switch language to English As expected PAS S - Language: Indonesian Back to Top Back to Top Button on footer Click Back to Top Button on footer

- User

acces:

https://pa

ola.id

1. Click Back to Top Button on footer

Directly go to the top of the website

Not As

(23)

29

- Language: English - Button doesn't work - paola.i_{d icon} go to main page

Click

Paola.id

logo on

footer

- User

acces:

https://pa

ola.id

1. Click

Paola.id

logo

Go to the main page of the

website As expected PAS

S

-

Language:

(24)

30 B.2 Test Case Truncate Weight

Tabel 3.2 Test case truncate wreight

ID Module

Test

Scenario Test

Case Pre Condition Steps Data Test Expected Result Actual Result Result Test

Weight Back Office and Front Office Website Truncate Weight [positive] Check truncate weight

- User access:

https://paola-

back-office-dev.now.sh

1. Login with email: "admin-1@paola.id", password: "secret", click "Sign In" Button

1. Weight = 1000 gram 1. Shipping Weight shows 1 KG AS EXPECTED PASS 2. Go to "Produk" item on Produk header

(25)

31

4. Input Product Name:

"Baut"

5. Input Regular Price(Rp):

"20000"

6. Click "Shipping" Button, and then input

Berat(gram): "1000"

7. Make sure to choose "Publish" at Publish section to test it on dev website, and then click "Save"

(26)

32 8. Go to:

https://next-paola.paolaid.now.sh/

9. Input Search: "Baut",

and then click the product

10. Check the shipping

weight

(27)

33

[positive] Check truncate weight

- User access:

https://paola-

back-office-dev.now.sh

1. Login with email: "admin-1@paola.id", password: "secret", click "Sign In" Button

1. Weight = 2345 gram 1. Shipping Weight shows 2,3 KG AS EXPECTED PASS 2. Go to "Produk" item on Produk header

3. Click "+Add Product"

4. Input Product Name:

"Baut 2"

5. Input Regular Price(Rp):

(28)

34

6. Click "Shipping" Button, and then input

Berat(gram): "2345"

7. Make sure to choose "Publish" at Publish section to test it on dev website, and then click "Save"

Button

8. Go to:

(29)

35

9. Input Search: "Baut 2",

and then click the product

10. Check the shipping

(30)

36 B.3 Test Case Multi Origin

Tabel 3.4 Test case Multi Origin

ID Module

Test Scenar

io _CaseTest _{Pre Condition} _Steps

Test Dat

a Expected Result Actual Result Result Test

Origin Front Office Website Multiple Origins Product [positive ] Select more than one product from multiple origins

- User access:

https://next-paola.paolaid.now

.sh

1. Click text "Login" on header. Input email:

"abc123@gmail.com ", password:

"1234567890", Click "Sign In" Button

1. Input Valid 1. The system should automaticall y calculate the shipping cost based on each origin to the selected destination AS EXPECTED PASS - Language: English

2. Click any product

-> Click "Add to Cart"

3. Click Paola logo on header to go

(31)

37

3. Click any product again -> Click "Add

to Cart"

4. Click text "Cart" on

header

5. Click "Continue" Button and then click "Select" Button on Shipping Address

menu

6. Select Shipping: "JNE" and Shipping

(32)

38

7. Make sure the calculation is the combination

between two Origin

[positive ] See tracking details for each origins

- User access:

https://next-paola.paolaid.now

.sh

1. Click text "Login" on header. Input email:

"abc123@gmail.com ", password:

"1234567890", Click "Sign In" Button

1. User can see tracking details from each origin PASS - Language: English 2. Go to username on header, click "My

Orders"

3. Click section with

(33)

39

4. Make sure there are different

information tracking details for each

(34)

40 B.4 Test Case General Error

Tabel 3.3 Test case general error

I

D Module

Test Scen

ario _CaseTest

Pre Cond

ition Steps Test Data Expected Result Actual Result Result Test

General Error Front Office Website Error 404 Go to unkno wn page to see 404 page

- User

access

:

next-paola.

paolai

d.now

.sh

1. Visit invalid url

1. Invalid

URL:https://n

ext-paola.paolaid

.now.sh/asdf

ghjkl

1. The page should landing on UI

"Error 404"

As

(35)

41

2. The page should not be found

2. When Button "Kembali ke Beranda" is clicked, it should redirect to home page

3. Click Button "Kembali ke Beranda"

Error 500 Go to unkno wn page to see 500 error page

- User

access

:

https:

//next

-paola.

paolai

d.now

.sh/

1. Visit error 500 url

1. URL:

https://next-paola.paolaid

.now.sh/_err

or?s=500

1. The page should landing on UI

"Error 500" (see zeplin

https://app.zeplin.io/project/5aae

576f835432ff55901f2d/screen/5b

ef891096cd6f1246c40f60)

As

(36)

42

2. The page should not be found

2. When Button "Kembali ke Beranda" is clicked, it should redirect to home page

3. Click Button "Kembali ke

(37)

43 B.5 Test Case Product Image Check

Tabel 3.4 Test case image check

ID Module

Test

Scenario Test

Case Pre Condition Steps

Test Data Expected Result Actual Result Test Result

_Product Thumbnail Back Office Website Add image thumbnail Add image thumbnail when add product

- User access:

https://paola-back-office-dev.now.sh/

1. Input email: admin-1@paola.id 1. Input Valid 1. Show message "Berhasil membuat produk" _As Expected PASS

2. Input Password: secret 2. Image Valid 2. Product uploaded at back office website with image thumbnail

(38)

44

3. Go to item "Produk" on "Produk" header

5. Input Product Name: "Baut"

6. Input Regular Price(Rp): "20000"

7. Click "Shipping" item

8. Input Berat (gram): "500"

(39)

45

9. Click menu dropdown "Thumbnail Produk"

10. Click "Choose File" Button

11. Select image and clik

"Open"

12. Make sure to choose "Draft" at Publish section to test it on dev website

13. Click "Save" Button

(40)

46

Add image thumbnail when add product

- User access:

https://paola-back-office-dev.now.sh/

1. Input email: admin-1@paola.id 1. Input valid 1. Show message "Berhasil membuat produk" As Expected PASS

2. Input Password: secret 2. Image Valid 2. Product uploaded at back office website without image thumbnail

3. Click item "Produk" on "Produk" header

(41)

47

5. Input Product Name: "Baut 2"

6. Input Regular Price(Rp): "20000"

9. Select image

(42)

48

12. Input Berat (gram): "500"

11. Click "Save" Button again

Front Office Website Check Image Thumbnail Check Image Thumbnail in Cart at Front Office

- User access:

https://next-paola.paolaid.now.sh/

1. Input email: nanda@paola.id Show image thumbnail as same as the product list As Expected PASS

(43)

49

2. Input Password: 12345

4. Click "Add to Cart" Button

5. Click Cart icon on header

Check Image Thumbnail in Order Detail at Front Office

- User access:

https://next-paola.paolaid.now.sh/

1. Input email: nanda@paola.id 1. Input Valid 1. Image Thumbnail in product list is the same as Order Detail As Expected PASS

2. Input Password: 12345

(44)

50

4. Click "Add to Cart" Button

5. Click Cart icon on header

6. Click "Continue" Button

7. Click "Add Address"

8. Fill out all

input box

10. Click "Select" Button

11. Click dropdown Shipping Service and select

(45)

51

12. Click dropdown Shipping method and select

13. Click "Continue" Button

14. Click "Bank Transfer via BCA", then Click "Continue" Button

15. Click "Complete Payment" Button

(46)

52

Edit Image Thumbnail Edit image thumbnail in Product

- User access:

https://paola-back-office-dev.now.sh/

1. Input email: admin-1@paola.id 1. Input Valid 1. Show message "Berhasil memperbarui produk" As Expected PASS

2. Input Password: secret 2. Image Valid 2. Image thumbnail product changes and uploaded at back office website

3. Go to item "Produk" on "Produk" header 3. Image thumbnail product changes and uploaded at back office website

(47)

53

4. Input Search Product: "Baut"

5. Click Edit icon on Action

8. Select image and click "Open"

(48)

54

(49)

55 3.3.4 Implementasi

Ketika proses pengujian dijalankan dengan skrip, maka di akhir pengujian

akan ditampilkan status dari hasil pengujian yang telah dilakukan. Hasil tersebut

akan disimpan dalam sebuah file html. Apabila test pada suatu modul berhasil,

maka akan ada indicator berbentuk centang berwarna hijau, sedangkan tanda silang

berwarna merah akan dimunculkan apabila test pada modul tersebut gagal. Selain

indikator, juga terdapat penanda waktu yang ditempuh selama automated test

berjalan pada modul tersebut

1. Hasil pengujian footer paola.id

Pengujian pada fitur ini berjalan tanpa adanya error

(50)

56 2. Hasil pengujian fitur truncate weight

Dalam pengujian fitur truncate weight terdapat 2 error dimana error

pertama diakibatkan adanya pergantian API dan error kedua terjadi karena

performa perangkat yang menurun sehingga tidak dapat membaca toast

yang sedang muncul.

Gambar 3.10 log report fitur truncate weight

3. Hasil pengujian fitur multi origin

Error dalam automated test ini dikarenakan adanya pergantian data test

id

(51)

57 4. Hasil pengujian general error page

Testing ini berjalan tanpa adanya kendala

Gambar 3.12 log report fitur multi origin

5. Hasil pengujian product image check

Error pada testing ini dikarenakan adanya pergantian data test id.

Gambar 3.13 log report fitur product image check

3.3.5 Kendala yang Dihadapi

Pengembangan automated test pada website paola.id tidaklah sulit. Test

case yang dibuat langsung oleh team Quality Assurance cukup memudahkan

penyusunan skrip automated test. Secara keseluruhan kendala yang ditemui selama

pengerjaan adalah kurangnya komunikasi dari tim developer ketika adanya

perubahan komponen seperti API dan data test id.

(52)