🌍 Membangun Playwright Framework Langkah Demi Langkah – Pengaturan Variabel Lingkungan

Dalam era otomasi pengujian yang serba cepat, Playwright muncul sebagai alat yang ampuh untuk mengotomatiskan browser lintas platform. Untuk memanfaatkan potensi Playwright sepenuhnya, sangat penting untuk membangun kerangka kerja pengujian yang kuat. Bagian penting dari kerangka kerja tersebut adalah penanganan variabel lingkungan yang tepat. Artikel ini akan memandu Anda langkah demi langkah dalam menyiapkan variabel lingkungan dalam kerangka kerja Playwright Anda, memastikan pengujian yang fleksibel, dapat dipelihara, dan aman.

Mengapa Variabel Lingkungan Penting dalam Kerangka Kerja Playwright?

Variabel lingkungan menyediakan cara yang fleksibel dan aman untuk mengonfigurasi aplikasi dan pengujian Anda tanpa mengubah kode itu sendiri. Mereka sangat berharga dalam konteks kerangka kerja Playwright karena beberapa alasan:

1. Konfigurasi yang Dapat Dikonfigurasi: Variabel lingkungan memungkinkan Anda mengubah perilaku pengujian Anda berdasarkan lingkungan tempat pengujian berjalan (misalnya, pengembangan, pementasan, produksi).
2. Keamanan: Mereka memungkinkan Anda untuk menyimpan informasi sensitif, seperti kunci API dan kredensial database, dengan aman di luar basis kode Anda.
3. Portabilitas: Kerangka kerja Anda menjadi lebih portabel karena konfigurasi bersifat eksternal dan dapat dengan mudah disesuaikan dengan lingkungan yang berbeda.
4. Pemeliharaan: Mengubah konfigurasi menjadi sederhana karena Anda tidak perlu memodifikasi kode.
5. Reproduksibilitas: Dengan mengelola variabel lingkungan secara terpusat, Anda dapat memastikan bahwa pengujian berjalan dengan konfigurasi yang konsisten di berbagai lingkungan.

Kerangka Kerja yang Akan Kita Bangun

Dalam tutorial ini, kita akan membangun kerangka kerja Playwright dasar yang terstruktur dengan baik yang menggabungkan variabel lingkungan. Kerangka kerja ini akan mencakup:

1. Struktur Direktori: Tata letak yang terorganisir untuk pengujian, konfigurasi, dan utilitas.
2. Manajemen Variabel Lingkungan: Cara standar untuk memuat dan mengakses variabel lingkungan.
3. File Konfigurasi: Konfigurasi khusus lingkungan yang dikelola secara terpusat.
4. Pengujian Contoh: Contoh pengujian Playwright yang menggunakan variabel lingkungan.

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki hal berikut:

1. Node.js dan npm (Node Package Manager): Pastikan Node.js dan npm diinstal di sistem Anda. Anda dapat mengunduhnya dari situs web Node.js (https://nodejs.org).
2. Editor Kode: Editor kode seperti Visual Studio Code, Sublime Text, atau Atom.
3. Pengetahuan Dasar JavaScript: Pemahaman tentang JavaScript diperlukan.
4. Playwright Terpasang: Jika Anda belum menginstal Playwright, Anda dapat melakukannya menggunakan perintah berikut: npm install -D @playwright/test

Langkah 1: Mengatur Struktur Direktori Proyek

Mulailah dengan membuat struktur direktori untuk kerangka kerja Playwright Anda. Ini akan membantu Anda untuk menjaga kode Anda terorganisir dan mudah dikelola.

  
  my-playwright-framework/
  ├── tests/              # Test files
  ├── config/             # Environment configuration files
  ├── utils/              # Utility functions
  ├── playwright.config.js # Playwright configuration file
  ├── package.json        # Project dependencies
  └── .env                # Environment variables (optional)
  
  

1. Buat Direktori Proyek: Buat direktori baru bernama `my-playwright-framework`.
2. Buat Subdirektori: Di dalam direktori proyek, buat direktori berikut: `tests`, `config`, dan `utils`.
3. Buat File: Buat file berikut: `playwright.config.js`, `package.json`, dan `.env` (opsional).

Langkah 2: Inisialisasi Proyek Node.js

Inisialisasi proyek Node.js Anda dengan membuat file `package.json`. Buka terminal Anda, arahkan ke direktori proyek Anda, dan jalankan perintah berikut:

  
  npm init -y
  
  

Ini akan membuat file `package.json` dengan nilai default. Anda kemudian dapat memodifikasi file ini sesuai kebutuhan.

Langkah 3: Instal Playwright dan dotenv

Instal Playwright dan `dotenv` sebagai dependensi pengembangan. `dotenv` adalah paket tanpa dependensi yang memuat variabel lingkungan dari file `.env` ke `process.env`.

  
  npm install -D @playwright/test dotenv
  
  

Ini akan menginstal Playwright dan `dotenv` dan menambahkan mereka ke `devDependencies` dari file `package.json` Anda.

Langkah 4: Konfigurasikan Playwright

Buat file `playwright.config.js` di direktori proyek Anda. File ini digunakan untuk mengonfigurasi Playwright. Berikut adalah contoh konfigurasi dasar:

  
  // playwright.config.js
  const { defineConfig } = require('@playwright/test');

  module.exports = defineConfig({
    use: {
      baseURL: process.env.BASE_URL || 'https://example.com', // Default base URL
      headless: process.env.HEADLESS === 'true', // Run in headless mode based on environment variable
      viewport: { width: 1280, height: 720 },
    },
    testDir: 'tests',
    reporter: 'html',
  });
  
  

Dalam konfigurasi ini:

1. `baseURL`: URL dasar untuk pengujian Anda. Itu mengambil nilainya dari variabel lingkungan `BASE_URL`. Jika variabel lingkungan tidak diatur, maka default ke `https://example.com`.
2. `headless`: Menentukan apakah pengujian berjalan dalam mode headless. Ini mengambil nilainya dari variabel lingkungan `HEADLESS`. Jika variabel lingkungan tidak diatur, maka default ke `false` (berjalan dalam mode GUI).
3. `viewport`: Mengatur ukuran viewport untuk pengujian.
4. `testDir`: Menentukan direktori tempat file pengujian berada.
5. `reporter`: Menentukan reporter yang akan digunakan untuk hasil pengujian.

Langkah 5: Membuat File .env (Opsional)

Buat file `.env` di direktori proyek Anda. File ini digunakan untuk menyimpan variabel lingkungan Anda. Ini adalah file opsional, tetapi direkomendasikan untuk menyimpan konfigurasi khusus lingkungan.

  
  # .env
  BASE_URL=https://staging.example.com
  API_KEY=your_secret_api_key
  HEADLESS=true
  
  

Penting: Tambahkan file `.env` ke file `.gitignore` Anda untuk mencegahnya melakukan commit ke repositori Anda. Ini mencegah informasi sensitif terpapar.

Langkah 6: Memuat Variabel Lingkungan

Untuk memuat variabel lingkungan dari file `.env`, Anda perlu memerlukan paket `dotenv` di file Anda. Tambahkan baris berikut ke bagian atas file `playwright.config.js` Anda:

  
  require('dotenv').config();
  
  

Baris ini membaca file `.env` dan mengatur variabel lingkungan di `process.env`.

Langkah 7: Membuat File Konfigurasi Khusus Lingkungan

Meskipun Anda dapat menggunakan file `.env`, cara yang lebih terstruktur adalah membuat file konfigurasi khusus lingkungan di direktori `config`.

1. Buat File Konfigurasi: Buat file JavaScript di direktori `config` untuk setiap lingkungan yang ingin Anda dukung (misalnya, `config/development.js`, `config/staging.js`, `config/production.js`).
2. Tentukan Konfigurasi: Dalam setiap file, ekspor objek yang berisi konfigurasi khusus untuk lingkungan tersebut.

Contoh:

  
  // config/development.js
  module.exports = {
    baseURL: 'http://localhost:3000',
    apiKey: 'dev_api_key',
    headless: false,
  };
  
  

  
  // config/staging.js
  module.exports = {
    baseURL: 'https://staging.example.com',
    apiKey: 'staging_api_key',
    headless: true,
  };
  
  

  
  // config/production.js
  module.exports = {
    baseURL: 'https://example.com',
    apiKey: process.env.PRODUCTION_API_KEY, // Get from environment variable in production
    headless: true,
  };
  
  

Langkah 8: Memuat Konfigurasi Khusus Lingkungan

Untuk memuat konfigurasi khusus lingkungan, Anda perlu menentukan lingkungan saat ini menggunakan variabel lingkungan dan kemudian memuat file konfigurasi yang sesuai.

Modifikasi file `playwright.config.js` Anda sebagai berikut:

  
  // playwright.config.js
  require('dotenv').config();
  const { defineConfig } = require('@playwright/test');

  const environment = process.env.NODE_ENV || 'development'; // Default to development if NODE_ENV is not set
  const config = require(`./config/${environment}`);

  module.exports = defineConfig({
    use: {
      ...config, // Merge environment-specific configuration
      viewport: { width: 1280, height: 720 },
    },
    testDir: 'tests',
    reporter: 'html',
  });
  
  

Dalam kode ini:

1. `environment`: Ini menentukan lingkungan saat ini dengan membaca variabel lingkungan `NODE_ENV`. Jika `NODE_ENV` tidak diatur, default ke `development`.
2. `config`: Ini memuat file konfigurasi yang sesuai berdasarkan lingkungan.
3. `…config`: Ini menggunakan operator spread untuk menggabungkan konfigurasi khusus lingkungan ke dalam objek `use` dari konfigurasi Playwright.

Untuk menjalankan pengujian Anda dengan lingkungan tertentu, Anda perlu mengatur variabel lingkungan `NODE_ENV` sebelum menjalankan pengujian. Misalnya:

  
  NODE_ENV=staging npm test
  
  

Langkah 9: Membuat Uji Coba Contoh

Buat file uji coba di direktori `tests` (misalnya, `tests/example.spec.js`). Uji coba ini akan menggunakan variabel lingkungan untuk menguji aplikasi.

  
  // tests/example.spec.js
  const { test, expect } = require('@playwright/test');

  test('Verify homepage title', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle('Example Domain');
  });

  test('Access API with API key', async ({ request }) => {
    const apiKey = process.env.API_KEY || 'default_api_key'; // Use default if not set
    const response = await request.get('/api/data', {
      headers: {
        'X-API-Key': apiKey,
      },
    });
    expect(response.status()).toBe(200);
  });
  
  

Dalam pengujian ini:

1. `page.goto(‘/’)`: Ini membuka URL dasar yang dikonfigurasi di `playwright.config.js` (yang mengambil nilainya dari variabel lingkungan `BASE_URL`).
2. `process.env.API_KEY`: Ini mengakses variabel lingkungan `API_KEY` untuk digunakan dalam header permintaan API. Jika `API_KEY` tidak diatur, itu menggunakan nilai default.

Langkah 10: Menjalankan Pengujian

Untuk menjalankan pengujian Anda, tambahkan skrip ke file `package.json` Anda:

  
  // package.json
  {
    "name": "my-playwright-framework",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "npx playwright test"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@playwright/test": "^1.36.2",
      "dotenv": "^16.3.1"
    }
  }
  
  

Kemudian, jalankan pengujian menggunakan perintah berikut:

  
  npm test
  
  

Playwright akan menjalankan pengujian Anda menggunakan konfigurasi yang ditentukan di `playwright.config.js` dan variabel lingkungan yang diatur.

Praktik Terbaik untuk Mengelola Variabel Lingkungan

Berikut adalah beberapa praktik terbaik untuk mengelola variabel lingkungan dalam kerangka kerja Playwright Anda:

1. Jangan Pernah Melakukan Commit Informasi Sensitif: Jangan pernah melakukan commit file `.env` atau informasi sensitif lainnya ke repositori Anda. Gunakan file `.gitignore` untuk mengecualikan file-file ini.
2. Gunakan Variabel Lingkungan Khusus Lingkungan: Gunakan variabel lingkungan khusus lingkungan untuk memvariasikan konfigurasi pengujian Anda berdasarkan lingkungan tempat pengujian berjalan.
3. Sediakan Nilai Default: Sediakan nilai default untuk variabel lingkungan dalam kode Anda untuk memastikan bahwa pengujian Anda tetap berjalan meskipun variabel lingkungan tidak diatur.
4. Dokumentasikan Variabel Lingkungan: Dokumentasikan semua variabel lingkungan yang digunakan dalam kerangka kerja Anda, termasuk tujuan dan nilai yang diharapkan. Ini akan membantu orang lain untuk memahami dan menggunakan kerangka kerja Anda.
5. Gunakan Paket Manajemen Konfigurasi: Pertimbangkan untuk menggunakan paket manajemen konfigurasi seperti `config` atau `convict` untuk mengelola variabel lingkungan dan konfigurasi lain dengan cara yang lebih terstruktur.
6. Validasi Variabel Lingkungan: Validasi variabel lingkungan pada waktu startup untuk memastikan bahwa mereka diatur ke nilai yang benar. Ini dapat membantu Anda untuk mendeteksi masalah konfigurasi di awal proses pengembangan.
7. Gunakan Vault Rahasia: Untuk variabel lingkungan sensitif, pertimbangkan untuk menggunakan vault rahasia seperti HashiCorp Vault atau AWS Secrets Manager untuk menyimpan dan mengelola rahasia dengan aman.
8. Enkripsi Data Sensitif: Enkripsi setiap data sensitif yang disimpan dalam variabel lingkungan, seperti kata sandi atau kunci API.

Tips Tambahan

• Menggunakan GitHub Actions Secrets: Saat menjalankan pengujian Anda di CI/CD pipeline seperti GitHub Actions, gunakan GitHub Actions Secrets untuk menyimpan variabel lingkungan sensitif Anda. Ini menyediakan cara yang aman untuk menyimpan dan mengelola rahasia tanpa mengeksposnya dalam kode Anda.
• Mengelola Konfigurasi dengan JSON: Untuk konfigurasi yang lebih kompleks, pertimbangkan untuk menggunakan file JSON untuk menyimpan konfigurasi khusus lingkungan Anda. Anda kemudian dapat memuat file JSON ini ke dalam variabel lingkungan Anda.
• Menggunakan Skrip npm: Gunakan skrip npm untuk menyederhanakan tugas umum, seperti menjalankan pengujian dengan lingkungan tertentu. Misalnya, Anda dapat membuat skrip npm yang mengatur variabel lingkungan `NODE_ENV` dan kemudian menjalankan pengujian.

Kesimpulan

Menyiapkan variabel lingkungan dengan benar dalam kerangka kerja Playwright Anda sangat penting untuk membangun pengujian yang fleksibel, dapat dipelihara, dan aman. Dengan mengikuti langkah-langkah yang diuraikan dalam artikel ini, Anda dapat membangun kerangka kerja Playwright yang terstruktur dengan baik yang menggunakan variabel lingkungan untuk mengonfigurasi pengujian Anda berdasarkan lingkungan tempat pengujian berjalan. Ingatlah untuk selalu mengikuti praktik terbaik untuk mengelola variabel lingkungan untuk memastikan bahwa informasi sensitif Anda aman dan kerangka kerja Anda mudah dikelola.

Dengan pemahaman yang solid tentang bagaimana cara mengatur dan mengelola variabel lingkungan, Anda dapat secara signifikan meningkatkan efisiensi dan keandalan upaya otomasi pengujian Playwright Anda. Ini memungkinkan Anda untuk beradaptasi dengan mudah ke lingkungan yang berbeda, mengelola konfigurasi dengan aman, dan menjaga basis kode Anda bersih dan terorganisir.

Semoga artikel ini membantu Anda dalam perjalanan Anda untuk membangun kerangka kerja Playwright yang kuat. Selamat menguji!