M

MLOG

Bahasa Indonesia

Panduan komprehensif untuk Cypress, kerangka kerja pengujian end-to-end yang andal, mencakup instalasi, penulisan tes, debugging, integrasi CI/CD, dan praktik terbaik.

Cypress: Panduan Pengujian End-to-End Terbaik untuk Aplikasi Web

Dalam lanskap pengembangan web yang berkembang pesat saat ini, memastikan kualitas dan keandalan aplikasi web adalah hal yang terpenting. Pengujian End-to-End (E2E) memainkan peran krusial dalam memverifikasi bahwa semua komponen aplikasi bekerja dengan lancar dari perspektif pengguna. Cypress telah muncul sebagai kerangka kerja pengujian E2E terkemuka, menawarkan pengalaman yang ramah pengembang, fitur-fitur andal, dan kinerja luar biasa. Panduan komprehensif ini akan memandu Anda melalui semua yang perlu Anda ketahui untuk memulai dengan Cypress dan menguji aplikasi web Anda secara efektif.

Apa itu Cypress?

Cypress adalah alat pengujian front-end generasi berikutnya yang dibuat untuk web modern. Tidak seperti kerangka kerja pengujian tradisional yang menjalankan tes di dalam browser, Cypress beroperasi langsung di dalam browser, memberi Anda kontrol dan visibilitas yang tak tertandingi ke dalam perilaku aplikasi Anda. Ini dirancang agar cepat, andal, dan mudah digunakan, menjadikannya pilihan populer di kalangan pengembang dan insinyur QA di seluruh dunia. Cypress ditulis dalam JavaScript dan dieksekusi di dalam browser, membuatnya sangat berkinerja dan menawarkan akses tak tertandingi ke bagian internal aplikasi.

Manfaat Utama Menggunakan Cypress

Instalasi dan Pengaturan

Memulai dengan Cypress sangatlah mudah. Berikut cara menginstalnya:

  1. Prasyarat: Pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di sistem Anda. Anda dapat mengunduhnya dari situs web resmi Node.js.
  2. Instal Cypress: Buka terminal atau command prompt Anda, navigasikan ke direktori proyek Anda, dan jalankan perintah berikut:
    3. npm install cypress --save-dev
  3. Buka Cypress: Setelah instalasi selesai, Anda dapat membuka Cypress Test Runner dengan menjalankan:
    4. npx cypress open

    Perintah ini akan meluncurkan Cypress Test Runner, yang menyediakan antarmuka grafis untuk menjalankan dan melakukan debug pada tes Anda.

Menulis Tes Cypress Pertama Anda

Mari kita buat tes sederhana untuk memverifikasi bahwa halaman beranda situs web dimuat dengan benar. Buat file baru bernama `example.cy.js` di direktori `cypress/e2e` proyek Anda.


// cypress/e2e/example.cy.js

describe('Tes Pertama Saya', () => {
  it('Mengunjungi Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Mari kita bedah tes ini:

Jalankan tes ini di Cypress Test Runner untuk melihatnya beraksi. Anda akan melihat browser menavigasi ke situs web Cypress Kitchen Sink, mengklik tautan "type", dan memverifikasi URL.

Perintah Cypress

Cypress menyediakan berbagai macam perintah untuk berinteraksi dengan aplikasi Anda. Berikut adalah beberapa perintah yang paling umum digunakan:

Ini hanyalah beberapa dari banyak perintah yang tersedia di Cypress. Rujuk ke dokumentasi Cypress untuk daftar lengkap perintah dan opsinya.

Asersi dalam Cypress

Asersi digunakan untuk memverifikasi perilaku yang diharapkan dari aplikasi Anda. Cypress menyediakan serangkaian asersi bawaan yang kaya yang dapat Anda gunakan untuk memeriksa status elemen, URL, judul, dan lainnya. Asersi dirangkai setelah perintah Cypress menggunakan metode `.should()`.

Berikut adalah beberapa contoh asersi umum:

Anda juga dapat membuat asersi kustom sesuai dengan kebutuhan spesifik Anda.

Praktik Terbaik untuk Menulis Tes Cypress

Mengikuti praktik terbaik dapat membantu Anda menulis tes Cypress yang lebih mudah dipelihara, andal, dan efisien. Berikut adalah beberapa rekomendasi:

Teknik Cypress Tingkat Lanjut

Stubbing dan Mocking

Cypress memungkinkan Anda untuk melakukan stub pada permintaan dan respons jaringan, memungkinkan Anda untuk mensimulasikan skenario yang berbeda dan menguji penanganan kesalahan aplikasi Anda. Ini sangat berguna untuk menguji fitur yang bergantung pada API atau layanan eksternal.

Untuk melakukan stub pada permintaan jaringan, Anda dapat menggunakan perintah `cy.intercept()`. Misalnya, kode di bawah ini melakukan stub pada permintaan GET ke `/api/users` dan mengembalikan respons tiruan:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Anda kemudian dapat menunggu permintaan yang dicegat menggunakan `cy.wait('@getUsers')` dan memverifikasi bahwa aplikasi Anda menangani respons tiruan dengan benar.

Bekerja dengan Local Storage dan Cookie

Cypress menyediakan perintah untuk berinteraksi dengan local storage dan cookie. Anda dapat menggunakan perintah ini untuk mengatur, mendapatkan, dan membersihkan local storage dan cookie dalam tes Anda.

Untuk mengatur item local storage, Anda dapat menggunakan perintah `cy.window()` untuk mengakses objek window dan kemudian menggunakan metode `localStorage.setItem()`. Contohnya:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Untuk mendapatkan item local storage, Anda dapat menggunakan perintah `cy.window()` dan kemudian menggunakan metode `localStorage.getItem()`. Contohnya:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Untuk mengatur cookie, Anda dapat menggunakan perintah `cy.setCookie()`. Contohnya:


cy.setCookie('myCookie', 'myCookieValue')

Untuk mendapatkan cookie, Anda dapat menggunakan perintah `cy.getCookie()`. Contohnya:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Menangani Unggahan File

Cypress menyediakan plugin bernama `cypress-file-upload` yang menyederhanakan unggahan file dalam tes Anda. Untuk menginstal plugin, jalankan perintah berikut:

npm install -D cypress-file-upload

Kemudian, tambahkan baris berikut ke file `cypress/support/commands.js` Anda:


import 'cypress-file-upload';

Anda kemudian dapat menggunakan perintah `cy.uploadFile()` untuk mengunggah file. Contohnya:


cy.get('input[type="file"]').attachFile('example.txt')

Bekerja dengan IFrame

Menguji IFrame bisa jadi rumit, tetapi Cypress menyediakan cara untuk berinteraksi dengannya. Anda dapat menggunakan perintah `cy.frameLoaded()` untuk menunggu IFrame dimuat, dan kemudian menggunakan perintah `cy.iframe()` untuk mendapatkan objek dokumen IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress dan Integrasi Berkelanjutan/Penyebaran Berkelanjutan (CI/CD)

Mengintegrasikan Cypress ke dalam pipeline CI/CD Anda sangat penting untuk memastikan kualitas aplikasi Anda. Anda dapat menjalankan tes Cypress dalam mode headless di lingkungan CI/CD Anda. Berikut caranya:

  1. Instal Cypress: Pastikan Cypress diinstal sebagai dependensi dalam proyek Anda.
  2. Konfigurasi CI/CD: Konfigurasikan pipeline CI/CD Anda untuk menjalankan tes Cypress setelah setiap build.
  3. Jalankan Cypress Headlessly: Gunakan perintah `cypress run` untuk menjalankan tes Cypress dalam mode headless.

Contoh konfigurasi CI/CD (menggunakan GitHub Actions):


name: Tes Cypress

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Konfigurasi ini akan menjalankan tes Cypress setiap kali kode didorong ke cabang `main` atau permintaan tarik dibuat terhadap cabang `main`. Aksi `cypress-io/github-action` menyederhanakan proses menjalankan tes Cypress di GitHub Actions.

Debugging Tes Cypress

Cypress menyediakan alat debugging yang sangat baik untuk membantu Anda mengidentifikasi dan memperbaiki masalah dalam tes Anda. Berikut adalah beberapa tips untuk debugging tes Cypress:

Cypress vs. Kerangka Kerja Pengujian Lainnya

Meskipun Cypress adalah kerangka kerja pengujian end-to-end yang kuat, penting untuk memahami perbandingannya dengan opsi populer lainnya. Berikut adalah tinjauan singkat:

Pilihan kerangka kerja tergantung pada kebutuhan dan persyaratan spesifik proyek Anda. Cypress adalah pilihan yang sangat baik untuk aplikasi web modern yang memerlukan pengujian end-to-end yang cepat, andal, dan ramah pengembang.

Contoh Dunia Nyata dari Cypress dalam Aksi

Mari kita jelajahi beberapa contoh dunia nyata tentang bagaimana Cypress dapat digunakan untuk menguji berbagai jenis aplikasi web:

Menguji Aplikasi E-commerce

Anda dapat menggunakan Cypress untuk menguji berbagai alur pengguna dalam aplikasi e-commerce, seperti:

Berikut adalah contoh tes Cypress yang memverifikasi bahwa pengguna dapat berhasil menambahkan produk ke keranjang mereka:


it('Menambahkan produk ke keranjang', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Menguji Aplikasi Media Sosial

Anda dapat menggunakan Cypress untuk menguji interaksi pengguna dalam aplikasi media sosial, seperti:

Berikut adalah contoh tes Cypress yang memverifikasi bahwa pengguna dapat berhasil membuat postingan baru:


it('Membuat postingan baru', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Halo, dunia!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Halo, dunia!')
})

Menguji Aplikasi Perbankan

Untuk aplikasi perbankan, Cypress dapat digunakan untuk menguji fungsionalitas kritis seperti:

Sebuah tes untuk memverifikasi transfer dana mungkin terlihat seperti ini (dengan stubbing yang sesuai untuk keamanan):


it('Berhasil mentransfer dana', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Kesimpulan

Cypress adalah kerangka kerja pengujian end-to-end yang kuat dan serbaguna yang dapat membantu Anda memastikan kualitas dan keandalan aplikasi web Anda. API-nya yang ramah pengembang, fitur-fitur andal, dan kinerja luar biasa menjadikannya pilihan populer di kalangan pengembang dan insinyur QA di seluruh dunia. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat menulis tes Cypress yang efektif yang akan membantu Anda menangkap bug di awal proses pengembangan dan memberikan perangkat lunak berkualitas tinggi kepada pengguna Anda.

Seiring aplikasi web terus berkembang, pentingnya pengujian end-to-end akan semakin meningkat. Merangkul Cypress dan mengintegrasikannya ke dalam alur kerja pengembangan Anda akan memberdayakan Anda untuk membangun pengalaman web yang lebih kuat, andal, dan ramah pengguna.