End-to-end testing dengan Cypress atau Selenium

End-to-end (E2E) testing adalah jenis pengujian yang digunakan untuk memverifikasi seluruh alur kerja aplikasi dari awal hingga akhir untuk memastikan bahwa semua komponen berfungsi dengan baik secara keseluruhan. Dua alat yang populer untuk melakukan E2E testing adalah Cypress dan Selenium.

1. Cypress

Cypress adalah alat modern untuk E2E testing yang dirancang untuk aplikasi web. Ini sangat cepat, mudah digunakan, dan memiliki integrasi yang kuat dengan ekosistem JavaScript.

Fitur Utama Cypress:

• Real-time Reloads: Setiap kali Anda mengubah kode, Cypress akan secara otomatis memuat ulang dan menjalankan ulang tes.

• Automatic Waiting: Cypress secara otomatis menunggu hingga elemen yang diuji tersedia di DOM.

• Powerful Debugging: Cypress memiliki alat debugging yang kuat dengan kemampuan untuk melihat snapshot dari setiap langkah pengujian.

Instalasi Cypress

npm install cypress --save-dev

Setelah instalasi, Anda dapat membuka Cypress untuk pertama kalinya dengan perintah berikut:

npx cypress open

Contoh Pengujian E2E dengan Cypress

Misalkan kita ingin menguji halaman login.

File cypress/integration/login.spec.js:

describe('Login Page Test', () => {
  it('should successfully login with valid credentials', () => {
    cy.visit('http://localhost:3000/login');

    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();

    cy.url().should('include', '/dashboard');
    cy.get('h1').should('contain', 'Welcome to your dashboard');
  });

  it('should show error message with invalid credentials', () => {
    cy.visit('http://localhost:3000/login');

    cy.get('input[name="username"]').type('wronguser');
    cy.get('input[name="password"]').type('wrongpassword');
    cy.get('button[type="submit"]').click();

    cy.get('.error-message').should('contain', 'Invalid username or password');
  });
});

Menjalankan Tes dengan Cypress

Untuk menjalankan tes, gunakan perintah berikut:

npx cypress open

Ini akan membuka UI Cypress di mana Anda dapat menjalankan tes dan melihat hasilnya secara real-time.

2. Selenium

Selenium adalah alat open-source yang lebih lama dan banyak digunakan untuk mengotomatisasi browser web. Selenium mendukung berbagai bahasa pemrograman seperti JavaScript, Python, Java, dan lainnya. Selenium juga mendukung berbagai browser dan platform.

Fitur Utama Selenium:

• Cross-Browser Testing: Selenium dapat digunakan untuk mengotomatisasi browser seperti Chrome, Firefox, Safari, dan lain-lain.

• Multi-Language Support: Selenium mendukung banyak bahasa pemrograman.

• Remote Execution: Dengan Selenium Grid, Anda dapat menjalankan tes di beberapa mesin dengan berbagai konfigurasi browser.

Instalasi Selenium dengan JavaScript

Untuk menggunakan Selenium dengan JavaScript, Anda dapat menginstal paket selenium-webdriver.

npm install selenium-webdriver

Contoh Pengujian E2E dengan Selenium

Berikut adalah contoh pengujian yang melakukan tindakan login di halaman web.

File test/login.test.js:

const { Builder, By, until } = require('selenium-webdriver');

describe('Login Page Test', function() {
  let driver;

  before(async function() {
    driver = await new Builder().forBrowser('chrome').build();
  });

  after(async function() {
    await driver.quit();
  });

  it('should successfully login with valid credentials', async function() {
    await driver.get('http://localhost:3000/login');
    await driver.findElement(By.name('username')).sendKeys('testuser');
    await driver.findElement(By.name('password')).sendKeys('password123');
    await driver.findElement(By.css('button[type="submit"]')).click();

    await driver.wait(until.urlContains('/dashboard'), 10000);
    const heading = await driver.findElement(By.tagName('h1')).getText();
    if (heading !== 'Welcome to your dashboard') {
      throw new Error('Login failed');
    }
  });

  it('should show error message with invalid credentials', async function() {
    await driver.get('http://localhost:3000/login');
    await driver.findElement(By.name('username')).sendKeys('wronguser');
    await driver.findElement(By.name('password')).sendKeys('wrongpassword');
    await driver.findElement(By.css('button[type="submit"]')).click();

    const errorMessage = await driver.findElement(By.className('error-message')).getText();
    if (errorMessage !== 'Invalid username or password') {
      throw new Error('Error message not displayed');
    }
  });
});

Menjalankan Tes dengan Selenium

Untuk menjalankan tes Selenium, Anda cukup menggunakan node:

node test/login.test.js

Perbandingan Cypress dan Selenium

Aspek	Cypress	Selenium
Bahasa	JavaScript	Multi-bahasa (JavaScript, Python, Java, dll.)
Kecepatan	Sangat cepat	Tergantung pada eksekusi browser
Ekosistem	Terintegrasi dengan baik di JS	Banyak dukungan dan pustaka tambahan
Kemudahan Penggunaan	Mudah, dengan integrasi yang baik	Lebih kompleks, tapi lebih fleksibel
Debugging	Mudah dengan snapshot dan UI bawaan	Mengandalkan konsol browser dan debug eksternal

Kesimpulan

• Cypress adalah pilihan yang sangat baik jika Anda mencari alat testing modern dan mudah digunakan, terutama jika Anda bekerja di lingkungan JavaScript.

• Selenium adalah pilihan yang baik jika Anda memerlukan dukungan multi-browser dan berbagai bahasa pemrograman.

Sumber

• Cypress Documentation

• Selenium Documentation

Dengan melakukan E2E testing, Anda memastikan bahwa seluruh alur kerja aplikasi diuji dari awal hingga akhir, membantu menemukan dan memperbaiki bug sebelum aplikasi dirilis ke pengguna.