Kuidas te testite veebisaitide kasutajaliidest?
sobes.tech AI
Vastus AI-lt
Visuaalne testimine, brauserite ühilduvuse testimine, reageeriva disaini testimine, ligipääsetavuse (accessibility) testimine.
Visuaalne testimine: elementide välimuse võrdlemine (värv, suurus, font) disainimakettidega, vahede, joondamise ja kattumise puudumise kontroll: Tööriistad: käsitsi võrdlemine, brauseri arendustööriistad, spetsiaalsed tööriistad visuaalse regressiooni testimiseks (näiteks Applitools, Percy).
Brauserite ühilduvuse testimine: UI õige kuvamine ja funktsionaalsus erinevates brauserites (Chrome, Firefox, Edge, Safari) ja nende versioonides: Tööriistad: BrowserStack, LambdaTest, Docker konteinerid erinevate brauseritega, käsitsi testimine:
Reageeriva disaini testimine: UI kuvamine ja toimimine erinevatel ekraanisuurustel ja seadmetel (PC, tahvelarvuti, nutitelefon): Meetodid: brauseri akna suuruse muutmine, seadmete emuleerimine arendustööriistades, testimine reaalsetes seadmetes:
Ligipääsetavuse (Accessibility - A11y) testimine: UI vastavus ligipääsetavuse standarditele (WCAG) kasutajatele piiratud võimalustega: Aspektid: HTML semantika, ARIA atribuutide õige kasutamine, alternatiivne tekst piltidele, värvikontrast, klaviatuuri navigatsioon, ekraanisõja toetamine: Tööriistad: Lighthouse (sisseehitatud Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, käsitsi testimine ekraanisõja kasutamisega (NVDA, JAWS, VoiceOver):
UI funktsionaalne testimine: interaktiivsete elementide töö kontrollimine (nupud, vormid, lingid), lehekülgede üleminekud, elementidega suhtlemine: Meetodid: käsitsi testimine, UI testide automatiseerimine:
UI testide automatiseerimine: skriptide kirjutamine UI testjuhtumite automaatseks täitmiseks: Frameworkid: Selenium WebDriver, Cypress, Playwright, TestCafe:
Näide automatiseeritud testist, mis kontrollib elemendi olemasolu:
# Python kasutades Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
# Chrome draiveri tee
service = Service('/path/to/chromedriver')
driver = webdriver.Chrome(service=service)
try:
driver.get("https://example.com")
# Kontroll, kas lehel on h1 pealkiri
header_element = driver.find_element(By.TAG_NAME, "h1")
print(f"Pealkiri leitud: {header_element.text}")
except Exception as e:
print(f"Pealkirja otsides viga: {e}")
finally:
driver.quit()
Automatiseeritud UI raamistikud võrdlustabel:
| Raamistik | Toetatud brauserid | Programmeerimiskeeled | Kiirus | Omadused |
|---|---|---|---|---|
| Selenium WebDriver | Kõik peamised | Java, Python, C#, Ruby | Keskmine | Tööstusharu standard, paindlikkus |
| Cypress | Chrome, Firefox, Edge | JavaScript | Kiire | Testirunni, silumine |
| Playwright | Chromium, Firefox, WebKit | JavaScript, Python, C# | Kiire | Kõigi kaasaegsete brauserite tugi, automaatne ooteaeg |
| TestCafe | Kõik peamised | JavaScript | Kiire | Brauseri draivereid ei nõuta |
UI testimise strateegia võib hõlmata:
- Kõige kriitilisemate UI elementide ja nendevaheliste interaktsioonide stsenaariumide määratlemist.
- Põhjalike testjuhtumite loomist, mis katavad UI erinevaid olekuid (näiteks aktiivne väli, viga väli, keelatud element).
- Käsitsi ja automatiseeritud testimise kombinatsiooni kasutamist.
- UI regressiooni testide regulaarset läbiviimist iga koodimuudatuse järel.
- Eksploratiivset testimist mitteilmselt probleemide avastamiseks.