Share pengalaman implement Github Action di server local untuk testing Playwright

Sebelumnya Saya manfaatin pc lama saya menjadi server local menggunakan Ubuntu Server. Hari ini saya nyoba explore untuk nyoba github action biar bisa jalan di server local.

Secara umum menurut saya ada 4 Tahapan untuk menjalankan github action di server local.
1. Persiapan Server
2. Persiapan Repo
3. Install Github Action di server Local
4. Testing

1. Persiapan Server Local

Untuk server ini karena sudah saya install beberapa waktu yang lalu, saya hanya butuh install node saja. Cara installnya kebetulan saya menggunakan cara berikut sesuai documentasi resmi dari node js.

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.22.2".

# Download and install pnpm:
corepack enable pnpm

# Verify pnpm version:
pnpm -v

Setelah instalasi selesai, kebetulan saya ingin agar github action saya berjalan di ssd yang berbeda dengan sistem ubuntu (saya menggunakan 2 ssd). maka saya perlu set default directory pnpm ke data ssd tersebut. tujuannya agar semua di packages yang saya gunakan akan di simpan di folder tersebut.
Cara sebagai berikut.

# check folder directory pnpm yang aktif
pnpm store path 
#contoh result (~/.local/share/pnpm/store)

# Set directory store
pnpm config set store-dir /mnt/data_d/.pnpm-store

# Kita coba cek 
pnpm store path 
#contoh result (/mnt/data_d/.pnpm-store/v10)

setelah selesai kita lanjut ke next step.

2. Persiapan Repo

Untuk repo, saya create project playwright fresh pada laptop saya, cara create project

# Create Project Baru Playwright
sudo mkdir docu-test && cd docu-test
pnpm create playwright

# Getting started with writing end-to-end tests with Playwright:
# Initializing project in '.'
# ✔ Do you want to use TypeScript or JavaScript? · TypeScript
# ✔ Where to put your end-to-end tests? · test
# ✔ Add a GitHub Actions workflow? (Y/n) · true
# ✔ Install Playwright browsers (can be done manually via 'pnpm exec  playwright install')? (Y/n) · false

setelah selesai, kita langsung sesuaikan playwright.yml agar sesuai dengan github action

contoh playwright.yml yang saya gunakan.

name: Playwright Tests (Local Server)
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  test:
    timeout-minutes: 60
    # Menjalankan github runner di server local
    runs-on: self-hosted

    steps:
      - uses: actions/checkout@v5

      - uses: actions/setup-node@v6
        with:
          node-version: 22.22.2

      # Setup pnpm
      - uses: pnpm/action-setup@v3
        with:
          version: 10.33.0 # atau sesuai versi pnpm Anda

      # Install dependencies (pnpm otomatis pakai cache lokal)
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # Install Playwright Browsers
      # Note: Di server lokal, hanya mendownload jika versi berbeda
      - name: Install Playwright Browsers
        run: pnpm exec playwright install --with-deps

      - name: Run Playwright tests
        run: pnpm exec playwright test

      # Artifact tetap diupload ke cloud GitHub agar bisa Anda download lewat browser
      - uses: actions/upload-artifact@v5
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

setelah itu kita langsung publish repo kita ke github.

3. Install Github Action di server Local

• Buka repo yang kita publish sebelumnya di github.
• Terus buka menu Settings > Actions > Runners > New self-hosted runner.
• Pilih runner images Linux, setelah itu kita tinggal ikutin cara downloadnya dengan mengikuti intruksi yang diberikan. contoh dibawah ini :

# Download Images

# Create a folder
$ mkdir actions-runner && cd actions-runner# Download the latest runner package
$ curl -o actions-runner-linux-x64-2.333.1.tar.gz -L https://github.com/actions/runner/releases/download/v2.333.1/actions-runner-linux-x64-2.333.1.tar.gz# Optional: Validate the hash
$ echo "18f8f68ed1892854ff2ab1bab4fcaa2f5abeedc98093b6cb13638991725cab74  actions-runner-linux-x64-2.333.1.tar.gz" | shasum -a 256 -c# Extract the installer
$ tar xzf ./actions-runner-linux-x64-2.333.1.tar.gz


# Config

# Create the runner and start the configuration experience
$ ./config.sh --url https://github.com/fredysiswanto/docu-test --token ABCDEXXXXXXXXXXXX# Last step, run it!
$ ./run.sh


# Using your self-hosted runner
# Use this YAML in your workflow file for each job
runs-on: self-hosted

Kurang lebih seperti ini hasil install github action di server local saya. Biar mudah saya biarkan setting sesuai default.

Jika installasi dan config kita benar maka di github runner akan muncul server local kita. jika status masih offline tinggal kita jalankan $ ./run.sh. jika status sudah idle maka kita sudah bisa melanjutkan ke step testing.

4. Testing

Untuk testing github runner kita tinggal coba buat push baru ke branch master kita. seperti contoh dibawah ini saya mendapati beberapa kali failed dikarenakan perbedaan version packages di laptop dan server local saya. setelah di samakan versi pipeline runner saya bisa berjalan normal.

Kesimpulan

Setelah mencoba sendiri ternyata lumayan mudah tapi tetap bikin pusing. setelah percobaan ke2 installnya baru berjalan lancar. biasanya di project tinggal nyiapin yml dan request ke lead atau devops. Salah satu kelebihan pakai github runner self hosting adalah tidak perlu worry dengan limit dari github runner.

• Ternyata lumayan report maintenance server sendiri. hahaha
• Harus handle security sendiri
• Server Local harus standby jadi ada cost di listrik

Ok sekian tulisan saya kali ini. Terima kasih. Semoga bermanfaat.

Tech Stack
1. Github Action self Host
2. Playwright
3. Node Js
4. PNPM
5. PC untuk Server Local Ubuntu dan Laptop untuk Client