Odzivno testiranje spletnega oblikovanja: Celoten priročnik za začetnike

responsive web design testing

V današnji dobi se je uporaba mobilnih naprav za dostop do interneta povečala in postala precej priljubljena. Skoraj vsak uporabnik interneta si želi mobilne različice spletnega mesta.

Vendar večina spletnih mest ni tako optimizirana, kot bi morala biti za mobilne naprave. Preizkuševalci bi morali opraviti mobilni odzivni test odzivnih modelov.

Tradicionalni programski izdelki so v bistvu enaki v vseh napravah.

Microsoft Office, na primer , izgleda enako na vseh osebnih računalnikih. Predstavljajte si, da vzamete Microsoft Word natanko tako, kot deluje na namizju, in si ga ogledate na napravi iPhone4. Meniji in gumbi bodo videti majhni, sicer boste videli le vogal zaslona in morali boste uporabiti obsežne drsnike. Kakorkoli že, aplikacija postane v bistvu neuporabna.

Ta frustrirajoča izkušnja je točno tisto, kar preži vsak oblikovalec, ko poskuša oblikovati za splet.

Rešitev težave je nekaj, kar se imenuje »odziven dizajn«, tehnika, s katero spletne strani brskalnik vprašajo, kakšna je ločljivost, nato pa elegantno preoblikujejo uporabniško izkušnjo na podlagi razpoložljive nepremičnine na zaslonu. Naenkrat je nemogoče natančno vedeti, kako bo videti vaša programska oprema v proizvodnji.

To pomeni testno strategijo (in strategijo avtomatizacije), ki mora biti sposobna eksperimentirati in se naučiti, kaj 'izgleda prav' in kaj ne, v različnih ločljivostih.

Kaj se boste naučili:

• Začetniški vodnik za preizkušanje odzivnih spletnih strani
  • Kaj je odzivno spletno oblikovanje?
  • Prednosti odzivnega oblikovanja:
  • Glavne komponente odzivnega oblikovanja spletnih strani:
  • Primeri odzivnega spletnega oblikovanja
  • Kako preizkusiti odzivno spletno mesto
  • Vzorčni scenariji preizkusov za odzivno testiranje spletnih mest:
  • Orodja za testiranje odzivnega spletnega mesta
  • Izzivi preizkušanja odzivnega oblikovanja in možnih rešitev
  • Nasveti za odzivno spletno testiranje
• Zaključek
  • Priporočeno branje

Začetniški vodnik za preizkušanje odzivnih spletnih strani

Ko poskušamo odpreti spletno mesto, strežnik prebere » m.subdomene ”, Da ugotovite, iz katere vrste mobilne naprave izvira zahteva. Na podlagi tega uporabnika preusmeri na ustrezno mobilno različico.

Da bi bila ta 100-odstotna učinkovitost, mora imeti vsaka naprava svojo zasnovo spletnega mesta, posebej zasnovanega zanjo; fali primer,drugačen poseben dizajn za Blackberry, iPhone, iPad itd. ob upoštevanju njihove velikosti zaslona in ločljivosti.

Vendar različna spletna različica za vsako ločljivost in napravo ni praktična. The Ethan Marcotte pripravil nov pristop - Odzivno spletno oblikovanje ( RWD ) - to reši to težavo.

Naše priporočilo

# 1) LT brskalnik

LT brskalnik uporabnikom pomaga pri preizkušanju in odpravljanju napak na svojem spletnem mestu v več kot 45 prikazanih napravah. Preizkusite svoje spletno mesto na različnih vnaprej nameščenih vratih za ogled mobilnih in namiznih naprav z brskalnikom LT, razvijalcem prijaznim brskalnikom za odpravljanje napak v mobilnem pogledu.

Preprosto vnesite URL svojega spletnega mesta in izberite napravo, na kateri želite preizkusiti svoje spletno mesto. Za primerjavo pogledov ob strani lahko hkrati izberete dve napravi.

Ne samo testiranje, temveč lahko uporabniki tudi na poti odpravijo napake na svojem spletnem mestu s pomočjo vgrajenih DevTools, ki jih ponuja LT Browser.

Najboljše je, da lahko uporabniki ustvarijo napravo po meri na podlagi svojih zahtev, zaradi česar je brskalnik LT naša prva izbira za odzivno testiranje.

Kaj je odzivno spletno oblikovanje?

RWDcilji, da se spletna mesta odzovejo na svojo napravo, ločljivost in se lahko pravilno upodabljajo in prilagajajo. Na primer, če uporabnik preklopi z namizja / prenosnika na iPad, mora spletno mesto samodejno prilagoditi spremembe ločljivosti, na primer velikost slike itd., glede na zmožnosti posamezne naprave.

V kratkem,Odziven dizajnje 'Eno spletno mesto za vsak zaslon' .

Spodnji zaslon jeprimerRWD:

Opomba: V realnem časuprimerodzivnega spletnega mesta je www.fpl.com

V RWD je spletno mesto zasnovano tako, da omogoča enostavno uporabniško izkušnjo z enostavno navigacijo, preglednim in preprostim uporabniškim vmesnikom itd.

• Odzivna spletna mesta so kodirana v PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) in številnih novih okoljih, ki so zelo priročna za razvoj odzivnih modelov.
• Funkcije CSS in HTML izkoristite za samodejno spreminjanje ločljivosti zaslona in slik.
• Oblikovanje RW za določanje postavitve spletnega mesta uporablja mejne točke. Vsak dizajn se uporablja na različnih mejnih točkah. Ena zasnova se uporabi nad mejno točko, druga pa pod mejno točko. Te mejne vrednosti običajno temeljijo na širini brskalnikov.
• Med oblikovanjem odzivnega spletnega mesta razvijalci upoštevajo vsebino, zasnovo in zmogljivost spletnega mesta v vseh napravah zagotoviti uporabnost .

Diagram je natančen primerjavo s tem, kako se vsebina prilagaja okolju in vedenju naprave.

Opomba : Poleg RWD se imenuje še en pristop Prilagodljivo spletno oblikovanje ( AWD ) . Pri pristopu AWD bo za vsako napravo določena posebna zasnova. AWD morda ni ves čas primeren. Poleg tega oblikovanje spletnih strani AWD zahteva več časa in denarja v primerjavi s spletnimi mesti RWD.

Prednosti odzivnega oblikovanja:

# 1) Uporabniška izkušnja: Na osnovi naprave, iz katere dostopamo do RW, skriva nenavadne elemente in uporabnikom pomaga hitreje doseči svoje cilje.Na primer:če odpremo RW iz mobilnega telefona, potem skrije nepomembne elemente in pospeši nalaganje spletnih strani.

#two) Skupna raba ali povezovanje: Za RW se za različne naprave uporablja samo en URL. Ker samo en URL zbira vse podatke in informacije iz različnih naprav, daje boljšo uporabniško izkušnjo uporabnikom.

# 3) Za RW je potrebno malo ali minimalno vzdrževanje.

# 4) Postavitve RW so tekoče.

Razlike med odzivnim spletnim oblikovanjem in prilagodljivim spletnim oblikovanjem:

RWD in AWD sta med seboj tesno povezana.

• RWD se hitro in pozitivno odzove na spremembe, medtem ko je AWD enostavno spremeniti za nov namen.
• RWD ima več postavitev mreže tekočin, AWD pa več postavitev s fiksno širino.
• Slike v RWD so imenovane kot kontekstualne.

Glavne komponente odzivnega oblikovanja spletnih strani:

Odzivno spletno oblikovanje ima tri glavne komponente:

# 1) Prilagodljive postavitve: Izdelava spletnega mesta s prilagodljivo mrežo, ki jo je mogoče enostavno dinamično spremeniti na poljubno širino.

#two) Medijske poizvedbe: Navedite različne sloge za brskalnike in naprave glede na kontekst, na primer usmerjenost naprave, pogled itd.

# 3)Prilagodljiv medij: Ko se velikost oglednih oken spreminja, morajo tudi mediji (slike, video posnetki itd.) Spremeniti svojo velikost ali ločljivost v skladu z zahtevo.

Opomba : »Pogled« je območje brskalnika, kjer je prikazana dejanska vsebina spletnega mesta. Viewport ne vključuje orodnih vrstic, zavihkov itd.

Primeri odzivnega spletnega oblikovanja

Primer # 1)

Odprite povezavo www.fpl.com iz različnih naprav in opazujte URL. URL odzivnega spletnega mesta ostaja enak za vse naprave.

do) Pogled RW z namizja ali prenosnika (velik zaslon)

b) Pogled RW iz tabličnega računalnika (srednja velikost zaslona)

c) Pogled RW iz mobilnega telefona (majhen zaslon)

2. primer

Odprite spletno mesto www.yepme.com iz prenosnika in tudi iz mobilnega telefona ter primerjajte URL-je. To yepme.com povezava ni odzivna povezava.

do) Pogled neodzivnega spletnega mesta z namizja ali prenosnika

razlika med preskusom obremenitve in preizkusom zmogljivosti

b) Pogled neodzivnega spletnega mesta z mobilnega telefona

Kako preizkusiti odzivno spletno mesto

Test odzivnega oblikovanja pomeni testiranje spletne strani ali URL iz različnih naprav. Praktično odzivnega spletnega mesta ni mogoče preizkusiti v celoti, ker moramo za to nastaviti različne sisteme za različne velikosti zaslona.

Možen način odzivnega testa je spreminjanje velikosti okna brskalnika v skladu s testnim scenarijem.

Nekateri brskalniki, kot sta IE in Safari, bodo ponujali vtičnike ali razširitve brskalnika, ki vam bodo pomagali ogledati območje vidnega polja v slikovnih pikah. To olajša testiranje, tako da s spreminjanjem pikslov dobite želeno velikost zaslona.

Drugi brskalniki, kot je Chrome, ponujajo programsko opremo ali imenovani program “Emulator” kar bo pomagalo spremeniti funkcije zaslona in okolje glede na želeno napravo, potrebno za preskušanje.

Opomba: “Emulator” je programska oprema ali program, ki je na voljo v brskalniku, zaradi česar se gostiteljski sistem (trenutni brskalnik) obnaša kot gostujoči sistem (brskalnik želene naprave, ki jo je treba preizkusiti glede na želeno velikost zaslona).

Čeprav vam emulatorji ne morejo dati natančnega okolja, potrebnega za testiranje, so stroškovno učinkovita rešitev za testiranje RW na visoki ravni.

Vzorčni scenariji preizkusov za odzivno testiranje spletnih mest:

Preizkuševalec odzivnega spletnega oblikovanja se mora prepričati, da odzivni dizajn ustreza vsem zgoraj omenjenim testni scenariji da se prepričate, da je odziven dizajn brez napak.

# 1) Odzivna povezava do spletnega mesta mora biti enaka za vse brskalnike v vsaki napravi, ne glede na ločljivost zaslona.

Recimo www.abc.com je odzivno spletno mesto. Če ga odpremo na prenosnem računalniku in mobilnem telefonu, mora biti URL na obeh napravah enak. Spletna stran, odprta v mobilnem brskalniku, se ne sme začeti www.m.abc.com ali www.mobile.abc.com

Primer: Odprite spletno mesto www.kotak.com iz prenosnega računalnika in ga odprite tudi iz mobilnega telefona in opazujte URL v obeh napravah. URL za obe napravi ni enak.

Spodnji posnetek prikazuje, kako se URL spremeni za neodzivno spletno mesto v različnih napravah kot sta prenosni in mobilni telefon.

Odprite spletno mesto www.w3schools.com iz prenosnega in mobilnega telefona ter preverite URL-je. Pri obeh napravah bi moralo biti enako.

Spodnji posnetek prikazuje, da URL ostane enak za odzivno spletno mesto v različnih napravah:

#two) Mesto prikaza vsebine (slike, podpovezave, meniji itd.) Odzivnega spletnega mesta se mora dinamično spreminjati glede na spremembo ločljivosti zaslona. To pomeni, da če spremenimo ločljivost zaslona iz velikosti prenosnika v mobilni telefon, se mora prikaz možnosti menija dinamično spreminjati.

Primer: Odprite povezavo www.fpl.com iz prenosnega računalnika in kliknite meni v desnem zgornjem kotu okna. Možnosti menija so prikazane, kot je prikazano spodaj:

najboljši brezplačni pc čistejši windows 10

Odprto www.fpl.com iz mobilnega telefona in kliknite meni v desnem zgornjem kotu okna. Možnosti menija so spodaj:

Opomba: Ta scenarij je mogoče preizkusiti tudi z uporabo emulatorjev brskalnika (Nekdanji:krom).

Odprite spletno mesto www.fpl.com skozi namizje in opazujte, kako so prikazane možnosti menija. Glej spodnji posnetek:

Zdaj spremenite velikost okna brskalnika na velikost zaslona za mobilne naprave in nato preverite prikaz možnosti menija. Glej spodnji posnetek:

# 3) Tudi URL-ji odzivnega spletnega mesta morajo biti ločeni.

Predpogoj za preizkus tega scenarija: Prosite razvijalca, da na spletno mesto Odzivno testiranje vstavi katero koli podpovezavo, kjer se podpovezava ne odziva.

Na primer, lahko razvijalec vstavi povezavo www.snapdeal.com na naše spletno mesto za testiranje.

Zdaj odprite spletno mesto za odzivno testiranje iz mobilnega telefona in kliknite podpovezavo, omenjeno v predpogoju. Nato se mora URL podpovezave spremeniti v https://m.snapdeal.com .

# 4) Isti scenarij je mogoče preizkusiti tudi iz prenosnega računalnika. Odprite RW iz namizja ali prenosnega računalnika in kliknite podvezo (omenjeno v predpogoju preizkusnega scenarija tri), ki se ne odziva. URL podpovezave se ne bi smel spremeniti (ker preizkušamo ta scenarij iz prenosnega računalnika, bi URL moral ostati enak).

# 5) Predpogoj za preizkus tega scenarija: Prosite razvijalca, da vstavi katero koli podpovezavo,na primer, www.paytm.com na mesto testiranja. V mobilni napravi, v kateri boste izvedli ta scenarij, mora biti v mobilni napravi nameščena ustrezna aplikacija Paytm.

Zdaj odprite naše testno odzivno spletno mesto iz mobilnega telefona in kliknite na podpovezavo »paytm«. Nato je treba odpreti aplikacijo Paytm, ki je nameščena v mobilnem telefonu. (Uporabnik ne sme biti preusmerjen na spletno mesto v brskalniku ali drugem oknu; odprta mora biti samo aplikacija.)

# 6) Slike na odzivnem spletnem mestu so odvisne od ločljivosti. To pomeni, da se ločljivost slike, vstavljene v kodo odzivnega spletnega mesta, zasnovanega za mobilno združljivost, razlikuje od ločljivosti namizja ali tabličnega računalnika. Vsaka velikost zaslona mora imeti svojo zasnovo v zasnovi.

Predpogoj za preizkus tega scenarija: Testiranje in preverjanje ločljivosti slik je lahko težka naloga. Prosite razvijalca, naj na odzivno spletno mesto vstavi tri različne slike ločeno za mobilne naprave, tablice in namizja.

Odprite spletno mesto za testiranje odzivnega oblikovanja z namizja, tabličnega računalnika in mobilnega telefona. Slike na odzivni spletni strani bi se morale za vse tri naprave razlikovati.

(ALI)

Odprite preskusni RW z namizja in preverite sliko na spletni strani. Zdaj spremenite velikost okna na tablico in preverite sliko. Ta mora biti drugačna od slike, prikazane za velikost zaslona namizja. Zdaj lahko okno spremenite na velikost zaslona za mobilne naprave in preverite sliko. Tudi ta slika se mora razlikovati od zgornjih dveh slik.

Primer: Odprite odzivno spletno mesto www.fpl.com z namizja; z desno miškino tipko kliknite sliko na domača stran -> izberite »Preveri« v meniju. Iz kode preverite ločljivost slike (preverite pripono imena slikovne datoteke .jpg). Oglejte si spodnji posnetek zaslona:

Zdaj spremenite velikost istega okna na velikost zaslona tabličnega računalnika in preverite ločljivost slike. (Razširitev imena slike je medium.jpg)

Na koncu spremenite velikost okna na velikost mobilnega zaslona in preverite sliko. (Razširitev imena slike je small.jpg)

# 7) Naključno kliknite kjer koli na spletni strani in preverite, ali se kateri koli podatki ali besedilo, ki ni hiperpovezava, sprožijo in preusmerijo na katero koli drugo stran ali vsebino. S tem se preveri, ali je katera koli beseda ali besedilo v hiperpovezavi označena kot hiperpovezava zadnji konec .

Opomba : V nekaj projektih zahteve govorijo o velikosti slikovnih pik in ločljivosti zaslona za določene naprave. (Na primer, pogled tabličnega računalnika za njihov RW mora biti 15:15 slikovnih pik, za mobilni telefon pa ob 10:10 itd.)

Testiranje dinamičnih sprememb, ki bi se morale zgoditi za zaslon RW, ko spremenimo velikost slikovnih pik, je glavni scenarij.

# 8) V brskalniku odprite naš testni RW in si oglejte vsebino in prikaz glavnih slik. Zdaj spremenite velikost okna do mejne vrednosti velikosti tabličnega računalnika in preverite spremembe, ki bi se morale zgoditi pri ločljivosti slike in kateri koli drugi vsebini. Na prelomnih točkah naj bi se spremembe dogajale dinamično (včasih se spremembe ne bodo zgodile na prelomnih točkah in se lahko spremenijo pri kakšni drugi velikosti slikovnih pik, ki je napaka.)

Orodja za testiranje odzivnega spletnega mesta

Obstaja malo orodij (spletnih mest), ki vam omogočajo predogled spletnih strani našega odzivnega spletnega mesta.

Na primer,lahko odzivno spletno mesto preizkusimo v različnih vnaprej določenih ločljivostih zaslona (pametni telefoni, tablični računalniki itd.) in ga tudi prilagodimo poljubni ločljivosti. Ta orodja omogočajo lažje in hitrejše testiranje. Takšna orodja v brskalniku lahko imenujemo Odgovornik .

Nekatera orodja ponujajo tudi pomembno funkcijo zajemanja odzivnega posnetka zaslona, ​​ki bi nam lahko pomagal preizkusiti zasnove spletnega mesta, HTML, postavitve, CSS itd. Odzivnega spletnega mesta.

Ta orodja so odlična alternativa, kadar dejanske naprave niso na voljo ali pripravljene.

Tu je seznam hitrih orodij:

# 1) Odziven preverjalec oblikovanja

V zgornje polje »Enter Your URL Here« vnesite URL odzivnega spletnega mesta, ki ga je treba preizkusiti, in kliknite »GO«. Izberete lahko celo napravo in ločljivost, v kateri si želite ogledati odzivno spletno mesto.

Zdaj vstopi www.fpl.com v polju izberite postavitev »Nexus 7 PORTRAIT« in kliknite GO. Spletno mesto se prikaže v ločljivosti izbrane oblike.

#two) Screenfly

Vstopite na spletno mesto za testiranje www.fpl.com in kliknite GO.

Spremenite postavitev na namizje, tablični računalnik, mobilno napravo itd. In preizkusite spletno mesto. S tem orodjem lahko celo prilagodite ločljivost.

Na primer, nastavite ločljivost zaslona na 512 x 256 in preizkusite spletno mesto.

Opomba : S tem orodjem lahko celo preizkusite scenarij 6 enostavno s spreminjanjem ločljivosti in preverjanjem poimenovanja slike.

# 3) Designmodo

Vnesite kateri koli URL, www.makemytrip.com in kliknite Enter.

Na desni in zgornji strani brskalnika lahko spremenite postavitev spletnega mesta na kateri koli določen mobilni model ali napravo itd.

Opomba : To orodje ima še eno funkcijo, kot je vlečenje zaslona in spreminjanje ločljivosti na želeno ločljivost.

# 4) je odziven

Vnesite preskusni URL, www.fpl.com v polju in kliknite gumb “Test”.

Opomba: To orodje ima le nekaj možnosti fiksne postavitve, na katerih je mogoče preizkusiti našo spletno stran.

# 5) Mattkersley

Če želite imeti pogled svojega RW na več velikostih zaslona hkrati, uporabite to orodje mattkersley je tisto, kar potrebuješ.

Zdaj v naslovno vrstico vnesite preskusni URL in kliknite enter. RW si lahko hkrati ogledate na več velikostih zaslona.

# 6) Privzeto, chrome ima malo razvijalnih orodij s pomočjo katerega lahko simuliramo način naprave in njihove zmožnosti.

Če želite uporabiti to funkcijo kroma, odprite katero koli spletno mesto za odzivno oblikovanje, kot je www.fpl.com v kromu in z desno miškino tipko kliknite spletno stran in v meniju izberite možnost »Preveri« ali pritisnite Ctrl + Shift + I. Spodnje okno se odpre na dnu spletne strani.

Zdaj kliknite ikono, kot je prikazano na spodnjem posnetku zaslona.

Odpre se mobilni način spletne strani. Od tega lahko spremenite ločljivost na kateri koli določen slikovni pik in tudi na kateri koli vnaprej določen model mobilnega telefona, ki je prikazan v spustnem meniju. Oglejte si spodnji posnetek, da dobite jasno predstavo:

Opomba: Spletno stran lahko spremenimo tudi v pokončni ali ležeči pogled.

Druga dobra orodja za preizkušanje odzivnega oblikovanja:

7) ResponsiveDesign
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
enajst) Odgovornik
12) Studiopress
13) ResponsiveTest
14) Za MAC stroje imamo ločeno aplikacijo, imenovano “ FIT ”Za testiranje RW. Ta aplikacija vam omogoča nastavitev različnih mejnih vrednosti na različnih napravah za testiranje. APTUS ni brezplačna aplikacija in jo moramo kupiti v trgovini Mac App Store.

Izzivi preizkušanja odzivnega oblikovanja in možnih rešitev

Strategija dinamičnega preskusa

S premikanjem s 320 × 480 (ločljivost iPhone4) na 2048 × 2048 (velik monitor) ostane več kot 4 milijone možnih velikosti brskalnika. Večina testnih skupin bo seznam testnih naprav omejila na peščico. Tudi takrat je težavo ročnega testiranja težko ali nemogoče rešiti.

Razvijalci nikakor ne morejo predvideti vseh težav s platformo, preizkuševalci pa jih ne morejo ujeti pred izdajo. Zaradi tega v proizvodnji najdemo občasno težavo z uporabniškim vmesnikom.

Mogoče je nekdo zmanjšal velikost svojega brskalnika, zaradi česar so pomembna besedilna polja prekrita z oznako strani. Morda neka koda, namenjena obdelavi dinamičnega spreminjanja velikosti strani, prekine modalne izbirnike datumov in je običajni test, ki temelji na WebDriverju, nikoli ne opazi. Obstaja preveč možnosti prikaza za izdelavo testov in premalo časa.

Oglejmo sirealističen primerza ponazoritev problema.

Dinamične strani, kot so drsniki za oglaševanje in vsebina, ki se pretaka od uporabnikov v različnih velikostih strani, so glavna sestavina številnih programskih izdelkov. Če k temu dodamo še dejstvo, da ne moremo predvideti, kako bo stran prikazana, se številna prizadevanja za avtomatizacijo začnejo z neuspehom.

Za to težavo vidim dve priljubljeni rešitvi - z uporabo standardiziranega ali izhodiščnega nabora podatkov in osvežitvijo, ki vsakič zažene testni paket, in jemanjem stvari po eno okolje ali platformo naenkrat.

Standardni podatki zagotavljajo, da bo vsebina strani videti enaka vsakič, ko naložimo testno okolje. Ta strategija v kombinaciji z nečim, kot je Sauce Labs, ki ljudem omogoča dostop do številnih platform in pridete precej daleč.

Ta pristop zahteva čas in sredstva. Za ustvarjanje in posodabljanje izvoza baz podatkov boste potrebovali nekoga z dostopom do baze podatkov, običajno DBA. Nekdo mora ustvariti skripte za nastavitev in razgradnjo skriptov, da vzdržuje testno okolje. Po vseh teh naporih boste morda na koncu dobili vrsto saniranega okolja, v katerem se hrošči radi skrivajo.

Lahko pa uporabite tehnologijo vizualnega testiranja za avtomatizacijo testov na spletnih straneh, ki se razlikujejo po postavitvi in ​​vsebini. S pomočjo tega orodja lahko ustvarite teste brez sprememb v testnem okolju in brez potrebe po naborih spretnosti od ljudi zunaj vaše testne skupine.

Oglejmo si primer.

Razmislite o mobilni aplikaciji Twitter.

Ta izdelek je kombinacija nenehno spreminjajoče se uporabniške vsebine in oglaševanja. V glavi je tudi nekaj osnovnih delov uporabniškega vmesnika, na primer vir novic in obvestila.

Z orodjem za vizualno preizkušanje lahko začnete z zajemom zaslona celotne pomične strani, ne samo vidnega območja. Izberete lahko možnost primerjave, ki ignorira besedilno vsebino, vendar se osredotoča na elemente na strani.

Na primer, lahko vidite, da polja za tvitove obstajajo, da ima vsak tvit imenski element in element datum / čas, ne da bi vas skrbelo, kaj je v elementih.

Iskanje elementov na celotnih straneh razbremeni tudi vzdrževanje in zapletenost, ki jo vidimo v številnih avtomatiziranih testih. Namesto da manipulirate s podatki na strani, jih shranite, pomaknete in nato preverite, dobite vse v enem posnetku. To pomeni manj kode za pisanje, manj kode, ki jo je treba vzdrževati, in manj lažnih pozitivnih rezultatov pri nočnih preizkusih.

kako kopirati matriko java -

Odzivno testiranje za odziven dizajn:

Odziven dizajn je dodal kombinacijski problem vsaki razpoložljivi platformi. Vprašanje je; izmed vseh teh možnih platform in velikosti zaslona, ​​ki jih izberemo za najboljšo pokritost s preskusi.

Zmanjšanje števila okolij, ki jih pokrivamo, na samo najbolj priljubljena, olajša tehnično nalogo, hkrati pa ignorira problem pokritosti.

Povečanje števila okolij zgolj z avtomatizacijskim ogrodjem ustvarja nočno moro vzdrževanja in potencialno doda nerešljiv testni problem.

Kombinacija dobrih orodij za vizualno testiranje s prilagodljivim okvirom za avtomatizacijo uporabniškega vmesnika, kot je spletni gonilnik, lahko s tehničnimi vidiki te težave ne le lažje reši, ampak jih je mogoče rešiti.

Cilj je dobra pokritost uporabniškega vmesnika z razumno obremenitvijo vzdrževanja. Vizualno testiranje je vaša edina zanesljiva in razširljiva možnost.

Nasveti za odzivno spletno testiranje

# 1) Med testiranjem RW-ja morate biti pozorni na skladnost oblikovanja, kot so poravnave slik, besedil, oblazinjenje okoli robov itd. V vseh brskalnikih in operacijskih sistemih.

#two) Med preskušanjem RW se mora preskuševalec zavedati, kaj preizkusiti in kako preskusiti na več napravah na različnih mejnih točkah. V nasprotnem primeru bi lahko bilo precej izčrpno in zmedeno.

# 3) Za temeljito testiranje odzivnega spletnega mesta je nujna koordinacija preizkuševalcev in razvijalcev. Razvijalec bi moral testerjem pomagati pri ustvarjanju pogojev, omenjenih v predpogojih testnih primerov.

# 4) Preverite, ali so spletne strani berljive v vseh ločljivostih, torej vsebina mora biti berljiva, tudi če brskalnik spremenimo na velikost zaslona za mobilne naprave.

# 5) Pomembna vsebina RW bi morala biti vidna za vse mejne točke, torej če spremenimo velikost brskalnika z namiznega zaslona na mobilni zaslon, potem naj glavne slike, glavno besedilo, meni itd. Ostanejo enaki.

# 6) Če je velikost brskalnika spremenjena za testiranje, mora biti katero koli območje klika (na primer gumbi, meniji, podpovezave itd.) RW primerno za klikanje.

# 7) S spreminjanjem velikosti brskalnika in testiranjem odzivnega spletnega mesta lahko ugotovite le nekaj večjih težav, medtem ko je v mobilnih napravah morda nekaj drugih težav, povezanih s potegom prstov, tapkanjem itd. Testiranje teh posebnih lastnosti na dejanskih napravah lahko privede do boljšega odkrivanja in odstranjevanja napak.

Zaključek

Ko preizkušamo, bo imel odziven dizajn veliko izzivov. Za premagovanje izzivov bi morali razmišljati na učinkovit način.

Testiranje odzivnega spletnega mesta je zelo pomembno za uspešno prihodnost mnogih mobilne aplikacije. Uporabniki mobilnih naprav se bodo samo še povečali in njihova pričakovanja so zelo različna od pričakovanj uporabnikov namiznih računalnikov. Izvajanje in temeljito preizkušanje RWD je odličen način, da svoje spletno mesto prilagodite pričakovanjem.

Izvajanje in temeljito preizkušanje RWD je odličen način, da svoje spletno mesto prilagodite pričakovanjem.

Upamo, da bodo informacije, nasveti in preskusni scenariji, obravnavani v tem članku, zagotovo pomagali vašim potrebam po odzivnem testiranju spletnih mest.

O avtorju: To je gost gosta Laxmija. Ima 7+ let izkušenj s testiranjem programske opreme in trenutno dela kot višja inženirka za preskušanje programske opreme.

Preizkusite vse primere v tem članku in nam sporočite, če imate kakršna koli vprašanja / komentarje o njih.

Priporočeno branje

• Alfa testiranje in beta testiranje (popoln vodnik)
• Popoln vodnik za preizkus preverjanja gradnje (testiranje BVT)
• Funkcionalno testiranje vs nefunkcionalno testiranje
• Vrste testiranja programske opreme: različne vrste preskušanja s podrobnostmi
• Najboljša orodja za testiranje programske opreme 2021 (QA Test Automation Tools)
• Vadnica za testiranje skladišča podatkov ETL (popoln vodnik)
• Vodič za preizkušanje varnosti spletnih aplikacij
• Najboljše storitve preverjanja kakovosti QA s strani SoftwareTestingHelp