🚀 Membangun Framework Playwright Langkah Demi Langkah: Penyiapan Awal

Selamat datang! Dalam panduan komprehensif ini, kita akan menyelami proses membangun framework pengujian end-to-end yang kuat menggunakan Playwright. Playwright, kerangka kerja pengujian otomatisasi dari Microsoft, menawarkan cara yang andal dan efisien untuk menguji aplikasi web Anda di berbagai browser dan platform. Dengan membangun framework yang terstruktur dengan baik, kita dapat meningkatkan pemeliharaan kode pengujian, meningkatkan kemampuan penggunaan kembali, dan mengurangi duplikasi.

Artikel ini akan memandu Anda melalui langkah-langkah penyiapan awal framework Playwright. Kita akan membahas instalasi, konfigurasi dasar, dan struktur direktori penting. Panduan ini dirancang untuk penguji otomatisasi berpengalaman dan pemula yang ingin mempelajari Playwright.

Mengapa Membangun Framework Pengujian Playwright?

Sebelum kita mulai, mari kita pahami mengapa membangun framework pengujian sangat penting:

1. Pemeliharaan yang Ditingkatkan: Framework yang terstruktur dengan baik membuat kode pengujian lebih mudah dipelihara dan diperbarui.
2. Kemampuan Penggunaan Kembali: Komponen dan fungsi yang dapat digunakan kembali mengurangi duplikasi kode dan mempercepat pengembangan pengujian.
3. Skalabilitas: Framework yang dibangun dengan baik dapat menskalakan seiring pertumbuhan kebutuhan pengujian Anda.
4. Standarisasi: Framework memberlakukan standar kode, yang meningkatkan konsistensi di seluruh pengujian Anda.
5. Pelaporan yang Lebih Baik: Framework dapat diintegrasikan dengan alat pelaporan untuk memberikan wawasan yang komprehensif tentang hasil pengujian.

Persiapan Awal: Prasyarat

Sebelum kita memulai, pastikan Anda memiliki prasyarat berikut:

1. Node.js dan npm (Node Package Manager): Playwright membutuhkan Node.js. Unduh dan instal dari nodejs.org. npm biasanya disertakan dengan instalasi Node.js.
2. Kode Editor: Visual Studio Code (VS Code) sangat direkomendasikan karena dukungan yang sangat baik untuk JavaScript/TypeScript dan ekstensi Playwright.

Langkah 1: Membuat Proyek Node.js Baru

Pertama, kita akan membuat proyek Node.js baru yang akan menampung framework pengujian Playwright kita.

1. Buat Direktori Proyek: Buka terminal Anda dan buat direktori untuk proyek Anda.

   mkdir playwright-framework
   cd playwright-framework

2. Inisialisasi Proyek Node.js: Inisialisasi proyek Node.js baru menggunakan perintah:

   npm init -y

   Ini akan membuat file `package.json` di direktori proyek Anda dengan konfigurasi default.

Langkah 2: Menginstal Playwright

Sekarang, mari kita instal Playwright. Playwright mendukung beberapa bahasa, tetapi kita akan menggunakan JavaScript dalam panduan ini.

1. Instal Paket Playwright: Gunakan npm untuk menginstal paket Playwright dan browser yang diperlukan.

   npm install -D @playwright/test

   Ini akan menginstal Playwright sebagai dependensi pengembangan.

2. Instal Browser: Setelah Playwright diinstal, Anda perlu menginstal browser yang ingin Anda uji. Playwright mendukung Chromium, Firefox, dan WebKit. Anda dapat menginstal semua browser atau hanya yang Anda butuhkan.

   npx playwright install

   Atau, untuk menginstal browser tertentu:

   npx playwright install chromium
   npx playwright install firefox
   npx playwright install webkit

Langkah 3: Mengkonfigurasi Playwright

Setelah menginstal Playwright, kita perlu mengkonfigurasinya untuk proyek kita. Playwright menggunakan file `playwright.config.js` (atau `playwright.config.ts`) untuk konfigurasi.

1. Buat File `playwright.config.js`: Buat file bernama `playwright.config.js` di direktori root proyek Anda.
2. Konfigurasi Dasar: Tambahkan konfigurasi dasar ke file `playwright.config.js`.

   // @ts-check
   const { defineConfig, devices } = require('@playwright/test');
   
   /**
    * @see https://playwright.dev/docs/test-configuration
    */
   module.exports = defineConfig({
     testDir: './tests',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the code. */
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
     retries: process.env.CI ? 2 : 0,
     /* Opt out of parallel tests on CI. */
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: 'html',
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
       /* Base URL to use in actions like `await page.goto('/')`. */
       // baseURL: 'http://127.0.0.1:3000',
   
       /* Collect trace when retries are used. See https://playwright.dev/docs/trace-viewer */
       trace: 'on-first-retry',
     },
   
     /* Configure projects for major browsers */
     projects: [
       {
         name: 'chromium',
         use: { ...devices['Desktop Chrome'] },
       },
   
       {
         name: 'firefox',
         use: { ...devices['Desktop Firefox'] },
       },
   
       {
         name: 'webkit',
         use: { ...devices['Desktop Safari'] },
       },
   
       /* Test against mobile viewports. */
       // {
       //   name: 'Mobile Chrome',
       //   use: { ...devices['Pixel 5'] },
       // },
       // {
       //   name: 'Mobile Safari',
       //   use: { ...devices['iPhone 12'] },
       // },
   
       /* Test against branded browsers. */
       // {
       //   name: 'Microsoft Edge',
       //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
       // },
       // {
       //   name: 'Google Chrome',
       //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
       // },
     ],
   
     /* Run your local dev server before starting the tests */
     // webServer: {
     //   command: 'npm run start',
     //   url: 'http://127.0.0.1:3000',
     //   reuseExistingServer: !process.env.CI,
     // },
   });
   

3. Penjelasan Konfigurasi:
   • `testDir`: Menentukan direktori tempat file pengujian Anda berada. Secara default, ini diatur ke `./tests`.
   • `fullyParallel`: Mengaktifkan eksekusi pengujian paralel untuk mempercepat waktu eksekusi pengujian.
   • `forbidOnly`: Mencegah penggunaan `test.only` dalam kode, yang memastikan bahwa semua pengujian dieksekusi pada CI.
   • `retries`: Menentukan berapa kali untuk mencoba kembali pengujian yang gagal.
   • `workers`: Menentukan jumlah pekerja paralel untuk menjalankan pengujian.
   • `reporter`: Menentukan reporter yang digunakan untuk menghasilkan hasil pengujian. `’html’` menghasilkan laporan HTML yang komprehensif.
   • `use`: Menampung opsi konfigurasi bersama untuk semua proyek, seperti `baseURL` dan `trace`.
   • `projects`: Mendefinisikan berbagai proyek pengujian untuk browser dan konfigurasi yang berbeda.
   • `webServer`: Digunakan untuk memulai server web lokal sebelum menjalankan pengujian.

Langkah 4: Membuat Struktur Direktori Dasar

Struktur direktori yang terstruktur dengan baik penting untuk organisasi dan pemeliharaan. Berikut adalah struktur direktori dasar yang dapat Anda gunakan:

playwright-framework/
├── playwright.config.js
├── package.json
├── package-lock.json
├── tests/
│   ├── example.spec.js
├── pages/
│   ├── base.page.js
│   └── login.page.js
├── utils/
│   ├── api.utils.js
│   └── data.utils.js
├── fixtures/
│   └── custom.fixtures.js

Berikut penjelasan dari setiap direktori:

• `playwright.config.js`: File konfigurasi Playwright yang kita buat sebelumnya.
• `package.json` dan `package-lock.json`: File yang mengelola dependensi Node.js.
• `tests`: Berisi file pengujian Anda.
• `pages`: Berisi objek halaman, yang mewakili halaman web dan interaksi terkaitnya.
• `utils`: Berisi fungsi utilitas, seperti utilitas API dan generator data.
• `fixtures`: Berisi custom fixtures untuk Playwright.

Langkah 5: Membuat Contoh Pengujian

Mari kita buat contoh pengujian untuk memastikan bahwa Playwright telah dikonfigurasi dengan benar.

1. Buat File Pengujian: Di dalam direktori `tests`, buat file bernama `example.spec.js`.
2. Tambahkan Kode Pengujian: Tambahkan kode berikut ke `example.spec.js`:

   const { test, expect } = require('@playwright/test');
   
   test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
     await page.goto('https://playwright.dev/');
   
     // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle(/Playwright/);
   
     // create a locator
     const getStarted = page.locator('text=Get Started');
   
     // Expect an attribute "to be strictly equal" to the expected value.
     await expect(getStarted).toHaveAttribute('href', '/docs/intro');
   
     // Click the get started link.
     await getStarted.click();
   
     // Expects the URL to contain intro.
     await expect(page).toHaveURL(/.*intro/);
   });
   

3. Jalankan Pengujian: Jalankan pengujian menggunakan perintah:

   npx playwright test

   Ini akan menjalankan pengujian di semua browser yang dikonfigurasi dan menghasilkan laporan HTML.

Langkah 6: Membuat Objek Halaman Dasar

Objek halaman adalah pola desain yang memodelkan halaman web sebagai kelas. Ini memungkinkan kita untuk merangkum elemen halaman dan interaksi terkaitnya, membuat kode pengujian kita lebih mudah dipelihara dan dapat digunakan kembali.

1. Buat File `base.page.js`: Di dalam direktori `pages`, buat file bernama `base.page.js`.
2. Tambahkan Kode Dasar Objek Halaman: Tambahkan kode berikut ke `base.page.js`:

   class BasePage {
     constructor(page) {
       this.page = page;
     }
   
     async navigate(url) {
       await this.page.goto(url);
     }
   
     async getTitle() {
       return await this.page.title();
     }
   }
   
   module.exports = BasePage;
   

   Kelas `BasePage` ini menyediakan fungsionalitas dasar seperti navigasi dan mendapatkan judul halaman.

3. Buat File `login.page.js`: Di dalam direktori `pages`, buat file bernama `login.page.js`.
4. Tambahkan Kode Objek Halaman Login: Tambahkan kode berikut ke `login.page.js`:

   const BasePage = require('./base.page');
   
   class LoginPage extends BasePage {
     constructor(page) {
       super(page);
       this.usernameInput = '#username';
       this.passwordInput = '#password';
       this.loginButton = '#login';
     }
   
     async login(username, password) {
       await this.page.fill(this.usernameInput, username);
       await this.page.fill(this.passwordInput, password);
       await this.page.click(this.loginButton);
     }
   }
   
   module.exports = LoginPage;
   

   Kelas `LoginPage` ini memperluas `BasePage` dan menyediakan fungsionalitas khusus untuk halaman login, seperti mengisi formulir login dan mengklik tombol login.

Langkah 7: Membuat Utilitas Dasar

Fungsi utilitas membantu Anda mengelola tugas-tugas umum seperti berinteraksi dengan API atau menghasilkan data pengujian.

1. Buat File `api.utils.js`: Di dalam direktori `utils`, buat file bernama `api.utils.js`.
2. Tambahkan Utilitas API: Tambahkan kode berikut ke `api.utils.js`:

   const { request } = require('@playwright/test');
   
   class ApiUtils {
     constructor(baseURL, storageStatePath) {
       this.baseURL = baseURL;
       this.storageStatePath = storageStatePath;
     }
   
     async getToken(username, password) {
       const apiContext = await request.newContext({
         baseURL: this.baseURL,
         storageState: this.storageStatePath,
       });
   
       const response = await apiContext.post('/auth/login', {
         data: {
           username: username,
           password: password,
         },
       });
   
       const responseBody = await response.json();
       const token = responseBody.token;
       return token;
     }
   }
   
   module.exports = ApiUtils;
   

   Kelas `ApiUtils` ini menyediakan fungsi untuk mendapatkan token autentikasi melalui API.

Langkah 8: Membuat Custom Fixtures

Playwright memungkinkan Anda membuat custom fixtures yang dapat digunakan kembali di seluruh pengujian Anda. Ini membantu Anda mengelola status pengujian dan mengurangi duplikasi kode.

1. Buat File `custom.fixtures.js`: Di dalam direktori `fixtures`, buat file bernama `custom.fixtures.js`.
2. Tambahkan Custom Fixtures: Tambahkan kode berikut ke `custom.fixtures.js`:

   const base = require('@playwright/test');
   const LoginPage = require('../pages/login.page');
   
   exports.test = base.test.extend({
     loginPage: async ({ page }, use) => {
       const loginPage = new LoginPage(page);
       await use(loginPage);
     },
   });
   exports.expect = base.expect;
   

   Fixture ini menyediakan instance `LoginPage` ke pengujian Anda, sehingga memudahkan untuk berinteraksi dengan halaman login.

3. Gunakan Custom Fixture: Di file pengujian Anda (`example.spec.js`), impor custom fixture dan gunakan di pengujian Anda.

   const { test, expect } = require('./fixtures/custom.fixtures');
   
   test('login to application', async ({ page, loginPage }) => {
     await page.goto('https://example.com/login');
     await loginPage.login('username', 'password');
     // Add assertions here
   });
   

Langkah 9: Mengintegrasikan dengan CI/CD

Mengintegrasikan framework Playwright Anda dengan pipeline CI/CD (Continuous Integration/Continuous Deployment) sangat penting untuk otomatisasi pengujian dan pengiriman berkelanjutan. Berikut adalah langkah-langkah dasar untuk diintegrasikan dengan CI/CD menggunakan GitHub Actions:

1. Buat File Alur Kerja GitHub Actions: Buat direktori `.github/workflows` di root proyek Anda. Di dalam direktori ini, buat file bernama `playwright.yml`.
2. Tambahkan Konfigurasi Alur Kerja: Tambahkan konfigurasi berikut ke `playwright.yml`:

   name: Playwright Tests
   
   on:
     push:
       branches: [ "main" ]
     pull_request:
       branches: [ "main" ]
   
   jobs:
     test:
       timeout-minutes: 60
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - uses: actions/setup-node@v3
           with:
             node-version: 18
         - name: Install dependencies
           run: npm install
         - name: Install Playwright Browsers
           run: npx playwright install --with-deps
         - name: Run Playwright tests
           run: npx playwright test
         - name: Upload Playwright report
           if: always()
           uses: actions/upload-artifact@v3
           with:
             name: playwright-report
             path: playwright-report/
             retention-days: 30
   

   Alur kerja ini melakukan langkah-langkah berikut:

   • Checkout: Memeriksa kode.
   • Setup Node.js: Menyiapkan lingkungan Node.js.
   • Install Dependencies: Menginstal dependensi proyek.
   • Install Playwright Browsers: Menginstal browser Playwright yang diperlukan.
   • Run Playwright Tests: Menjalankan pengujian Playwright.
   • Upload Playwright Report: Mengunggah laporan Playwright sebagai artefak.
3. Commit dan Push: Commit dan push perubahan ke repositori GitHub Anda.

GitHub Actions sekarang akan secara otomatis menjalankan pengujian Playwright Anda setiap kali kode didorong ke cabang `main` atau pull request dibuat ke cabang `main`.

Praktik Terbaik untuk Membangun Framework Playwright

Berikut adalah beberapa praktik terbaik untuk dipertimbangkan saat membangun framework Playwright Anda:

1. Gunakan Objek Halaman: Objek halaman membantu mengelola elemen halaman dan interaksi terkaitnya, membuat kode pengujian Anda lebih mudah dipelihara dan dapat digunakan kembali.
2. Gunakan Custom Fixtures: Custom fixtures membantu mengelola status pengujian dan mengurangi duplikasi kode.
3. Gunakan Fungsi Utilitas: Fungsi utilitas membantu mengelola tugas-tugas umum seperti berinteraksi dengan API atau menghasilkan data pengujian.
4. Gunakan Data-Driven Testing: Data-driven testing memungkinkan Anda menjalankan pengujian yang sama dengan set data yang berbeda, yang mengurangi duplikasi kode dan meningkatkan cakupan pengujian.
5. Gunakan Parallel Execution: Parallel execution mempercepat waktu eksekusi pengujian Anda.
6. Gunakan Pelaporan: Gunakan pelaporan untuk memberikan wawasan yang komprehensif tentang hasil pengujian.
7. Ikuti Standar Kode: Ikuti standar kode untuk meningkatkan konsistensi dan kemampuan membaca kode.
8. Lakukan Tinjauan Kode: Lakukan tinjauan kode untuk mengidentifikasi masalah potensial dan memastikan bahwa kode memenuhi standar kualitas.

Tips Pemecahan Masalah Umum

Berikut adalah beberapa tips pemecahan masalah umum yang dapat membantu Anda memecahkan masalah dengan framework Playwright Anda:

1. Periksa Pesan Kesalahan: Baca pesan kesalahan dengan cermat untuk memahami penyebab masalahnya.
2. Gunakan Mode Debug: Gunakan mode debug Playwright untuk menelusuri kode pengujian Anda dan memeriksa status aplikasi Anda.

   npx playwright test --debug

3. Gunakan Trace Viewer: Gunakan trace viewer Playwright untuk menganalisis eksekusi pengujian Anda dan mengidentifikasi masalah potensial.

   npx playwright show-trace trace.zip

4. Periksa Konfigurasi: Periksa konfigurasi Playwright Anda untuk memastikan bahwa itu benar.
5. Periksa Dependensi: Pastikan bahwa semua dependensi yang diperlukan telah diinstal.
6. Cari Online: Cari online untuk solusi untuk masalah Anda.
7. Minta Bantuan: Minta bantuan dari komunitas Playwright.

Kesimpulan

Dalam panduan ini, kita telah membahas langkah-langkah untuk menyiapkan framework pengujian Playwright. Kita telah membahas instalasi, konfigurasi, struktur direktori, objek halaman, utilitas, custom fixtures, integrasi CI/CD, praktik terbaik, dan tips pemecahan masalah. Dengan mengikuti langkah-langkah ini, Anda dapat membangun framework pengujian yang kuat dan dapat dipelihara yang akan membantu Anda menguji aplikasi web Anda secara efektif.

Semoga panduan ini bermanfaat. Jangan ragu untuk bertanya jika Anda memiliki pertanyaan!

Langkah Selanjutnya

Setelah Anda menyiapkan dasar dari framework Playwright Anda, Anda dapat mempertimbangkan langkah-langkah berikut:

• Implementasikan lebih banyak objek halaman untuk berbagai bagian aplikasi Anda.
• Tambahkan lebih banyak utilitas untuk penanganan data dan interaksi API.
• Gunakan data-driven testing untuk menjalankan pengujian dengan berbagai set data.
• Integrasikan dengan alat pelaporan untuk analisis hasil pengujian yang lebih baik.
• Jelajahi fitur lanjutan Playwright seperti emulasi perangkat, penanganan geolocation, dan simulasi jaringan.

Selamat menguji dengan Playwright!