Sobes.tech
Middle

Meséljen a böngészők közötti tesztelési tapasztalatáról.

sobes.tech MI

Válasz az MI-től

Keresztböngészős tesztelés — kötelező lépés a webalkalmazásoknál, amely biztosítja a helyes megjelenítést és funkcionalitást különböző böngészőkben és azok verzióiban.

Tapasztalatom magában foglalja:

  1. Kézi tesztelés:

    • Minden jelentős funkció- vagy UI-változtatás után kézzel ellenőriztem a kulcsfontosságú forgatókönyveket főbb böngészőkben (Chrome, Firefox, Edge, Safari) különböző operációs rendszereken (Windows, macOS, Linux) és képernyőfelbontásokon.
    • Külön figyelmet fordítottam a CSS renderelésének sajátosságaira, a JavaScript működésére és az adaptív dizájnra.
    • Fejlesztői eszközöket (Developer Tools) használtam hibakeresésre és problémák elemzésére különböző böngészőkben.
  2. Tesztelés valódi eszközökön és virtuális környezetekben:

    • Virtuális gépeket (pl. különböző Windows és macOS verziókkal) használtam régi böngészőverziók vagy speciális OS-konfigurációk tesztelésére.
    • Emulátorokat és szimulátorokat (pl. Xcode Simulator iOS-Safari-hoz) alkalmaztam mobil eszközökhöz.
    • Távoli szervereken lévő eszköz- és böngészőkezelő szolgáltatásokat (pl. BrowserStack, Sauce Labs) használtam a lefedettség bővítésére és a nagy számú valódi eszközön és böngészőben történő tesztelésre.
  3. Keresztböngészős automatizálás:

    • Automatizált teszteket integráltam CI/CD pipeline-ba, hogy minden nap vagy minden commit után futtassam őket különböző böngészőkben.
    • Framework-okat használtam:
      • Selenium WebDriver: különböző nyelveken írt tesztekhez (Java, Python, JavaScript) és azok futtatásához a megfelelő drivereken keresztül.
      • Playwright és Cypress: újabb projektekben, gyorsabb és megbízhatóbb automatizáláshoz, különböző böngészők támogatásával "készletből".
    • Multiplexálást vagy párhuzamos futtatást alkalmaztam különböző csomópontokon (pl. Selenium Grid vagy felhőalapú szolgáltatások) a futási idő csökkentése érdekében.
    • Vizuális regressziók ellenőrzését automatizáltam eszközökkel (pl. Applitools, Percy), oldalképek összehasonlításával különböző böngészőkben.
  4. Stratégia és eszközök meghatározása:

    • Webanalitikát (Google Analytics) elemeztem a leggyakrabban használt böngészők és eszközök meghatározásához.
    • Tesztmátrixot készítettem a szükséges böngésző-, OS- és eszközkombinációk listájával, az elemzések, projektkövetelmények és kockázatok alapján.
    • Folyamatosan kutattam az új böngészőverziókat és azok sajátosságait, és ennek megfelelően alakítottam a tesztelési stratégiát.

Példa kód a Selenium teszt Chrome és Firefox futtatására:

// Feltételezve, hogy a TestNG vagy JUnit be van állítva
// és a megfelelő driverek (chromedriver, geckodriver) elérhetőek a PATH-ban

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserTest {

    WebDriver driver; // Driver változó deklarálása

    @BeforeClass // Módszer a tesztek előtt fut
    public void setup() {
        // Driver utak beállítása, ha nem a PATH-ban vannak
        // System.setProperty("webdriver.chrome.driver", "út/ahol/van/chromedriver");
        // System.setProperty("webdriver.gecko.driver", "út/ahol/van/geckodriver");
    }

    // Módszer a driver inicializálására a "browser" paraméter szerint
    @Parameters("browser") // Paraméter az XML konfigurációs fájlból
    @Test // Teszt szkript
    public void testHomepageTitle(String browserName) { // bemeneti paraméter a testng.xml-ből
        if (browserName.equalsIgnoreCase("chrome")) {
            driver = new ChromeDriver(); // Chrome driver inicializálása
        } else if (browserName.equalsIgnoreCase("firefox")) {
            driver = new FirefoxDriver(); // Firefox driver inicializálása
        } else {
            throw new IllegalArgumentException("Nem támogatott böngésző: " + browserName);
        }

        driver.manage().window().maximize(); // Böngészőablak maximalizálása
        driver.get("https://www.example.com"); // URL megnyitása

        // Az oldal címe ellenőrzése
        String pageTitle = driver.getTitle();
        System.out.println("Az oldal címe " + browserName + "-ben: " + pageTitle);
        // Assert.assertEquals(pageTitle, "Example Domain"); // Ellenőrző állítások

        // További lépések vagy ellenőrzések...
    }

    @AfterMethod // Módszer minden teszt után fut
    public void tearDown() {
        if (driver != null) {
            driver.quit(); // Böngésző bezárása és a driver session lezárása
        }
    }
}
<!-- Példa testng.xml a Chrome és Firefox futtatására -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Cross Browser Suite"> <!-- Tesztcsomag neve -->

    <test name="Chrome Test"> <!-- Külön Chrome teszt -->
        <parameter name="browser" value="chrome"/> <!-- Böngésző kiválasztása paraméterként -->
        <classes>
            <class name="CrossBrowserTest"/> <!-- A tesztosztály hivatkozása -->
        </classes>
    </test>

    <test name="Firefox Test"> <!-- Külön Firefox teszt -->
        <parameter name="browser" value="firefox"/> <!-- Böngésző kiválasztása paraméterként -->
        <classes>
            <class name="CrossBrowserTest"/> <!-- A tesztosztály hivatkozása -->
        </classes>
    </test>

</suite>

A megközelítésem a keresztböngészős tesztelésben mindig a maximális lefedettség elérésére irányul a lehető legkisebb erőforrás-bevitellel, ötvözve a kézi ellenőrzéseket a finomhangoláshoz és az automatizálást a regressziós teszteléshez.