Mesélj az alkalmazások kliens oldalának…

Kezdjük azzal, hogy elmondjuk, hogy a kliensoldali (front-end) tesztelés a felhasználói felület (UI) és annak interakciójának ellenőrzésére összpontosít. Ez magában foglalja a funkcionalitást, teljesítményt, használhatóságot (UX), biztonságot és a böngészők közötti kompatibilitást.

A kliensoldali tesztelés típusai:

Funkcionális tesztelés: A felület megfelelőségének ellenőrzése a specifikációs követelményekhez.
- A gombok, űrlapok, linkek helyes működésének ellenőrzése.
- Az adatbevitel validálása.
- Az adatok helyes megjelenítésének ellenőrzése.
UI-teszt: A felület vizuális ellenőrzése.
- A elrendezés, betűtípusok, színek, elemek méretének ellenőrzése.
- A megjelenés különböző képernyőfelbontásokon (reszponzív dizájn).
UX-teszt: Az alkalmazás használhatóságának értékelése.
- A navigáció intuitivitásának ellenőrzése.
- A felhasználó által végrehajtott feladatok könnyűségének ellenőrzése.
- Visszacsatolás gyűjtése a felhasználóktól (néha).
Teljesítmény tesztelés: Az oldalak betöltési sebességének és az interfész reakciókészségének értékelése.
- Eszközök használata a betöltési sebesség elemzéséhez (pl. Lighthouse).
- Terheléses tesztelés (bár ez inkább a backendhez tartozik, befolyásolhatja a frontendet is).
Biztonsági tesztelés: A kliens oldali sebezhetőségek ellenőrzése.
- XSS (Cross-Site Scripting) ellenőrzése.
- CSRF (Cross-Site Request Forgery) ellenőrzése.
- Kódinjektálások ellenőrzése.
Böngészőközi tesztelés: A különböző böngészőkben és verziókban való helyes megjelenítés és működés ellenőrzése.
Platformközi tesztelés: A UI működésének ellenőrzése különböző operációs rendszereken és eszközökön (asztali számítógépek, tabletek, okostelefonok).

Tesztelési megközelítések:

Kézi tesztelés: Olyan személy által végzett, aki utánozza a felhasználó műveleteit. Hatékony a UI és UX tesztelésében.
Automatizált tesztelés: Eszközök és keretrendszerek használata a teszt forgatókönyvek automatikus végrehajtásához. Hatékony regressziós és funkcionális teszteléshez.

Automatizált kliensoldali tesztelés eszközei:

Selenium: Széles körben használt keretrendszer böngésző automatizálására. Támogatja a különböző programozási nyelveket.
Cypress: Webhez készült front-end teszt keretrendszer, kifejezetten erre a célra fejlesztve. Gyors és könnyen használható.
Playwright: A Microsoft által fejlesztett megbízható end-to-end teszt keretrendszer. Támogatja a különböző böngészőket és nyelveket.
Jest, Mocha: JavaScript modul teszt keretrendszerek.

Egyszerű Selenium teszt példája (Python):

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager
import time

# Chrome driver telepítése
service = ChromeService(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service)

try:
    # Oldal megnyitása
    driver.get("https://www.example.com")

    # Az oldal címe ellenőrzése
    assert "Example Domain" in driver.title

    # Elem keresése link szöveg alapján
    link_element = driver.find_element(By.LINK_TEXT, "More information...")
    assert link_element.is_displayed() # Az elem láthatóságának ellenőrzése
    
    # Kattintás a linkre (példa)
    # link_element.click()
    # time.sleep(2) # Várakozás az új oldal betöltésére

finally:
    # Böngésző bezárása
    driver.quit()

Cypress teszt példája:

// cypress/integration/example_spec.js

describe('Első Teszt', () => {
  it('Látogatja a például weboldalt', () => {
    // Oldal megnyitása
    cy.visit('https://www.example.com')

    // Az oldal címének ellenőrzése
    cy.title().should('include', 'Example Domain')

    // Elem jelenlétének ellenőrzése szöveg alapján
    cy.contains('More information...').should('be.visible')

    // Kattintás a linkre (példa)
    // cy.contains('More information...').click()
    // cy.url().should('include', '/moreinfo') // URL ellenőrzése kattintás után
  })
})

A kliensoldali tesztelés jellemzői:

Dinamikus: A UI változhat a felhasználói műveletek vagy adatok függvényében.
Aszinkron műveletek: A szerverhez intézett kérések és válaszok aszinkron módon történhetnek.
Különböző környezetek: Szükséges tesztelés különböző eszközökön, böngészőkben és felbontásokon.
Backend-függőség: A frontend helyes működése gyakran függ a backend elérhetőségétől és helyességétől.
Gyakori változások: A frontend fejlesztés közben gyakran változik.

Általánosságban elmondható, hogy a kliensoldali tesztelés kritikus lépés a webalkalmazások minőségének és használhatóságának biztosításában. Szükséges mind kézi, mind automatizált megközelítés a teljes körű lefedettség érdekében.

Mesélj az alkalmazások kliens oldalának teszteléséről.