FluentStack

Testing Tools

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 15: AccessibilityAdvanced60 menitBahasa Indonesia

Testing Tools

Menggabungkan browser inspection, automated checks, manual walkthrough, dan accessible query menjadi satu test pass yang realistis.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan masalah yang dapat ditemukan tool dari masalah yang harus diamati manual
  • Menjalankan test pass kecil yang dimulai dari task user
  • Menggunakan Testing Library query sebagai feedback terhadap semantics dan labels
  • Menulis finding accessibility dengan severity, langkah reproduksi, dan sisa risiko
Browser DevToolsTesting LibraryAccessibility AuditManual QA

Isi lesson

7 blok
  1. 1.
    Tool menemukan sinyal, user journey membuktikan kegunaanBelum selesaiWajib
  2. 2.
    Accessible query membaca contract yang dialami userBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Skor tool bukan bukti conformanceBelum selesaiOpsional
  7. 7.
    RingkasanBelum selesaiWajib

Tool menemukan sinyal, user journey membuktikan kegunaan

Wajib

Browser accessibility inspection dan automated checker dapat menemukan missing label, role yang tidak sesuai, DOM issue, atau contrast candidate. Namun tool tidak tahu apakah copy error membantu, urutan Tab mengikuti task, dialog mengembalikan focus dengan tepat, atau animation terasa mengganggu. Jalankan test pass dari task user: buka route, gunakan keyboard, lihat focus, submit form yang salah, aktifkan reduced motion bila ada animation, lalu inspeksi semantic tree dan automated findings. Gunakan tool untuk mempercepat discovery, bukan untuk menandai accessibility selesai secara otomatis.

Bagian ini memengaruhi progres lesson.

Accessible query membaca contract yang dialami user

Wajib
ts
import { screen } from "@testing-library/react";

export function assertEnrollmentForm() {
  const email = screen.getByLabelText("Alamat email");
  const submit = screen.getByRole("button", {
    name: "Daftar course",
  });

  return { email, submit };
}

getByLabelText menuntut input memiliki label yang bisa ditemukan, sementara getByRole memakai role dan accessible name seperti yang dibaca teknologi bantu. Query ini tidak menggantikan screen reader test, tetapi failure query sering menunjukkan semantic atau labeling contract yang perlu diperbaiki. Jangan kembali ke selector class hanya agar test cepat hijau.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Test course enrollment with accessible queries

Tulis query Testing Library yang membaca label, role, dan error UI seperti contract yang dialami user.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis6 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis accessibility test pass singkat untuk feature Daftar course. Susun urutan test dari task user, keyboard walkthrough, visual contrast atau focus check, form error, inspection atau automated check, dan satu assertion Testing Library. Tambahkan satu hal yang belum dapat dibuktikan oleh automated tool saja.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/600 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Finding mana yang paling mungkin terlewat bila tim hanya mengandalkan automated checker?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Opsional

Skor tool bukan bukti conformance

Laporan tanpa error bukan sertifikat bahwa page dapat digunakan semua orang. Tool memiliki aturan yang terbatas dan tidak mengetahui intent product. Simpan finding dengan route, task, langkah reproduksi, dampak user, perbaikan yang dicoba, dan test ulang yang dilakukan agar review dapat ditindaklanjuti tim.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Mulai test pass dari task user, lalu gabungkan keyboard, visual review, inspection, automated checker, dan test code.
  • Testing Library accessible query memberi feedback berguna pada label, role, serta accessible name.
  • Automated tools menemukan candidate issue, bukan seluruh usability accessibility.
  • Report yang baik menyebut environment, langkah reproduksi, dampak, fix, dan sisa risiko.
  • Uji Kompetensi berikutnya menggabungkan contrast, form errors, reduced motion, screen reader smoke test, dan tooling pada satu readiness checkpoint.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tool menemukan sinyal, user journey membuktikan kegunaan.

Memuat progresReview module