Modul: End-to-End (E2E) Testing dengan

Pytest dan Selenium

End-to-end testing (E2E testing) adalah metode pengujian perangkat lunak yang
berfokus pada mensimulasikan alur kerja pengguna secara keseluruhan, dari awal
hingga akhir, untuk memastikan pengalaman pengguna yang lancar dan bebas
gangguan.

Dengan kata lain, E2E testing bertujuan untuk melihat bagaimana berbagai komponen
sistem bekerja sama untuk mendukung tindakan yang dilakukan pengguna. Secara garis
besar, pengujian dilakukan dengan:

 Memulai dari perspektif pengguna akhir: E2E testing dirancang untuk

menguji sistem seolah-olah pengguna nyata yang berinteraksi dengannya.
 Menyematkan alur kerja pengguna yang lengkap: Pengujian ini mencakup
semua langkah yang diperlukan pengguna untuk menyelesaikan tugas tertentu,
dari login hingga mencapai tujuan akhir.
 Mempertimbangkan interaksi dengan sistem eksternal: Jika aplikasi
berinteraksi dengan sistem lain (misalnya, database eksternal atau third-party
system).

Pada modul ini, pengujian ditargetkan pada sebuah aplikasi web. Dengan melakukan
E2E testing, kita dapat mensimulasikan interaksi user dan internal sistem untuk
memastikan seluruh fungsionalitas aplikasi web yang dikembangkan berjalan
sebagaimana mestinya.

Salah satu aplikasi populer yang umum digunakan bersamaan dengan Pytest untuk
pengujian E2E adalah Selenium (https://www.selenium.dev). Selenium adalah sebuah
framework open-source yang digunakan untuk melakukan automated testing pada
aplikasi web. Selenium memungkinkan tester untuk merekam dan memutar ulang
interaksi pengguna dengan web app, seperti mengisi formulir, mengklik tombol, dan
menavigasi antar halaman. Perlu diingat, dengan segala macam fitur yang disediakan
oleh Selenium, pengujian manual dan eksplorasi oleh human-tester tetap diperlukan
untuk memastikan cakupan pengujian yang menyeluruh dan menemukan bug yang
tidak terduga.

Percobaan 1: Menjelajahi link navigasi dengan Selenium

Dalam melakuka pengujian system dari web aplikasi ini, kita akan menggunakan sebuah
library popular dengan nama Selenium. Oleh karena itu, install selenium pada python
environment anda dengan menjalankan perintah berikut ini:
Buatlah file dengan nama percobaan1.py lalu salin kode dibawha ini:
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()
driver.get("https://www.python.org/")
time.sleep(3) #nunggu 3 detik

# Mencari dan mengklik link dengan isi teks "About"

about_link = driver.find_element(By.LINK_TEXT, "About")
about_link.click()
time.sleep(3)

# Menutup browser setelah selesai

driver.quit()

Kelemahan utama dari metode By.LINK_TEXT adalah metode ini dapat menyebabkan
ambigu karena mungkin ada navigasi lainnya dengan nama About. Oleh karena itu, cara
yang direkomendasikan adalah dengan menggunakan XPATH seperti berikut ini:
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()

# Max jendela browser

driver.maximize_window()
driver.get("https://www.python.org/")
time.sleep(3)

# Mencari dan mengklik link dengan isi a href /about

about_link = driver.find_element(By.XPATH, "//a[@href='/about/']")
about_link.click()
time.sleep(3)

# Mencari dan mengklik link dengan isi a href /news

news_link = driver.find_element(By.XPATH, "//a[@href='/blogs/']")
news_link.click()
time.sleep(3)

# Mencari dan mengklik link dengan isi a href /events

events_link = driver.find_element(By.XPATH, "//a[@href='/events/']")
events_link.click()
time.sleep(3)

print("Pengujian link web python.org selesai")

# Menutup browser setelah selesai
driver.quit()

 //a: Ini adalah cara kita memberi tahu XPath untuk mencari elemen <a> di dalam halaman
web. Tanda dua garis miring miring // berarti kita ingin mencari elemen ini di seluruh dokumen
HTML, tidak peduli seberapa dalam elemen tersebut tertanam.
 [@href='/about/']: Bagian ini memberi tahu XPath bahwa kita hanya tertarik pada elemen-
elemen <a> yang memiliki atribut href dengan nilai '/about/'. Dalam konteks ini, @href berarti
kita ingin memeriksa nilai atribut href, dan '/'about/' adalah nilai yang ingin kita cocokkan.
Jadi, XPath ini mencari semua tautan (<a>) di halaman web yang mengarah ke URL '/about/'.

Percobaan 2: Googling dengan Selenium

Pada percobaan ini, kita akan mencoba melakukan otomatasi pencarian google dengan
menggunakan selenium. Buat file dengan nama percobaan2.py lalu salin kode berikut
ini:
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()
driver.maximize_window()

driver.get("https://google.com/")
time.sleep(3) #nunggu 3 detik

# Mencari dan mengklik link dengan isi a href /about

input_pencarian = driver.find_element(By.NAME, "q")
input_pencarian.send_keys("Tutorial Selenium")#supaya ga ngandelin modul aja
time.sleep(3)

tombol_search = driver.find_element(By.XPATH, "//input[@name='btnK']")

tombol_search.click()
time.sleep(3)

print("Pengujian googling selesai")

# Menutup browser setelah selesai

driver.quit()

Ekspresi By.NAME diatas pada variable input_pencarian ini berfungsi untuk

mencari elemen <textarea> yang memiliki atribut name dengan nilai 'q'.
Hal ini dapat dibuktikan dengan melihat atributnya dengan melakukan inspect
element textarea.

Percobaan 3: Persiapan System-under-Test (Aplikasi web sederhana berbasis

Flask)
Aktifkan Apache dan MySQL server pada Laragon atau XAMPP anda.

Selanjutnya, unduh aplikasi web flask pada link berikut ini:

https://drive.google.com/file/d/1KxqlNOlcairKJwPtfsxWTe_j8WJiVJDZ/view?
usp=sharing

Ekstrak file webflask.zip pada drive anda:

Buat database dengan nama dbpolibatam lalu import file dbpolibatam.sql yang ada
pada file zip. Hasil database akan terlihat seperti berikut ini:

Selanjutnya, karena pada contoh ini kita akan menggunakan Chrome, maka pastikan
pula anda telah mendownload chrome di sistem anda masing-masing:
https://www.google.com/chrome/

Aplikasi webflask yang telah disediakan perlu dijalankan melalui beberapa library
Python. Oleh karena itu, lakukan instalasi library tersebut dengan perintah berikut ini:
Pada command prompt atau terminal. jalankan perintah:
pip install flask pymysql requests

Jika database dan file telah selesai disiapkan, maka jalankan web dengan menjalankan
perintah:
python app.py
atau

Percobaan 4: Pengujian Fitur Login & Logout

Untuk melakukan percobaan ini, pastikan anda telah mencoba menyelesaikan module
flask yang telah disediakan. Jika anda telah menerapkannya, jalankan flask server
sehingga web dapat diakses dari http://localhost:9999 atau http://127.0.0.1:9999

Untuk menguji fitur ini secara otomatis menggunakan selenium, Buat sebuah file
dengan nama test_01_uji-login.py lalu salin kode berikut ini:
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
import time
@pytest.fixture(scope="module")
def driver():
driver = webdriver.Chrome()
driver.maximize_window()
yield driver
driver.quit()

def test_login_and_logout(driver):
login_url = 'http://127.0.0.1:9999/'
email = '[email protected]'
password = 'rahasia123'

driver.get(login_url)

email_field = driver.find_element(By.XPATH, '//input[@name="email"]')

password_field = driver.find_element(By.XPATH, '//input[@name="password"]')
login_button = driver.find_element(By.XPATH, '//button[@type="submit"]')

email_field.send_keys(email)
time.sleep(2)
password_field.send_keys(password)
time.sleep(2)
login_button.click()

time.sleep(2)

current_url = driver.current_url

if '/dashboard' in current_url:
assert True, "Login berhasil"

time.sleep(3)
logout = driver.find_element(By.XPATH, "//a[@href='/logout']")
logout.click()

assert '/' in driver.current_url, "Logout berhasil"

elif '/' in current_url:
assert False, "Login gagal karena autentikasi"
else:
assert False, "Login gagal karena kesalahan tidak dikenal"

Dari contoh kode diatas, perlu diperhatikan bahwa saat ingin melakukan uji coba terkait
fitur yang dilindungi oleh autentikasi, maka dengan perspektif user, kita sebaiknya
memulai langkah pengujian E2E dari login hingga proses pengujian yang diinginkan
terpenuhi (dalam hal ini: tambah mahasiswa).

Pytest Naming Conventions

Secara default, pytest menemukan file tes berdasarkan konvensi
penamaan. Pastikan file tes anda mengikuti konvensi penamaan yang
dikenali oleh pytest. Umumnya, pytest mencari file yang diawali dengan
test_ atau diakhiri dengan _test.py. Jika file Anda tidak sesuai dengan
konvensi ini, pytest mungkin tidak akan mengenali dan menjalankannya
sebagai file tes.
Percobaan 5: Automasi Fitur CRUD data Mahasiswa
5.1 Uji fitur tambah mahasiswa

Pada kode diatas, kita akan menggunakan Selenium untuk mengotomatisasi pengujian
pada halaman web. Pertama, skrip akan dijalankan menggunakan Chrome WebDriver
untuk mengontrol browser Chrome yang ada di sistem. Kemudian, diarahkan untuk
mengakses URL "http://127.0.0.1:9999/mahasiswa/tambah" di browser tersebut.

Buat file dengan nama test_02_tambah-mhs.py lalu salin kode dibawah ini:
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

@pytest.fixture(scope="module")
def driver():
driver = webdriver.Chrome()
driver.maximize_window()
yield driver
driver.quit()

def test_add_new_student(driver):
try:
login_url = 'http://127.0.0.1:9999/'
driver.get(login_url)

email_field = driver.find_element(By.XPATH, '//input[@name="email"]')

password_field = driver.find_element(By.XPATH, '//input[@name="password"]')
login_button = driver.find_element(By.XPATH, '//button[@type="submit"]')

email_field.send_keys('[email protected]')
time.sleep(2)
password_field.send_keys('rahasia123')
time.sleep(2)
login_button.click()
time.sleep(2)

link_mhs = driver.find_element(By.XPATH, '//a[@href="/mahasiswa"]')

link_mhs.click()
time.sleep(2)

link_add_mhs = driver.find_element(By.XPATH, '//a[@href="/mahasiswa/tambah"]')

link_add_mhs.click()
time.sleep(2)

nim_input = driver.find_element(By.NAME, "nim")

nim_input.send_keys("123456")
time.sleep(3)

nama_input = driver.find_element(By.NAME, "nama_lengkap")

nama_input.send_keys("Mahasiswa Baru")
time.sleep(3)

alamat_input = driver.find_element(By.NAME, "alamat")

alamat_input.send_keys("Dunia Lain")
time.sleep(3)

tombol_tambah = driver.find_element(By.XPATH, "//button[text()='Tambah']")

 tombol_tambah.click()
time.sleep(3)

# Assert halaman ke dashboard dan 123456 tersimpan ke Database

assert "mahasiswa" in driver.current_url
assert "123456" in driver.page_source
print("Pengujian tambah data mahasiswa sukses.")

except Exception as e:
pytest.fail(f"Terjadi kesalahan: {e}")

Kode pada fungsi driver selalu digunakan dalam mempersiapkan pengujian E2E
menggunakan pytest, apakah itu???
 @pytest.fixture(scope="module"): decorator untuk mendefinisikan sebuah
fixture. scope="module" adalah parameter opsional yang menunjukkan cakupan atau
ruang lingkup dari fixture. Dalam hal ini, scope="module" berarti fixture ini akan
berlaku untuk semua tes dalam satu modul (file) pengujian.
 def driver():: Ini adalah nama dari fixture. Kita dapat menggunakan nama apa pun
untuk fixture Anda.
 driver = webdriver.Chrome(): Di dalam fungsi fixture, kode ini membuat sebuah
instance dari WebDriver untuk browser. WebDriver adalah API yang digunakan untuk
mengotomatisasi browser web (dalam hal ini Chrome)
 driver.maximize_window(): metode yang digunakan untuk memaksimalkan jendela
browser.
 yield driver: Ini adalah bagian terpenting dari fixture. yield digunakan untuk
memberikan nilai kembali ke pemanggil fixture (tes yang menggunakan fixture ini).
 driver.quit(): Setelah semua tes yang menggunakan fixture ini selesai dijalankan,
bagian ini akan dieksekusi untuk membersihkan dan menutup browser.

5.2 Mengubah data mahasiswa

Buat file dengan nama test_02_ubah-mhs.py lalu salin kode dibawah ini:
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

@pytest.fixture(scope="module")
def driver():
driver = webdriver.Chrome()
driver.maximize_window()
yield driver
driver.quit()

def test_update_student_info(driver):
try:
login_url = 'http://127.0.0.1:9999/'
driver.get(login_url)

email_field = driver.find_element(By.XPATH, '//input[@name="email"]')

password_field = driver.find_element(By.XPATH, '//input[@name="password"]')
login_button = driver.find_element(By.XPATH, '//button[@type="submit"]')
 email_field.send_keys('[email protected]')
time.sleep(2)
password_field.send_keys('rahasia123')
time.sleep(2)
login_button.click()
time.sleep(2)

link_mhs = driver.find_element(By.XPATH, '//a[@href="/mahasiswa"]')

link_mhs.click()
time.sleep(2)

tombol_ubah = driver.find_element(By.XPATH, "(//table[@class='table table-

striped']//tr[position()=1]//a[text()='Ubah'])[1]")
tombol_ubah.click()
time.sleep(3)

nama_input = driver.find_element(By.NAME, "nama_lengkap")

alamat_input = driver.find_element(By.NAME, "alamat")

nama_input.clear()
time.sleep(2)
nama_input.send_keys("Fulan")
time.sleep(5)

alamat_input.clear()
time.sleep(2)
alamat_input.send_keys("Batu Aji")
time.sleep(3)

tombol_update = driver.find_element(By.XPATH, "//button[@type='submit']")

tombol_update.click()
time.sleep(3)

assert "mahasiswa" in driver.current_url and "Fulan" in driver.page_source

print("Pengujian ubah mahasiswa berhasil")

except Exception as e:
pytest.fail(f"Terjadi kesalahan: {e}")

//table[@class='table
table-striped']//tr[position()=1]//a[text()='Ubah'])[1]")
Dalam kode XPATH ini, kita mencari elemen <a> yang memiliki teks
"Ubah" di dalam tabel dengan atribur class "table table-striped",
dimana elemennya harus terletak dalam baris pertama (position()=1)
dari tabel.

Selanjutnya, tanda kurung siku ([]) di sekitar position()=1

menunjukkan bahwa kita memilih elemen yang merupakan anak
pertama dari elemen <tr> dalam tabel. Tanda kurung kurawal terakhir
([1]) menunjukkan bahwa kita hanya memilih elemen pertama yang
cocok dengan kriteria tersebut.
5.3 Menghapus data mahasiswa
Buat file dengan nama test_04_hapus-mhs.py lalu salin kode dibawah ini:
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.alert import Alert
import time

@pytest.fixture(scope="module")
def setup():
driver = webdriver.Chrome()
driver.maximize_window()
yield driver
driver.quit()

def test_delete_first_student(setup):
driver = setup
try:
login_url = 'http://127.0.0.1:9999/'
driver.get(login_url)

email_field = driver.find_element(By.XPATH, '//input[@name="email"]')

password_field = driver.find_element(By.XPATH, '//input[@name="password"]')
login_button = driver.find_element(By.XPATH, '//button[@type="submit"]')

email_field.send_keys('[email protected]')
time.sleep(2)
password_field.send_keys('rahasia123')
time.sleep(2)
login_button.click()
time.sleep(2)

link_mhs = driver.find_element(By.XPATH, '//a[@href="/mahasiswa"]')

link_mhs.click()
time.sleep(2)

# Temukan tombol hapus dari baris pertama

tombol_hapus = driver.find_element(By.XPATH, "(//table[@class='table table-
striped']//tr[position()=1]//a[text()='Hapus'])[1]")
tombol_hapus.click()
time.sleep(3)

# Menghadapi konfirmasi alert dan menyetujui (klik OK)

alert = Alert(driver)
alert.accept()
time.sleep(3)

assert "mahasiswa" in driver.current_url and "123456" not in

driver.page_source
print("Pengujian hapus mahasiswa sukses")

except Exception as e:
pytest.fail(f"Terjadi kesalahan: {e}")

Percobaan 6: Menjalankan seluruh file pengujian secara simultan

Untuk menjalankan seluruh pengujian secara simultan, pindahkan keempat buah file
pengujian diatas (login dan crud mhs) ke dalam sebuah folder baru dengan nama
testing:

Selanjutnya, dari terminal masuk ke dalam folder testing dan jalankan perintah: pytest

Screnshot hasil anda dibawah ini:

Tugas 1: Pada folder testing, buatlah fitur pengujian untuk tambah, edit dan hapus
Matakuliah. Salin kode jawaban anda disini:

test_05_uji-tambah-makul.py

test_06_uji-ubah-makul.py
test_07_uji-hapus-makul.py

Tugas 2: Pada folder testing, buatlah fitur pengujian untuk navigasi ke dalam menu
Joke of the Day. Salin kode jawaban anda disini:
test_08_joke.py

Tugas 3: Pada folder testing, buatlah fitur pengujian untuk navigasi ke dalam menu
Tentang. Salin kode jawaban anda disini:
test_09_tentang.py

Jalankan ulang semua file yang ada di folder testing, Screenshot hasilnya disini:

- Selamat Mengerjakan -