UI tesztelése Postman segítségével

Használja a Postman API-tesztelési funkcióit az alkalmazás felhasználói felületének folyamatos teszteléséhez.

Olvassa el ezt a történetet a blogomon: https://ankit-m.github.io/blog/ui-testing-in-postman/

A "Postman" egy olyan eszköz, amelyet gyakran használnak az API-kkal való együttműködéshez. Egyszerű módot biztosít HTTP-hívások kezdeményezésére és parancsfájlok futtatására a kérés különböző fázisaiban. Ezeket a funkciókat a folyamatos és automatizáltfelhasználói felület tesztelésére tudjuk használni.

Ez a cikk felvázol néhány módszert a Postman használatára a felhasználói felület különböző aspektusainak tesztelésére, pl. teljesítmény, funkcionalitás, biztonság, integritás és hozzáférhetőség. Azt is megvizsgáljuk, hogyan kell rendszeresen futtatni ezeket a teszteket, és értesítést kapunk az eredményekről.

0. Beállítás és Postman Primer

A Postman elsősorban környezetet biztosít az API-k létrehozásához és interakciójához. Weboldalak lekérésére is használható (akárcsak egy böngésző). Írja be az URL-t a címsorba, és nyomja meg a Küldés gombot a HTML-válasz megtekintéséhez. A Postman futtathat szkripteket a kérés elküldése előtt (Kérés előtti szkriptek) és a válasz megszerzése után (Tesztek). Minden kérés egy gyűjteményben van tárolva, amely futtatható az összes kérés sorrendben történő végrehajtásához.

Ha még soha nem használta a Postmant, további információkért látogasson el az „Oktatóközpontba”.

Megjegyzés: A Postman nem értékeli a JS-t vagy a külső CSS-t egy weboldalon. Előfordulhat, hogy néhány itt leírt technika nem működik olyan oldalakon, amelyek ügyféloldalon jelennek meg, vagy amelyek nagymértékben támaszkodnak JavaScriptre.

1. Teljesítmény

Különféle tényezők befolyásolják a weboldal teljesítményét – az adatok kiszolgálótól való fogadásának ideje, az első értelmes megjelenítés stb.

Minden teszttípushoz új kérelmet hozunk létre, és hozzáadjuk a megfelelő kódrészleteket a Tesztek lapon. Bármikor használhatja a referenciagyűjteményt vagy közvetlenül importálhatja a sablont a Postmanba.

• Válaszidő: Ez az az idő, ameddig az ügyfél megkapta a teljes választ (ebben az esetben a HTML-t) a kérés benyújtását követően. Beállíthatjuk a maximális válaszidő küszöböt.

var ONE_SECOND = 1000;
pm.test("Response time is less than 1 second", function () {
    pm.expect(pm.response.responseTime).to.be.below(ONE_SECOND);
});

• Fejlécek:A válaszfejlécek segítségével ellenőrizheti a szerver konfigurációját az adatok gyorsítótárazásához és kódolásához. Ezek segítenek javítani az oldal betöltési idejét és csökkenteni a hálózaton keresztül továbbított bájtok számát.

pm.test("Cache control header should be for 14 days", function () {
    pm.response.to.be.header("Cache-Control", "max-age=1209600"); 
});
pm.test("Content encoding should be set to gzip", function () {
    pm.response.to.be.header("Content-Encoding", "gzip"); 
});

• Válaszméret: Az első válasz (HTML-oldal) tényleges mérete.

pm.test("Response size is less than 35KB", function () {
    pm.expect(pm.response.responseSize).to.be.below(35000);
});

• PageSpeed ​​Insights API: A Google funkciókban gazdag PageSpeed API-t biztosít bármely weboldal teljesítményének értékeléséhez. Felhívhatja az API-t a Postmantól, és az eredményekre hivatkozva állíthat be referenciaértékeket a felhasználói felületéhez.

// GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={{url}}
pm.test("PageSpeed score should be within 90 and 100", function () {
    var res = pm.response.json();
    var score = res.lighthouseResult.categories.performance.score;
    pm.expect(score * 100).to.be.within(90, 100);    
});

2. Funkcionalitás

• Állapotkód: A válaszállapot az üzemidő legalapvetőbb tesztje. Ha a szerver váratlan állapotkódot ad vissza, előfordulhat, hogy a weboldal nem működik megfelelően.

pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

• Az oldal szerkezete: A cheerio könyvtár segítségével kiértékelheti a válaszjelölést a józanság ellenőrzéséhez. Ezek ellenőrizhetik a szükséges címkék és kritikus elemek jelenlétét.

var cheerio = require('cheerio');
var $ = cheerio.load(pm.response.text());
pm.test('Page title should be set', function () {
    pm.expect($('title').text()).to.equal('Ankit Muchhala'); 
});
pm.test('Page should have header and footer tags', function () {
    pm.expect($('header')).to.exist;
    pm.expect($('footer')).to.exist;
});

• Fejlécek: Alapvető tesztek írhatók a válaszfejlécekhez, amelyek meghatározzák a weboldal működését – Content-Type, Set-Cookie stb.
• Manifest: Ha webalkalmazást/PWA-t készít, amelyet telepíthet mobileszközökre, akkor az alkalmazásnak egy manifest.json fájlt kell kiszolgálnia, és a megfelelő link head címkében kell szerepelnie.

pm.test('Manifest file should exist', function () {
    pm.response.to.have.header('Content-Type', 'application/json');
});
// Add more tests to check manifest file
pm.test('Manifest should have valid fields', function () {
    var jsonData = pm.response.json();
    pm.expect(jsonData.name).to.equal('Ankit Muchhala');
});

• Service worker: Ha rendelkezik szervizmunkás-fájllal, ellenőrizheti annak létezését és tartalmát.

pm.test('Service worker file should exist', function () {
    pm.expect(pm.response.headers.get('Content-Type').split(';'))
      .to.include('application/javascript');
});

3. Biztonság

• HTTPS és HSTS: Ha azt szeretné, hogy az ügyfél és a szerver közötti kommunikáció biztonságos legyen, weboldalát HTTPS-en keresztül kell kiszolgálni. Gondoskodnia kell arról is, hogy minden nem biztonságos hívás (HTTP) a biztonságos protokollra legyen irányítva. A Strict-Transport-Security fejlécben azt is beállíthatja, hogy a böngészők csakbiztonságos protokollon keresztül kapcsolódjanak a szervereihez.

pm.test('Response should have status code is 301', function () {
    pm.response.to.have.status(301);
});
pm.test('Response should redirect to secure URL', function () {
    pm.response.to.have.header(
      'Location',
      'https://' + pm.environment.get('host') + '/'
    );
});
pm.test('Strict-Transport-Security header should be set', function () {
   pm.response.to.have.header(
     'Strict-Transport-Security',
     'max-age=300; includeSubDomains'
   );
});

• Fejlécek: Vannak biztonsági fejlécek, amelyeket felhasználhat bizonyos biztonsági előnyök eléréséhez. Volt. X-XSS-Protection, X-Frame-Options stb. A teljes listát itt találja, és teszteket is hozzáadhat a használtakhoz.
• Nincs hivatkozó: Néhány józansági tesztet is futtathat a HTML-en, hogy ellenőrizze a gyakori biztonsági problémákat – eval, szükségtelen iframes vagy soron belüli JavaScript használatával. Az egyik ilyen teszt annak ellenőrzése, hogy minden target="_blank" a címkében (azaz új lapon/ablakban nyíló hivatkozások) rendelkezik-e rel="noopener noreferrer". Ez azt jelenti, hogy az újonnan megnyitott lap nem fér hozzá az Ön weboldalához a következőn keresztül: document.referrer

var cheerio = require('cheerio');
var $ = cheerio.load(pm.response.text());
pm.test('All external ... valid attributed', function () {
    $('a').each(function(i, elem) {
        if ($(elem).attr('target') !== '_blank') {
            return;
        }
        
        pm.expect($(elem).attr('rel'))
          .to.equal('noopener noreferrer', $(elem).attr('href'));
    }); 
});

• Robots.txt: Ez a fájl a /robots.txt gyökérszinten található, és meghatározza, hogy a webrobotoknak (például a Google robotjainak) hogyan kell interakcióba lépniük az Ön weboldalaival. Annak ellenére, hogy nem kényszerítsemmit – a gonosz robotok egyszerűen figyelmen kívül hagyhatják –, jó gyakorlat egy robots.txt fájl, amely egyértelműen jelzi, hogy mely útvonalakon engedélyezett a feltérképezés.

pm.test('robots.txt file should exist', function () {
    pm.response.to.have.header('Content-Type', 'text/plain');
});
// add specific tests for your robots.txt file

4. Integritás

Ezek a tesztek ellenőrzik, hogy weboldala ellenőrzött forrásokból származó adatokat és érvényes oldalakra mutató hivatkozásokat jelenít-e meg.

• Link érvényessége: Gyakran szeretné ellenőrizni, hogy az oldalon lévő összes link érvényes-e, és nem vezeti-e el a felhasználót olyan weboldalra, amely nem elérhető. A következő szkript megtalálja az összes hivatkozást a weboldalán, és ellenőrzi, hogy léteznek-e (azaz egy GET kérés 200 állapotkódot ad vissza). Itt a pm.sendRequestmódszert használjuk.

var cheerio = require('cheerio');
var $ = cheerio.load(pm.response.text());
pm.test("All links on the page should be valid", function () {
    $('a').each(function(i, elem) {
        var originalPath = $(elem).attr('href');
        var path = originalPath;
        
        if (path && path[0] === '/') {
            path = pm.environment.get('url') + path;       
        }
        
        pm.sendRequest(path, function (err, res) {
            pm.test('Link with href "' + originalPath + '" should be valid', function () {
                pm.expect(err).to.equal(null);
                pm.expect(res).to.have.property('code', 200);
                pm.expect(res).to.have.property('status', 'OK');
            });
        });
    }); 
});

• CSP: A tartalombiztonsági házirend fejlécei megadják a böngésző által végrehajtható különböző típusú tartalmak érvényes forrásainak listáját. Például azt mondhatja: engedélyezze a JavaScript betöltését az aktuális tartományból (self) és getpostman.com. A böngésző letiltja más források tartalom futtatását. Ez segít megvédeni alkalmazását arra az esetre, ha valaki rosszindulatú kódot fecskendezne bele. Megjegyzés: A CSP-ellenőrzések böngészőfüggőek, és nem használhatók egyedüli védelmi vonalként.

5. Hozzáférhetőség

Minden modern weboldalnak mobilbarátnak és a fogyatékkal élő felhasználók számára is elérhetőnek kell lennie. Ez azt jelenti, hogy szemantikailag helyes HTML-címkéket, ARIA-címkéket és releváns attribútumokat, például alt vagy role kell használni. Amint azt korábban bemutattuk, a cheerio segítségével teszteket írhat ezekhez.

A tesztek futtatása

A gyűjtemény futtatásának többféle módja van.

A Postásban

• Kattintson a gyűjteményére az oldalsávon
• Kattintson a Run elemre. Ezzel megnyílik a Collection Runner
• Állítsa be a beállításokat, és futtassa!

A CLI-ben

A gyűjteményt CLI-ben futtathatja a newman használatával a newman run paranccsal.

A Postás Monitorokban

Beállíthat egy „monitort” a tesztek időszakonkénti futtatására, valamint „az eredmények lazítására”.

Számos más teszt is elvégezhető a Postman weboldalain. Ha eszedbe jut valami, kérlek jelezd kommentben.