Vida Kvalit-Kontrolo kiel CI-Dukta Etapo

2026-02-06 · 5 min read

Mi kunfandis PR-on pasintmonate. La kod-revizio aspektis bone. Testoj sukcesis. Poste mi malfermis la retejon per mia poŝtelefono kaj la flanka strio estis tute rompita.

La riparo estis triviala—mankanta mediaserĉo. La cimo estis evidenta tuj kiam oni fakte rigardis la poŝtelefonan vidon. Neniu faris tion.

Do mi aldonis duktan etapon kiu rigardas.

Mi malfermas GitHub-atenton kiu diras:

Realigi la Manan Enigadon por aldoni klientojn. Kiam alklakita, malfermas larĝan glitan tirkeston kun formularo por krei novan klienton.

Unu kunmeto poste, la PR alvenas kun 30+ ekrankopioj pruvas ke ĉiu stato funkcias ĉe ĉiu vidporto. Nula mana testado. La sola peno estis skribi la funkcian priskribon.

La Koncepto

Ĉe ĉiu puŝo al PR, GitHub Actions-laborfluo:

Ekigas Docker Compose-stakon (Django + Postgres) de la PR-branĉo
Rulas migradojn kaj semas test-uzanton
Transdonas la lokan URL-on al Claude Code kun Playwright MCP (senkapa Chromium)
Ekzercas interagajn elementojn bazite sur la PR-diferenco
Ekrankopiadas ĉiun staton ĉe tri vidportoj
Afiŝas la rezultojn kiel PR-komenton

Claude Code regas la foliumilon. Docker Compose provizas la aplikaĵon. GitHub Actions ligas ĉion. Reviziintoj vidas pruvon de funkcieco sen loke ruli ion ajn.

%%{init: {"flowchart": {"subGraphTitleMargin": {"top": 3, "bottom": 10}}} }%%
graph TD
    A["PR-Puŝo"] --> B

    subgraph GHA["GitHub Actions Runner"]
        B["Checkout + Docker Compose"] --> C["Migradoj + Sem-Datumoj"]
        C --> Agent

        subgraph Agent["Claude Code + Playwright"]
            direction LR
            D["Legi PR-Diferencon"] --> E["Mapi Dosierojn → URL-ojn"]
            E --> F["Ensaluto + Navigi"]
            F --> G["Ekrankopio ×3 Vidportoj"]
        end
    end

    Agent --> H["PR-Komento"]

    style GHA fill:transparent,stroke:#888
    style Agent fill:transparent,stroke:#888

La laborfluo mem estas rekta:

name: UI Screenshots
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  screenshots:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write
    steps:
      - uses: actions/checkout@v4

      # ... Docker Compose-agordo, migradoj, kreado de test-uzanto ...

      - name: Start services
        run: |
          docker compose -f docker-compose.local.yml up -d --wait

      - name: Install Playwright
        run: npx playwright install --with-deps chromium

      - name: Run Claude for Screenshots
        uses: anthropics/claude-code-action@v1
        with:
          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
          claude_args: >-
            --allowed-tools
            "mcp__playwright__*,
            Bash(gh pr diff:*),
            Bash(gh pr comment:*),
            Read,Glob,Grep"
          prompt: |
            You are a visual QA agent. Your job is to visually
            verify a UI deployment.

            PR: ${{ github.event.pull_request.number }}
            The Django app is running at http://localhost:8001

            1. Run `gh pr diff` to find changed templates/views
            2. Map changed files to URLs — only test pages
               affected by this push
            3. Login, then screenshot each page at three viewports:
               1440x900, 1024x768, 640x1136
            4. Save screenshots with descriptive filenames
            5. Post a PR comment with:
               - Each test performed with pass/fail
               - Any visual issues found
               - Total screenshots captured

La Vidporta Matrico

Aparato	Grando	Kial
Labortablo	1440×900	Norma tekokomputilo
Tabulkomputilo	1024×768	iPad portreto
Poŝtelefono	640×1136	iPhone SE

Ĉiu interaga stato estas kaptita ĉe ĉiuj tri. Flankstrira komponento generas 12+ ekrankopiojn:

Paĝo-ŝarĝo (fermita) — 3 vidportoj
Ekigilo-klako — 3 vidportoj
Plene malfermita — 3 vidportoj
Ferma animacio — 3 vidportoj

Multipliku per helaj/mallumaj etosoj kaj vi rigardas 24 ekrankopiojn por unu komponento. Tio estas la celo. Elĉerpa vida pruvo kiel CI-artefakto.

Kion Ĝi Efektive Eldonas

Jen vera eligo de PR kiu aldonis manan enigadan paĝon. La agento afiŝas PR-komenton kun strukturita resumo, ekrankopioj ĉe ĉiu vidporto, kaj testa kontrololisto:

GitHub-atento kreita de la vida kvalit-kontrola agento

Sub tiu resumo, la agento aldonas ekrankopiojn de ĉiu stato kiun ĝi ekzercis. Jen la labortabla vido—klienta listo kun datumoj, plus la Aldoni Klienton-tirkesto malfermita:

Labortabla vido: klienta listo kaj Aldoni Klienton-tirkesto ĉe 1440x900

La agento testis:

Malplena formulara stato
Formularo kun validigaj eraroj (mankanta deviga nomkampo)
Sukcesa formulara sendo
Klienta lista bildigado kun datumoj
Avatar-retropaŝoj kiam mankas bildo
Modala malfermo/fermo-transiĝoj
Ĉiuj tri vidportoj

Mi preterlasis unuopajn kampajn fokusajn statojn por ĉi tiu PR—malkreskantaj redonoj sur simpla formularo. La agento povas fari tion, sed 50 ekrankopioj de tekstaj enigoj ricevantaj fokuson ne estas utila signalo.

La PR-komento iĝas vida ŝanĝregistro. Ĉiu testa rulado finiĝas per kontrololisto:

Testing Performed kontrololisto kun ĉiuj sukcesaj eroj

Post ses monatoj, mi povas rigardi ian ajn PR-on kaj vidi precize kiel la UI aspektis kiam ĝi estis elsendita.

La Testa Manifesto

La instigilo en la laborfluo supre estas ĝenerala — ĝi funkcias por iu ajn PR. La specifeco venas de la diferenco mem. La agento legas gh pr diff, malkovras kiuj ŝablonoj kaj vidoj ŝanĝiĝis, mapas tiujn al URL-oj, kaj decidas kion testi.

Por formulara komponento, tio signifas ke ĝi ekzercos:

component: ClientForm
states:
  - empty form
  - filled form (valid data)
  - validation error (submit without name)
  - submitting (loading state)
  - success (confirmation)
interactions:
  - submit empty form (trigger validation)
  - fill all fields, submit
  - verify client appears in list after submit

Neniu mana testa plano necesas. La agento deduktas la testan surfacon de la kod-ŝanĝoj.

Kial Ekrankopioj en PR-Komentoj

Enliniaj ekrankopioj en la PR-komento havas kelkajn avantaĝojn:

Videblaj — reviziintoj vidas ilin sen klaki al artefaktoj
Kuntekstaj — rekte apud la diferenco kiun ili revizias
Komparebla — ĉiu puŝo ĝisdatigas la komenton, do vi vidas antaŭ/post
Kontroleblaj — la komenta historio montras kio estis testita ĉe ĉiu kunmeto

Kion Ĉi Tio Kaptas

Realaj cimoj kaptitaj en la unua semajno:

Falmenuo tondita de overflow: hidden-patro (videbla nur sur tabulkomputilo)
Butona teksto nevidebla en malhela reĝimo (malĝusta CSS-variablo)
Formularaj etikedoj misalignita sur iPhone (flexbox-gap problemo)
Ŝveba stato blokita post tuŝo (bezonis @media (hover: hover))
Modala fono ne kovras la plenan vidporton sur pejzaĝa tabulkomputilo

Ĉiu el ĉi tiuj pasis kod-revizion. Ĉiu estis evidenta en la ekrankopioj.

La Kosto

Ruli Claude kun Playwright MCP en CI prenas 2-4 minutojn depende de kiom da statoj bezonas testojn. Por tipa PR tuŝanta unu komponenton, estas ĉirkaŭ 90 sekundoj.

Komparu kun: disponigi al produktado kaj ekscii de uzantoj ke la poŝtelefona aranĝo estas rompita. Senpaga.

La Ŝanĝo

Vida kvalit-kontrolo ĉiam estis la gluejo. Vi povas aŭtomatigi unuo-testojn, integriĝo-testojn, eĉ de-fino-al-fino-fluojn — sed iu ankoraŭ devas rigardi la UI-on. Tio estis vera dum jardekoj.

Ĝi ne plu estas vera. Agentoj kun foliumiloj ne nur rulas skriptojn. Ili interpretas, navadas, interagas kaj juĝas. La testa surfaco ne estas malmole kodita — ĝi estas dedukta de la ŝanĝo. Ĉiu PR ricevas elĉerpan vidan kovron kiun neniu mana procezo povus egali.

Ĉi tio ŝanĝas QE de pordo al garantio. Ne “ĉu iu kontrolis tion” sed “la dukto kontrolis tion, jen la pruvo”. Ĉiu PR, ĉiu puŝo, ĉiu vidporto. La QE-rolo ne malaperas. Ĝi moviĝas supren. Anstataŭ plenumi testajn planojn, vi difinas kion la agento zorgu. Anstataŭ kapti cimojn, vi projektas la sistemon kiu kaptas ilin.