Otomatisasi Pengujian Frontend: Pola Tingkat Lanjut Playwright dan Cypress

Dalam lanskap pengembangan web yang terus berkembang, memastikan kualitas dan keandalan aplikasi frontend Anda adalah yang terpenting. Pengujian otomatis memainkan peran penting dalam mencapai tujuan ini. Playwright dan Cypress adalah dua kerangka kerja pengujian end-to-end (E2E) berbasis JavaScript yang populer dan telah mendapatkan daya tarik signifikan dalam beberapa tahun terakhir. Meskipun keduanya menawarkan kemampuan yang kuat untuk membuat dan menjalankan pengujian, menguasai pola-pola tingkat lanjut sangat penting untuk membangun rangkaian pengujian yang dapat dipelihara, skalabel, dan andal. Panduan komprehensif ini menggali pola-pola tingkat lanjut ini, memberikan contoh praktis dan wawasan untuk meningkatkan strategi pengujian frontend Anda.

Memahami Lanskap: Playwright vs. Cypress

Sebelum mendalami pola-pola tingkat lanjut, penting untuk memahami perbedaan mendasar dan kekuatan Playwright dan Cypress. Kedua kerangka kerja ini bertujuan untuk menyederhanakan pengujian E2E, tetapi mereka mendekati masalah dengan arsitektur dan filosofi desain yang berbeda.

Playwright: Kekuatan Lintas-Peramban

Playwright, yang dikembangkan oleh Microsoft, unggul karena kompatibilitas lintas-perambannya. Ini mendukung Chromium, Firefox, dan WebKit (Safari), memungkinkan Anda menjalankan pengujian di semua peramban utama dengan satu basis kode. Playwright juga unggul dalam menangani skenario kompleks yang melibatkan banyak tab, iframe, dan shadow DOM. Mekanisme auto-wait-nya secara implisit menunggu elemen menjadi dapat ditindaklanjuti, mengurangi ketidakstabilan (flakiness) dalam pengujian.

Cypress: Pilihan yang Ramah Pengembang

Cypress, di sisi lain, berfokus pada penyediaan pengalaman pengembang yang mulus. Fitur debugging time-travel-nya, pemuatan ulang real-time, dan API yang intuitif menjadikannya favorit di kalangan pengembang. Cypress beroperasi langsung di dalam peramban, menawarkan kontrol dan visibilitas yang tak tertandingi ke dalam status aplikasi. Namun, Cypress terutama mendukung peramban berbasis Chromium dan Firefox, dengan dukungan terbatas untuk Safari.

Memilih kerangka kerja yang tepat tergantung pada kebutuhan dan prioritas spesifik Anda. Jika kompatibilitas lintas-peramban adalah suatu keharusan, Playwright adalah pemenang yang jelas. Jika pengalaman pengembang dan kemampuan debugging lebih penting, Cypress mungkin menjadi pilihan yang lebih baik.

Pola Pengujian Tingkat Lanjut: Tinjauan Mendalam

Sekarang, mari kita jelajahi beberapa pola pengujian tingkat lanjut yang dapat secara signifikan meningkatkan kualitas dan keterpeliharaan rangkaian pengujian Playwright dan Cypress Anda.

1. Page Object Model (POM)

Page Object Model (POM) adalah pola desain yang mempromosikan ketergunaan kembali kode dan keterpeliharaan dengan mengenkapsulasi elemen dan interaksi dari halaman tertentu dalam sebuah kelas khusus. Pola ini membantu mengabstraksi struktur HTML yang mendasarinya, membuat pengujian Anda tidak rapuh dan lebih mudah diperbarui ketika UI berubah.

Implementasi (Playwright):

            // page.ts
import { expect, Locator, Page } from '@playwright/test';

export class HomePage {
    readonly page: Page;
    readonly searchInput: Locator;
    readonly searchButton: Locator;

    constructor(page: Page) {
        this.page = page;
        this.searchInput = page.locator('input[name="q"]');
        this.searchButton = page.locator('button[type="submit"]');
    }

    async goto() {
        await this.page.goto('https://www.example.com');
    }

    async search(searchTerm: string) {
        await this.searchInput.fill(searchTerm);
        await this.searchButton.click();
    }
}

            

              
                Copy
              
            
          

            // example.spec.ts
import { test, expect } from '@playwright/test';
import { HomePage } from './page';

test('search for a term', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
    await homePage.search('Playwright');
    await expect(page).toHaveURL(/.*Playwright/);
});

            

              
                Copy
              
            
          

Implementasi (Cypress):

            // page.js
class HomePage {
    visit() {
        cy.visit('https://www.example.com')
    }

    search(searchTerm) {
        cy.get('input[name="q"]')
            .type(searchTerm)
        cy.get('button[type="submit"]')
            .click()
    }

    verifySearch(searchTerm) {
        cy.url().should('include', searchTerm)
    }
}

export default HomePage

            

              
                Copy
              
            
          

            // example.spec.js
import HomePage from './page'

describe('Home Page', () => {
    it('should search for a term', () => {
        const homePage = new HomePage()
        homePage.visit()
        homePage.search('Cypress')
        homePage.verifySearch('Cypress')
    })
})

            

              
                Copy
              
            
          

2. Pengujian Komponen

Pengujian komponen berfokus pada pengujian komponen UI individu secara terisolasi. Pendekatan ini memungkinkan Anda untuk memverifikasi fungsionalitas dan perilaku setiap komponen tanpa bergantung pada keseluruhan aplikasi. Pengujian komponen sangat berguna untuk pustaka dan kerangka kerja UI yang kompleks seperti React, Vue.js, dan Angular.

Manfaat Pengujian Komponen:

• Eksekusi Tes Lebih Cepat: Pengujian komponen biasanya lebih cepat daripada pengujian E2E karena hanya menguji sebagian kecil dari aplikasi.
• Isolasi yang Ditingkatkan: Pengujian komponen mengisolasi komponen dari dependensi eksternal, membuatnya lebih mudah untuk mengidentifikasi dan memperbaiki bug.
• Cakupan Kode yang Lebih Baik: Pengujian komponen dapat memberikan cakupan kode yang lebih baik dengan menguji komponen individu secara menyeluruh.

Implementasi (Playwright dengan React):

Playwright dapat digunakan untuk pengujian komponen dengan alat seperti Vite dan React's Testing Library. Meskipun Playwright unggul dalam E2E, kerangka kerja pengujian komponen khusus mungkin menawarkan DX yang lebih baik untuk kasus penggunaan spesifik ini.

Implementasi (Cypress dengan React):

            // Button.jsx
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

            

              
                Copy
              
            
          

            // Button.cy.jsx
import React from 'react';
import Button from './Button';

describe('Button Component', () => {
  it('should call onClick when clicked', () => {
    const onClick = cy.stub();
    cy.mount(Click Me);
    cy.get('button').click();
    cy.wrap(onClick).should('be.called');
  });

  it('should display the children text', () => {
    cy.mount(Hello World);
    cy.get('button').should('contain', 'Hello World');
  });
});

            

              
                Copy
              
            
          

3. Pengujian Visual

Pengujian visual melibatkan perbandingan tangkapan layar (screenshot) UI aplikasi Anda dengan gambar dasar untuk mendeteksi regresi visual. Jenis pengujian ini penting untuk memastikan bahwa aplikasi Anda terlihat benar di berbagai peramban, perangkat, dan ukuran layar. Pengujian visual dapat menangkap masalah UI halus yang mungkin terlewat oleh pengujian fungsional.

Alat untuk Pengujian Visual:

• Applitools: Platform pengujian visual komersial yang menyediakan perbandingan gambar canggih dan analisis bertenaga AI.
• Percy: Platform pengujian visual komersial populer lainnya yang terintegrasi secara mulus dengan pipeline CI/CD.
• Pengujian snapshot bawaan Playwright: Playwright memungkinkan Anda mengambil tangkapan layar dan membandingkannya dengan gambar dasar langsung di dalam pengujian Anda.
• Cypress Image Snapshot: Plugin Cypress yang menyediakan kemampuan perbandingan tangkapan layar serupa.

Implementasi (Playwright dengan snapshot bawaan):

            // visual.spec.ts
import { test, expect } from '@playwright/test';

test('homepage has correct visual appearance', async ({ page }) => {
  await page.goto('https://www.example.com');
  expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});

            

              
                Copy
              
            
          

Implementasi (Cypress dengan Cypress Image Snapshot):

            // cypress.config.js
const { defineConfig } = require('cypress')
const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      initPlugin(on, config);
      return config;
    },
  },
})

            

              
                Copy
              
            
          

            // visual.spec.js
import { compareSnapshotCommand } from 'cypress-image-snapshot/command'
addMatchImageSnapshotCommand();

describe('Visual Regression Testing', () => {
    it('Homepage Visual Test', () => {
        cy.visit('https://www.example.com')
        cy.get('body').toMatchImageSnapshot()
    })
})

            

              
                Copy
              
            
          

4. Pengujian Berbasis Data

Pengujian berbasis data melibatkan menjalankan pengujian yang sama dengan set data yang berbeda. Pola ini berguna untuk memverifikasi bahwa aplikasi Anda berperilaku benar dengan berbagai masukan dan skenario. Data dapat bersumber dari file CSV, file JSON, basis data, atau bahkan API eksternal.

Manfaat Pengujian Berbasis Data:

• Cakupan Tes yang Ditingkatkan: Pengujian berbasis data memungkinkan Anda untuk menguji berbagai skenario yang lebih luas dengan duplikasi kode yang minimal.
• Keterpeliharaan Tes yang Ditingkatkan: Pengujian berbasis data lebih mudah diperbarui dan dipelihara karena logika pengujian terpisah dari data pengujian.
• Keterbacaan Tes yang Ditingkatkan: Pengujian berbasis data seringkali lebih mudah dibaca dan dipahami karena data pengujian didefinisikan dengan jelas.

Implementasi (Playwright dengan data JSON):

            // data.json
[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  }
]

            

              
                Copy
              
            
          

            // data-driven.spec.ts
import { test, expect } from '@playwright/test';
import * as testData from './data.json';

testData.forEach((data) => {
  test(`login with ${data.username}`, async ({ page }) => {
    await page.goto('https://www.example.com/login'); // Ganti dengan halaman login Anda
    await page.locator('#username').fill(data.username);
    await page.locator('#password').fill(data.password);
    await page.locator('button[type="submit"]').click();

    // Tambahkan asersi untuk memverifikasi login berhasil
    // Contoh: await expect(page).toHaveURL(/.*dashboard/);
  });
});

            

              
                Copy
              
            
          

Implementasi (Cypress dengan data fixture):

            // cypress/fixtures/data.json
[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  }
]

            

              
                Copy
              
            
          

            // data-driven.spec.js
describe('Data-Driven Testing', () => {
  it('Login with multiple users', () => {
    cy.fixture('data.json').then((users) => {
      users.forEach((user) => {
        cy.visit('https://www.example.com/login') // Ganti dengan halaman login Anda
        cy.get('#username').type(user.username)
        cy.get('#password').type(user.password)
        cy.get('button[type="submit"]').click()

        // Tambahkan asersi untuk memverifikasi login berhasil
        // Contoh: cy.url().should('include', '/dashboard')
      })
    })
  })
})

            

              
                Copy
              
            
          

5. Pengujian API dalam Pengujian E2E

Mengintegrasikan pengujian API ke dalam pengujian E2E Anda dapat memberikan strategi pengujian yang lebih komprehensif dan andal. Pendekatan ini memungkinkan Anda untuk memverifikasi fungsionalitas backend yang menggerakkan aplikasi frontend Anda, memastikan bahwa data mengalir dengan benar dan bahwa UI mencerminkan keadaan yang diharapkan.

Manfaat Pengujian API dalam Pengujian E2E:

• Deteksi Dini Masalah Backend: Pengujian API dapat mengidentifikasi masalah backend di awal siklus pengembangan, mencegahnya berdampak pada frontend.
• Keandalan Tes yang Ditingkatkan: Pengujian API dapat memastikan bahwa backend berada dalam keadaan yang diketahui sebelum menjalankan pengujian frontend, mengurangi ketidakstabilan.
• Validasi End-to-End: Menggabungkan pengujian API dan UI memberikan validasi end-to-end yang lengkap dari fungsionalitas aplikasi Anda.

Implementasi (Playwright):

            // api.spec.ts
import { test, expect } from '@playwright/test';

test('create a new user via API and verify in UI', async ({ page, request }) => {
  // 1. Buat pengguna melalui API
  const response = await request.post('/api/users', {
    data: {
      name: 'John Doe',
      email: 'john.doe@example.com'
    }
  });
  expect(response.status()).toBe(201); // Asumsi 201 Created
  const responseBody = await response.json();
  const userId = responseBody.id;

  // 2. Navigasi ke daftar pengguna di UI
  await page.goto('/users'); // Ganti dengan halaman daftar pengguna Anda

  // 3. Verifikasi bahwa pengguna baru ditampilkan
  await expect(page.locator(`text=${'John Doe'}`)).toBeVisible();
});

            

              
                Copy
              
            
          

Implementasi (Cypress):

            // api.spec.js
describe('API and UI Integration Test', () => {
  it('Creates a user via API and verifies it in the UI', () => {
    // 1. Buat pengguna melalui API
    cy.request({
      method: 'POST',
      url: '/api/users', // Ganti dengan endpoint API Anda
      body: {
        name: 'Jane Doe',
        email: 'jane.doe@example.com'
      }
    }).then((response) => {
      expect(response.status).to.eq(201) // Asumsi 201 Created
      const userId = response.body.id

      // 2. Navigasi ke daftar pengguna di UI
      cy.visit('/users') // Ganti dengan halaman daftar pengguna Anda

      // 3. Verifikasi bahwa pengguna baru ditampilkan
      cy.contains('Jane Doe').should('be.visible')
    })
  })
})

            

              
                Copy
              
            
          

6. Pengujian Aksesibilitas

Pengujian aksesibilitas memastikan bahwa aplikasi Anda dapat digunakan oleh orang-orang dengan disabilitas. Jenis pengujian ini sangat penting untuk menciptakan pengalaman web yang inklusif dan setara. Pengujian aksesibilitas otomatis dapat membantu Anda mengidentifikasi masalah aksesibilitas umum, seperti teks alt yang hilang, kontras warna yang tidak memadai, dan masalah navigasi keyboard.

Alat untuk Pengujian Aksesibilitas:

• axe-core: Pustaka pengujian aksesibilitas open-source yang populer.
• axe DevTools: Ekstensi peramban yang memberikan umpan balik aksesibilitas secara real-time.
• Lighthouse: Alat kinerja dan audit web yang mencakup pemeriksaan aksesibilitas.

Implementasi (Playwright dengan axe-core):

            // accessibility.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('homepage should pass accessibility checks', async ({ page }) => {
  await page.goto('https://www.example.com');
  const axeBuilder = new AxeBuilder({ page });
  const accessibilityScanResults = await axeBuilder.analyze();
  expect(accessibilityScanResults.violations).toEqual([]); // Atau tangani pelanggaran dengan tepat
});

            

              
                Copy
              
            
          

Implementasi (Cypress dengan axe-core):

            // support/commands.js
import 'cypress-axe'

Cypress.Commands.add('checkA11y', (context, options) => {
  cy.configureAxe(options)
  cy.checkA11y(context, options)
})

            

              
                Copy
              
            
          

            // accessibility.spec.js
describe('Accessibility Testing', () => {
  it('Homepage should be accessible', () => {
    cy.visit('https://www.example.com')
    cy.injectAxe()
    cy.checkA11y()
  })
})

            

              
                Copy
              
            
          

7. Menangani Autentikasi dan Otorisasi

Autentikasi dan otorisasi adalah aspek penting dari keamanan aplikasi web. Menguji fitur-fitur ini secara menyeluruh sangat penting untuk melindungi data pengguna dan mencegah akses yang tidak sah.

Strategi untuk Menguji Autentikasi dan Otorisasi:

• Autentikasi berbasis UI: Simulasikan login pengguna melalui UI dan verifikasi bahwa aplikasi dengan benar mengautentikasi dan memberi otorisasi kepada pengguna.
• Autentikasi berbasis API: Gunakan permintaan API untuk mendapatkan token autentikasi dan kemudian gunakan token tersebut untuk mengakses sumber daya yang dilindungi.
• Pengujian Kontrol Akses Berbasis Peran (RBAC): Verifikasi bahwa pengguna dengan peran yang berbeda memiliki izin yang sesuai untuk mengakses berbagai bagian aplikasi.

Contoh (Playwright - Autentikasi berbasis UI):

            // auth.spec.ts
import { test, expect } from '@playwright/test';

test('login and access protected resource', async ({ page }) => {
  await page.goto('/login'); // Ganti dengan halaman login Anda
  await page.locator('#username').fill('valid_user');
  await page.locator('#password').fill('valid_password');
  await page.locator('button[type="submit"]').click();
  await expect(page).toHaveURL(/.*dashboard/); // Ganti dengan URL dasbor Anda

  // Sekarang akses sumber daya yang dilindungi
  await page.goto('/protected-resource'); // Ganti dengan URL sumber daya yang dilindungi Anda
  await expect(page.locator('h1')).toContainText('Protected Resource');
});

            

              
                Copy
              
            
          

Contoh (Cypress - Autentikasi berbasis API):

            // auth.spec.js
describe('Authentication Testing', () => {
  it('Logs in via API and accesses a protected resource', () => {
    // 1. Dapatkan token autentikasi dari API
    cy.request({
      method: 'POST',
      url: '/api/login', // Ganti dengan endpoint API login Anda
      body: {
        username: 'valid_user',
        password: 'valid_password'
      }
    }).then((response) => {
      expect(response.status).to.eq(200)
      const token = response.body.token

      // 2. Atur token di local storage atau cookie
      cy.setLocalStorage('authToken', token)

      // 3. Kunjungi sumber daya yang dilindungi, yang sekarang sudah terautentikasi
      cy.visit('/protected-resource') // Ganti dengan URL sumber daya yang dilindungi Anda

      // 4. Verifikasi bahwa pengguna dapat mengakses sumber daya
      cy.contains('Protected Content').should('be.visible')
    })
  })
})

            

              
                Copy
              
            
          

Praktik Terbaik untuk Memelihara Rangkaian Pengujian

Membangun rangkaian pengujian yang kuat dan andal hanyalah setengah dari perjuangan. Memeliharanya dari waktu ke waktu sama pentingnya. Berikut adalah beberapa praktik terbaik untuk menjaga rangkaian pengujian Playwright dan Cypress Anda dalam kondisi baik.

1. Jaga Tes Tetap Fokus dan Ringkas

Setiap pengujian harus fokus pada verifikasi satu bagian fungsionalitas yang spesifik. Hindari membuat pengujian yang terlalu kompleks yang mencoba mencakup terlalu banyak hal. Pengujian yang ringkas lebih mudah dipahami, di-debug, dan dipelihara.

2. Gunakan Nama Tes yang Bermakna

Berikan nama yang jelas dan deskriptif pada pengujian Anda yang secara akurat mencerminkan apa yang sedang diuji. Ini akan mempermudah pemahaman tujuan setiap pengujian dan mengidentifikasi kegagalan dengan cepat.

3. Hindari Nilai Hardcoding

Hindari melakukan hardcode nilai langsung ke dalam pengujian Anda. Sebaliknya, gunakan file konfigurasi atau variabel lingkungan untuk menyimpan data pengujian. Ini akan mempermudah pembaruan pengujian Anda ketika aplikasi berubah.

4. Tinjau dan Refactor Tes Secara Teratur

Jadwalkan tinjauan rutin terhadap rangkaian pengujian Anda untuk mengidentifikasi dan merefaktor setiap pengujian yang menjadi rapuh atau sulit dipelihara. Hapus pengujian apa pun yang tidak lagi relevan atau yang memberikan nilai terbatas.

5. Integrasikan dengan Pipeline CI/CD

Integrasikan pengujian Playwright dan Cypress Anda ke dalam pipeline CI/CD untuk memastikan bahwa pengujian dijalankan secara otomatis setiap kali ada perubahan kode. Ini akan membantu Anda menangkap bug lebih awal dan mencegah regresi masuk ke produksi.

6. Gunakan Alat Pelaporan dan Analisis Tes

Manfaatkan alat pelaporan dan analisis pengujian untuk melacak hasil pengujian, mengidentifikasi tren, dan menunjukkan area untuk perbaikan. Alat-alat ini dapat memberikan wawasan berharga tentang kesehatan dan stabilitas aplikasi Anda.

Kesimpulan

Menguasai pola pengujian tingkat lanjut dengan Playwright dan Cypress sangat penting untuk membangun aplikasi frontend yang kuat, dapat dipelihara, dan skalabel. Dengan menerapkan pola dan praktik terbaik yang diuraikan dalam panduan ini, Anda dapat secara signifikan meningkatkan kualitas dan keandalan rangkaian pengujian Anda dan memberikan pengalaman pengguna yang luar biasa. Terapkan teknik-teknik ini, dan Anda akan siap untuk menghadapi tantangan pengujian frontend modern. Ingatlah untuk menyesuaikan pola-pola ini dengan persyaratan proyek spesifik Anda dan terus berupaya untuk meningkatkan strategi pengujian Anda. Selamat menguji!