Testaa pikselit: kuvakaappauslaadunvarmistus pienelle tiimille
Testisarjamme oli vihreä ja pudotusvalikkoa ei voinut klikata. Yksikkötestit eivät näe pinoamisbugeja, tumman teeman rikkoutumista tai mobiilin ylivuotoa. Tässä se pieni kuvakaappausrigi, joka nyt katsoo jokaisen näkymän puolestamme, ja ne visuaaliset bugit jotka se nappaa mutta testit eivät koskaan.
Otimme tämän käyttöön rehellistä reittiä: sen jälkeen kun olimme julkaisseet visuaalisia regressioita, jotka yksi kuvakaappaus olisi napannut. Huurrepaneeli, joka tuli tummalla taustalla ulos kalpeana. Valikko, joka piirtyi mutta jota ei voinut klikata. Hakukenttä, joka oli puhelimen leveydellä 65 pikselin siivu. Jokainen niistä purjehti vihreän testisarjan läpi, koska sarja testasi funktioita ja bugit asuivat pikseleissä.
Rigi on pienempi kuin luulet
Meidän rigimme on siemennetty paikallinen ympäristö täynnä uskottavaa keksittyä dataa, yksi headless-kirjautuminen jonka istunto on tallennettu levylle ettei mikään hidasta, ja silmukka: sivut kertaa teemat kertaa näkymäkoot. Työpöytä ja puhelin, vaalea ja tumma, jokainen näkymä jolla on väliä. Koko juttu on lyhyt skripti, ja täysi kierros tuottaa kansiollisen kuvia muutamassa minuutissa.
import { chromium } from 'playwright'; const browser = await chromium.launch();const ctx = await browser.newContext({ storageState: 'auth.json', // login once, reuse everywhere viewport: { width: 1440, height: 900 },});const page = await ctx.newPage(); for (const [name, url] of PAGES) { await page.goto(BASE + url, { waitUntil: 'load' }); for (const theme of ['light', 'dark']) { await page.evaluate((t) => document.documentElement.setAttribute('data-theme', t), theme); await page.screenshot({ path: `shots/${name}-${theme}.png`, fullPage: true }); }}Kuvakaappaukset ja todisteet
Kuvat nappaavat sen, minkä silmä nappaa. Vuorovaikutusbugeja varten haluat selaimen todistavan. Kaksi yhden rivin kutsua tekee suurimman osan työstä: elementFromPoint kontrollin keskikohdassa kertoo, mikä oikeasti vastaanottaisi klikkauksen, ja getBoundingClientRect kertoo, mahtuuko kontrolli oikeasti siihen näkymäkokoon, jota se väittää tukevansa. Nyt tarkistamme molemmat kaikelle, mikä on joskus polttanut meidät.
// Is the menu item really clickable, or is something invisible covering it?const hit = await page.evaluate(() => { const el = document.querySelector('[role="menuitem"]'); const r = el.getBoundingClientRect(); const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2); return el === top || el.contains(top);}); // Does the search input actually fit a 390px phone?const fits = await page.evaluate(() => { const r = document.querySelector('input[name="q"]').getBoundingClientRect(); return r.right <= window.innerWidth && r.width > 200;});Molemmat teemat, joka kerta
Tumman tilan bugit ovat oma lajinsa, koska ne piiloutuvat kehittäjiltä jotka työskentelevät yhdessä teemassa. Kovakoodattu lähes valkoinen täyttö näyttää tarkoitukselliselta vaalealla sivulla ja radioaktiiviselta tummalla. Teema-attribuutin vaihtaminen saman sivukäynnin sisällä maksaa yhden rivin ja tuplaa kattavuutesi. Pidämme jokaista näkymää, jota ei ole valokuvattu molemmissa teemoissa, testaamattomana.
Mitä se nappaa
- Pinoamiskontekstin bugit: piirtynyt, näkyvissä ja klikkaamaton. Vain osumatesti näkee nämä.
- Teemavuodot: vaaleat pinnat hehkumassa tummilla sivuilla, katoavat kaaviot, kuvitukset joissa on tausta poltettuna kiinni.
- Puhelimen ylivuoto: kiinteät palkit sisällön päällä, kentät leikattuina siivuiksi, otsikot poikki kesken lauseen.
- Tekstit kontekstissa: katkaisu, ristiriita ja se lause, jota linter ei koskaan huomaa.
Mikään tästä ei korvaa yksikkötestejä. Testisarja todistaa että rahalaskenta menee oikein, kuvakaappaukset todistavat että ihminen yltää siihen nappiin joka sen laukaisee. Pienellä tiimillä ei ole laadunvarmistusosastoa, mutta ennen jokaista julkaisua katsottu kansiollinen tuoreita kuvakaappauksia on kohtuullinen jäljitelmä sellaisesta. Testi on se katsominen.
Testit menivät läpi on lause funktioistasi. Kuvakaappaus on lause tuotteestasi.
