Ispričaj mi o testiranju klijentskog dela aplikacija…

Почнимо са тога да тестирање клијентског дела (фронтенда) фокусира се на проверу корисничког интерфејса (UI) и интеракције са њим. Ово укључује функционалност, перформансе, корисничко искуство (UX), безбедност и крст-браузерску компатибилност.

Типови тестирања клијентског дела:

Функционално тестирање: Провера усклађености интерфејса са захтевима спецификације.
- Провера исправности рада дугмади, форми, линкова.
- Провера валидности уноса података.
- Провера исправног приказа података.
UI тестирање: Визуелна провера интерфејса.
- Провера распореда, фонта, боја, величине елемената.
- Провера приказа на различитим резолуцијама екрана (адаптивни дизајн).
UX тестирање: Процена погодности коришћења апликације.
- Провера интуитивности навигације.
- Провера лакоће извршавања задатака од стране корисника.
- Скупљање повратних информација од корисника (понекад).
Тестирање перформанси: Процена брзине учитавања страница и одзивности интерфејса.
- Коришћење алата за анализу брзине учитавања (нпр. Lighthouse).
- Тестирање под оптерећењем (иако то више припада бекенду, може утицати и на фронтенд).
Тестирање безбедности: Провера утичљивости на страни клијента.
- Провера на XSS (Cross-Site Scripting).
- Провера на CSRF (Cross-Site Request Forgery).
- Провера на инекције кода.
Крос-браузерско тестирање: Провера исправног приказа и рада апликације у различитим прегледачима и њиховим верзијама.
Крос-платформско тестирање: Провера рада UI на различитим оперативним системима и уређајима (компјутери, таблети, паметни телефони).

Приступи тестирању:

Ручно тестирање: Обавља га особа која имитира радње корисника. Ефективно за UI и UX тестирање.
Аутоматизовано тестирање: Коришћење алата и оквира за аутоматско извршавање тест сценарија. Ефективно за регресионо и функционално тестирање.

Алатке за аутоматизовано тестирање клијентског дела:

Selenium: Широко коришћена оквир за аутоматизацију прегледача. Подржава различите програмске језике.
Cypress: Оквир за фронтенд тестирање, развијен посебно за веб. Брз и једноставан за коришћење.
Playwright: Оквир од Microsoft-а за поуздано свеобухватно тестирање. Подржава различите прегледаче и језике.
Jest, Mocha: Оквири за модулно тестирање JavaScript кода.

Пример једноставног теста са Selenium (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 драйвера
service = ChromeService(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service)

try:
    # Отварање странице
    driver.get("https://www.example.com")

    # Провера насловне странице
    assert "Example Domain" in driver.title

    # Проналажење елемента по тексту линка
    link_element = driver.find_element(By.LINK_TEXT, "More information...")
    assert link_element.is_displayed() # Провера видљивости елемента
    
    # Клик на линк (пример)
    # link_element.click()
    # time.sleep(2) # Чекање на учитавање нове странице

finally:
    # Затварање прегледача
    driver.quit()

Пример теста са Cypress:

// cypress/integration/example_spec.js

describe('Мој први тест', () => {
  it('Посећује пример вебсајт', () => {
    // Отварање странице
    cy.visit('https://www.example.com')

    // Провера насловне странице
    cy.title().should('include', 'Example Domain')

    // Провера присуства елемента по тексту
    cy.contains('More information...').should('be.visible')

    // Клик на линк (пример)
    // cy.contains('More information...').click()
    // cy.url().should('include', '/moreinfo') // Провера URL-а након клика
  })
})

Особености тестирања клијентске стране:

Динамичност интерфејса: UI може да се мења у зависности од акција корисника или података.
Асинхроност операција: Захтеви према серверу и њихови одговори могу се одвијати асинхроно.
Разноликост окружења: Потреба за тестирањем на различитим уређајима, прегледачима и резолуцијама.
Зависност од бекенда: Правилна работа фронтенда често зависи од доступности и исправности одговора са бекенда.
Чести промене: Фронтенд се често мења током развоја.

У целини, тестирање клијентске стране је критични корак за обезбеђење квалитета и погодности коришћења веб апликација. Треба користити и ручне и аутоматизоване приступе за потпуно покривање.

Ispričaj mi o testiranju klijentskog dela aplikacija.