Käyttöliittymätilojen ja animaatioiden testaus Playwright:llä
Vakaiden testien kirjoittaminen animoidulle käyttöliittymälle Playwright:llä: ajan hallinta page.clock-toiminnolla, emuloi rajoitettua liikettä ja pimeää tilaa sekä kuvakaappauksia animaatioilla pois käytöstä.
Core Takeaway
Tee animaatiotesteistä deterministisiä: ohjausaika page.clockilla, joka kattaa ajastimet, requestAnimationFrame ja suorituskyvyn; emuloi käyttäjän asetuksia komennolla page.emulateMedia({redMotion, colorScheme }); puolustaa tiloja pikemminkin kuin animaation keskipisteitä; ja ota kuvakaappauksia animaatioiden ollessa pois käytöstä. Testaa supistetun liikkeen polkua ensiluokkaisena tapauksena.
Miksi animaatiotestit ovat epäselviä
Animaatiot riippuvat ajasta, ja reaaliaika vaihtelee ajojen ja koneiden välillä. 10 millisekuntia aikaisin tai myöhään otettu kuvakaappaus näyttää erilaisen kehyksen. Korjaus on hallita aikaa ja asetuksia sekä testata tiloja, joissa animaatiot liikkuvat yksittäisten kehysten sijaan.
Hallitse aikaa
Playwright:n kellosovellusliittymän avulla testi voi asentaa väärennetyn kellon ja keskeyttää sen, kelata eteenpäin tai ajon ajan tietyksi ajaksi. Se kattaa setTimeout, setInterval, requestAnimationFrame ja suorituskyvyn, joten voit esimerkiksi kelata eteenpäin latausviiveen jälkeen ja tarkistaa, että onnistumistila näkyy.
Emuloi käyttäjän asetuksia
page.emulateMedia() voi asettaa RedMotion-asetukseksi "reduce" ja colorScheme-asetukseksi "tumma" tai "vaalea". Suorita näppäinvirtauksia rajoitetulla liikkeellä varmistaaksesi, ettei mikään tärkeä ole riippuvainen animaatiosta, ja molemmissa teemoissa kontrastiongelmien havaitsemiseksi.
Vakaat kuvakaappaukset
Playwright Test voi verrata kuvakaappauksia odotusarvoon (page).toHaveScreenshot(), ja kuvakaappausvaihtoehdot sisältävät animaatioita: "pois käytöstä", joka pysäyttää CSS-animaatiot ja siirtymät sieppausta varten. Käytä visuaalisia vertailuja lopputiloihin ja DOM- tai saavutettavuusvahvistuksia käyttäytymiseen.
Kanvaspohjaisten komponenttien testaus
Canvas-animaatiot, kuten Lottie-, Rive- tai ExodeUI-ajoajat, eivät näy DOM:ssa. Testaa koodisi lähettämiä syötteitä ja sen vastaanottamia tapahtumia, pidä todellisia saatavilla olevia elementtejä kankaan rinnalla ja käytä kuvakaappauksia visuaalisiin tarkastuksiin ajan hallinnan jälkeen.
Tuotannon toteutuskatkelma
import { test, expect } from '@playwright/test';
test('save button shows success, also with reduced motion', async ({ page }) => {
await page.clock.install(); // fake timers + rAF
await page.emulateMedia({ reducedMotion: 'reduce' }); // test the calm path
await page.goto('/settings');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByRole('status')).toHaveText('Saving…');
await page.clock.runFor(2000); // skip the wait deterministically
await expect(page.getByRole('status')).toHaveText('Saved');
await expect(page).toHaveScreenshot('saved.png', { animations: 'disabled' });
});Avain Principles muistettavat
- Ohjaa aikaa page.clockilla (ajastimet, requestAnimationFrame, suorituskyky)
- EmuloiredMotion ja colorScheme page.emulateMedialla
- Väitä tiloihin ja käytettävissä olevaan tekstiin, ei animaation keskipisteisiin
- Kuvakaappaus animaatioilla: "pois käytöstä"
- Testaa supistetun liikkeen polkua ensiluokkaisena tapauksena
Usein kysytyt kysymykset
Lähteet
- Clock — Playwright asiakirjat
- Page.emulateMedia and screenshot options — Playwright asiakirjat
- Visual comparisons — Playwright asiakirjat