Otomasi Validasi UI Qt Beta Audacity 4.0 di pipeline Dev memerlukan langkah praktis agar perubahan antarmuka tidak merusak pengalaman pengguna. Artikel ini langsung menjelaskan kebutuhan fondasi: menyiapkan lingkungan Linux, mengotomatiskan snapshot visual, mengintegrasikan linting UI dan aksesibilitas, serta memicu regression test sebelum rilis alat audio.

Menyiapkan Lingkungan Linux untuk Automasi UI

Karena Audacity 4.0 beta menggunakan Qt dan QtQuick, pilih distribusi Linux yang mendukung versi Qt yang sama dengan build official (misal Ubuntu 22.04 atau Fedora terdekat). Instal paket yang diperlukan dengan apt atau dnf sehingga pipeline memiliki dependensi GUI dan alat bantu screenshot.

  • Qt runtime: sertakan libqt5widgets5, libqt5gui5, dan qt5-default agar aplikasi dan alat QtTest dapat dijalankan.
  • Virtual display: gunakan Xvfb untuk menjalankan Audacity headless di CI apabila tidak ada tampilan fisik.
  • Alat automasi GUI: pasang xdotool, gnome-screenshot, dan imagemagick untuk menangkap snapshot visual dan melakukan perbandingan.

Pastikan pipeline membuat display virtual dengan Xvfb :99 -screen 0 1280x720x24 sebelum menjalankan skrip.

Mengotomatiskan Snapshot Visual dan Validasi

Bagian inti otomasi adalah menangkap kondisi UI setelah state tertentu dan membandingkannya dengan referensi. Gunakan alat seperti xdotool untuk memposisikan jendela dan gnome-screenshot atau scrot untuk mengambil gambar.

Skrip snapshot dasar

Contoh skrip Bash ini dijalankan setelah Audacity mencapai state yang diinginkan (misalnya setelah membuka proyek test.wav):

#!/bin/bash
set -euo pipefail
DISPLAY=:99
AUDACITY_BIN=/opt/audacity/bin/audacity
OUTPUT_DIR=${CI_PROJECT_DIR}/artifacts/ui-snapshots
mkdir -p "$OUTPUT_DIR"
xdotool search --class Audacity windowactivate %1
sleep 2
gnome-screenshot -w -f "$OUTPUT_DIR/audacity-ui.png"

Skrip memastikan window Audacity dipilih, menunggu render, serta menyimpan snapshot di direktori artefak yang bisa diukur nanti.

Perbandingan visual

Gunakan ImageMagick compare atau alat seperti perceptualdiff untuk membandingkan snapshot dengan baseline:

compare -metric AE baseline/audacity-ui.png current/audacity-ui.png diff/audacity-ui-diff.png

Nilai kesalahan (misal jumlah piksel berbeda) dapat dijadikan metrik kegagalan visual. Atur ambang batas yang realistis (misalnya < 500 pixel) dan tambahkan pengecualian untuk bagian yang dinamis.

Integrasi Linting UI dan Aksesibilitas dalam CI/CD

Selain screenshot, pastikan pipeline memeriksa elemen UI dengan linting atau audit aksesibilitas.

  • Audit Accessibility Qt: jalankan accerciser atau Qt Accessibility Inspector dalam mode headless untuk memastikan hirarki objek memiliki nama dan role yang benar.
  • Linting widget: gunakan plugin Clang-Tidy atau Qt Creator yang memeriksa properti seperti accessibleName dan accessibleDescription.
  • Integrasi CI: dalam GitLab CI/CD atau GitHub Actions, tambahkan job ui-validation setelah build yang menjalankan skrip screenshot, perbandingan, dan aksesibilitas.

Contoh .gitlab-ci.yml (ringkas):

ui-validation:
  stage: test
  image: ubuntu:22.04
  script:
    - apt-get update && apt-get install -y xvfb gnome-screenshot xdotool imagemagick
    - Xvfb :99 -screen 0 1280x720x24 &
    - ./scripts/start-audacity.sh &
    - ./scripts/capture-ui.sh
    - compare -metric AE baseline/audacity-ui.png current/audacity-ui.png /tmp/diff.png || true
  artifacts:
    paths:
      - current/audacity-ui.png
      - /tmp/diff.png
  allow_failure: false

Pastikan job ini berjalan setelah build dan sebelum regression test.

Memicu Regression Test dan Menentukan Rollback

Sebelum rilis Audacity 4.0 beta, jalankan regression suite yang mencakup API processing dan pipeline render. Hubungkan trigger dari merge request ke job yang menjalankan skrip UI dan regression secara berurutan.

Metrik kegagalan visual: gunakan threshold pixel dan hit percentage untuk menentukan apakah perubahan visual signifikan. Simpan artefak diff untuk analisis manual jika threshold terlampaui.

Langkah rollback bila UI gagal:

  1. Urgent: Tandai build sebagai gagal di pipeline dan kirim notifikasi ke tim QA.
  2. Periksa artefak diff dan log linting untuk menentukan penyebab (misalnya widget baru tidak diterjemahkan atau layout responsif bermasalah).
  3. Jika perubahan UI tidak kritis, revert commit atau buat revert merge request sebagai bagian dari release branch.
  4. Setelah revert, jalankan ulang pipeline otomatis untuk memastikan baseline kembali stabil.

Selalu dokumentasikan baseline yang sah dan berikan skrip perbandingan versi untuk memudahkan diagnosis regresi di masa mendatang.