Semua proyek
Proyek pribadi

E-Commerce Web Automation

Automation Cypress UI + API

CypressJavaScriptPage Object ModelGitHub ActionsMochawesomeRestful BookerAutomation Exercise
38
Test end-to-end
100%
Pass rate
9
Suite spec
GitHubLive Report

Ringkasan

Suite Cypress yang menutup perjalanan belanja e-commerce secara utuh di situs demo Automation Exercise - mulai dari register dan login, lalu produk, keranjang, sampai checkout - berikut lapisan API-nya.

Pengujian API dibagi ke dua target: Restful Booker sebagai target CRUD-dengan-auth yang stabil, dan API Automation Exercise untuk pemeriksaan status code dan kasus negatif. Alur UI memakai Page Object Model.

Tujuan

Mengotomasi perjalanan register → login → jelajah produk → keranjang → checkout dengan assertion UI yang nyata, serta menutup REST API secara end-to-end: auth, CRUD, dan status code negatif.

Cakupan pengujian

  • Login & Register

    • Menolak login dengan kredensial salah dan dengan email kosong
    • Login berhasil dengan akun yang sudah terdaftar
    • Mendaftarkan user baru sampai halaman Account Created
    • Menolak registrasi dengan email yang sudah terdaftar

  • Produk

    • Menampilkan semua produk dan membuka detail produk dari daftar
    • Pencarian mengembalikan hasil yang cocok
    • Pencarian produk yang tidak ada mengembalikan hasil kosong
    • Filter berdasarkan kategori (Women > Dress)

  • Keranjang & Checkout

    • Menambah satu dan beberapa produk; memverifikasi harga yang tampil
    • Menghapus satu produk, dan menghapus satu dari beberapa produk tanpa mengacaukan sisanya
    • Checkout end-to-end: keranjang → alamat → pembayaran → pesanan dibuat
    • Tamu tidak bisa checkout - modal Register/Login muncul

  • Contact & Video Tutorials

    • Mengirim form Contact Us beserta unggahan berkas
    • Memblokir submit saat email wajib belum diisi
    • Tautan Video Tutorials mengarah ke YouTube

  • API - Restful Booker (CRUD + auth)

    • POST /auth mengembalikan token
    • GET daftar, POST buat baru, GET berdasarkan id
    • PUT update dan DELETE mewajibkan token
    • GET booking yang sudah dihapus mengembalikan 404

  • API - Automation Exercise

    • verifyLogin negatif: 404 user tidak dikenal, 400 email tidak ada, 405 method salah
    • GET products dan GET brands
    • POST pencarian produk berdasarkan kata kunci
    • Siklus akun penuh: buat → verifikasi → hapus

Strategi pengujian

  • Page Object Model dengan peta elemen per halaman dan action yang bisa dirantai.
  • API dipisah: Restful Booker untuk CRUD yang stabil, Automation Exercise untuk status code.
  • CRUD berurutan mengoper token auth dan booking id antar test.
  • Data test dinamis - nama bertimestamp dan tanggal yang dihitung - menghindari tabrakan data.
  • Unggah berkas dan validasi field wajib pada form Contact.
  • GitHub Actions menjalankan suite dan menerbitkan laporan Mochawesome.

Arsitektur

  1. File specdescribe / it UI + API
  2. Page Objectpeta elemen + action
  3. Automation Exercise / Restful Bookersistem yang diuji
  4. GitHub ActionsCypress berjalan saat push
  5. Mochawesome → GitHub Pageslaporan yang dipublikasikan

Implementasi

Page Object mengumpulkan selector dalam satu peta dan mengembalikan this supaya action bisa dirantai.
class LoginPage {
  elements = {
    emailInput:    () => cy.get('input[data-qa="login-email"]'),
    passwordInput: () => cy.get('input[data-qa="login-password"]'),
    loginButton:   () => cy.get('[data-qa="login-button"]'),
  };

  visit() {
    cy.visit('https://automationexercise.com');
    cy.get('a[href="/login"]').click();
    return this;
  }
  fillEmail(email)       { this.elements.emailInput().type(email); return this; }
  fillPassword(password) { this.elements.passwordInput().type(password); return this; }
  submit()               { this.elements.loginButton().click(); return this; }
}
Test auth menangkap token yang dipakai ulang oleh panggilan PUT dan DELETE berikutnya.
it('POST /auth returns a token', () => {
  cy.request({
    method: 'POST',
    url: `${baseUrl}/auth`,
    body: { username: 'admin', password: 'password123' },
  }).then((res) => {
    expect(res.status).to.eq(200)
    expect(res.body.token).to.be.a('string').and.not.be.empty
    token = res.body.token // reused by PUT & DELETE
  })
})
Data booking dibuat ulang tiap eksekusi supaya test tidak bertabrakan dengan data lama.
const fmt = (d) => d.toISOString().split('T')[0]
const checkout = new Date()
checkout.setDate(checkout.getDate() + 3)

const booking = {
  firstname: `Fajar${Date.now()}`,
  lastname: 'QA',
  totalprice: 250,
  depositpaid: true,
  bookingdates: { checkin: fmt(new Date()), checkout: fmt(checkout) },
  additionalneeds: 'Breakfast',
}

Hasil

38

Test

di 9 suite spec

38

Lulus

0

Gagal

100%

Pass rate

Tautan

GitHubLive Report