Cum să efectuați cu ușurință testarea de regresie vizuală în WordPress

Menținerea aspectului site-ului dvs. WordPress așa cum ar trebui să fie poate fi stresant. O mică actualizare sau o ajustare rapidă a CSS-ului poate strica discret un aspect, iar dvs. adesea nu veți observa până când un vizitator nu vă atrage atenția asupra acestui lucru.

Partea grea este că verificarea fiecărei pagini manual nu este practică. Necesită prea mult timp și este ușor să ratați modificări mici. 🤦

Și, deși „testarea regresiei vizuale” sună tehnic, nu aveți nevoie de instrumente pentru dezvoltatori pentru a o utiliza. Este o modalitate simplă de a economisi ore de verificare manuală și de a evita probleme de aspect jenante.

După ce am testat diferite instrumente și metode, am găsit o opțiune fiabilă care nu necesită cunoștințe de codare sau expertiză tehnică. În acest ghid, vă voi arăta cum să efectuați teste de regresie vizuală pe site-ul dvs. WordPress în doar câțiva pași simpli.

Ce este testarea regresiei vizuale?

Testarea regresiei vizuale este o modalitate de a verifica dacă designul site-ului dvs. se modifică neașteptat după o actualizare. Funcționează prin compararea instantaneelor înainte și după ale paginilor dvs. pentru a detecta orice lucru care pare diferit.

Ori de câte ori actualizați nucleul WordPress, instalați un plugin, schimbați o temă sau ajustați codul, există posibilitatea ca ceva de pe partea frontală să se deplaseze din poziție – un buton lipsă, un aspect stricat sau o imagine care brusc nu se mai încarcă.

Problema? Aceste bug-uri vizuale trec adesea neobservate până când un vizitator le semnalează printr-un formular de contact sau un sondaj de feedback despre design. Până atunci, daunele aduse experienței utilizatorului site-ului dvs. ar putea fi deja făcute.

De aceea, efectuarea testelor de regresie vizuală este atât de utilă.

Procesul este simplu: faceți instantanee ale paginilor dvs. înainte și după o actualizare, apoi comparați-le pentru a identifica orice s-a schimbat.

Și dacă testați pe un site de staging (ceea ce recomand), puteți face actualizări și rula comparații în siguranță pentru a detecta probleme vizuale înainte ca ceva să fie publicat.

De asemenea, nu trebuie să rulați aceste comparații manual.

Cu instrumente de testare a regresiei vizuale precum VRTs, Percy sau BackstopJS, puteți automatiza comparațiile de capturi de ecran și puteți verifica cum arată site-ul dvs. pe diferite dimensiuni de ecran – ajutându-vă să detectați probleme de aspect pe desktop, tabletă și mobil.

De ce este important testarea de regresie vizuală pentru utilizatorii WordPress?

Dacă gestionați un site WordPress, testarea de regresie vizuală este o plasă de siguranță care economisește timp. În loc să navigați prin fiecare pagină după o actualizare, acest instrument vă oferă un raport vizual despre ce s-a schimbat – și dacă este ceva ce trebuie să remediați.

Este deosebit de util în multe scenarii, cum ar fi agențiile care rulează actualizări pe mai multe site-uri WordPress, freelancerii care gestionează site-urile clienților sau proprietarii de magazine online care doresc să se asigure că paginile de produse și de finalizare a comenzii rămân intacte.

Pe scurt, testarea de regresie vizuală vă ajută să evitați surprizele frustrante, să economisiți timp și să mențineți site-ul dvs. WordPress funcționând fără probleme.

Acestea fiind spuse, vă voi arăta cum să faceți cu ușurință testarea de regresie vizuală în WordPress. Iată o prezentare generală rapidă a pașilor pe care îi vom acoperi:

• Pasul 1: Instalați și activați pluginul de testare a regresiei vizuale
• Pasul 2: Configurați setările pluginului VRT
• Pasul 3: Adăugați noi pagini sau postări de testat
• Pasul 4: Verificați diferențele vizuale
• Pasul 5: Revizuire și acțiune
• Întrebări frecvente: Cum să rulați testarea de regresie vizuală în WordPress
• Pașii următori: Îmbunătățiți designul site-ului dvs. WordPress

Pasul 1: Instalați și activați pluginul de testare a regresiei vizuale

În acest tutorial, voi folosi pluginul VRTs, deoarece este prietenos cu începătorii și ușor de utilizat pentru testarea de regresie vizuală. Fie că este vorba de un layout deplasat, un buton lipsă sau un element defect după o actualizare, VRTs vă ajută să-l detectați devreme.

Iată cum funcționează: Plugin-ul face capturi de ecran ale paginilor pe care le selectați. Puteți apoi declanșa comparații manual sau le puteți programa să ruleze automat după ce faceți modificări pe site-ul dvs., cum ar fi actualizarea unui plugin sau ajustarea temei.

Pluginul compară apoi capturile de ecran „înainte” și „după” una lângă alta și evidențiază orice diferențe vizuale.

Deci, în loc să verificați manual fiecare pagină, obțineți un raport vizual rapid care arată ce s-a schimbat și dacă ceva pare în neregulă.

Pentru a instala pluginul, trebuie mai întâi să vizitați site-ul web VRTs și să vă înscrieți pentru un plan făcând clic pe butonul „Începeți gratuit”.

Puteți apoi alege unul dintre planuri.

Planul gratuit vă permite să testați până la 3 pagini pe zi pe un singur domeniu și să programați teste zilnice. Planurile plătite vă permit să testați mai multe pagini, să rulați teste manuale și să rulați automat teste de regresie vizuală după actualizările WordPress core, pluginuri și teme.

Pur și simplu faceți clic pe „Cumpărați acum” sau „Instalați acum” sub planul pe care doriți să îl utilizați.

Apoi, urmați instrucțiunile pentru a vă înregistra un cont pe site-ul VRT și pentru a adăuga detaliile de plată.

După ce ați finalizat înregistrarea, veți ajunge la tabloul de bord VRTs, unde puteți descărca pluginul ca fișier .zip.

Apoi, pur și simplu accesați pagina Plugins » Add Plugin și faceți clic pe butonul „Upload Plugin”. De aici, puteți alege fișierul .zip al pluginului VRTs pe care tocmai l-ați descărcat.

Asigurați-vă că activați pluginul odată ce a fost instalat. Pentru detalii complete, puteți consulta ghidul nostru despre cum să instalați un plugin WordPress.

Pasul 2: Configurați setările pluginului VRT

Odată ce ați activat pluginul, este timpul să decideți când ar trebui să ruleze testele dvs. de regresie vizuală.

Accesați VRTs » Setări din meniul de administrare WordPress.

În pagina de setări, derulați în jos la secțiunea „Declanșatoare”. Aici îi spuneți pluginului când să ia și să compare automat instantanee.

Iată opțiunile disponibile:

• Rulați teste la fiecare 24 de ore (Gratuit) – Aceasta este setarea implicită. VRT-urile vor verifica automat postările sau paginile selectate o dată pe zi pentru modificări vizuale.
• Rulați teste după actualizările WordPress și ale pluginurilor (Pro) – Excelent pentru a detecta probleme de aspect cauzate de actualizări, chiar în momentul în care apar.
• Rulați teste cu aplicațiile dvs. preferate (Pro) – Conectați VRTs cu instrumente sau fluxuri de lucru externe folosind webhooks.
• Rulați teste la cerere (Pro) – Declansați manual teste ori de câte ori aveți nevoie de ele, direct din tabloul de bord WordPress.

După ce ați selectat declanșatorul care se potrivește fluxului dvs. de lucru (sau licenței dvs.), pur și simplu faceți clic pe butonul „Salvați modificările” din partea de jos a paginii.

Pasul 3: Adăugați noi pagini sau postări de testat

După ce ați configurat setările pluginului, este timpul să alegeți ce pagini sau postări doriți să includeți în testele de regresie vizuală.

Să trecem la fila „Teste”, unde veți gestiona și rula testele vizuale. De aici, puteți face clic pe butonul „Adăugați nou”. Acest lucru vă va permite să alegeți postări sau pagini de testat.

În fereastra pop-up care apare, alegeți postările sau paginile pe care doriți să le includeți în testarea dvs. de regresie vizuală.

Apoi, faceți clic pe „Adăugați un test nou” pentru a confirma selecțiile dvs.

Pluginul VRTs va face o captură inițială a fiecărei pagini selectate. Aceasta acționează ca punct de referință – practic o versiune „înainte” a modului în care arată acum postările sau paginile dvs.

După configurarea testului, veți vedea o instrucțiune de reîmprospătare a paginii pentru a încărca instantaneul inițial. Continuați și reîmprospătați.

După reîmprospătare, veți vedea un link către instantaneul pentru pagina sau postarea pe care ați adăugat-o pentru testare.

Veți vedea, de asemenea, că „Starea testului” este setată automat la „Programat” pentru ziua următoare. Acest lucru se datorează faptului că versiunea gratuită a VRT-urilor rulează teste pe un program de 24 de ore.

Puteți face clic pe linkul „Vizualizați instantaneul” pentru a verifica captura de ecran inițială.

Se va deschide într-o filă nouă, astfel:

Dacă utilizați versiunea gratuită, testul dvs. este acum programat pentru ziua următoare. Puteți continua să lucrați la site-ul dvs. și să verificați din nou în 24 de ore pentru a vedea raportul de comparație.

Dar dacă aveți versiunea Pro, puteți rula un test imediat pentru a identifica problemele pe loc.

Pasul 4: Verificați diferențele vizuale

Odată ce testul este complet și sunt detectate modificări vizuale, veți vedea o notificare în fila VRTs » Runs.

Pe ecranul Runs, puteți plasa cursorul peste rularea cu modificări detectate.

Apoi, faceți clic pe linkul „Afișați detalii” atunci când apare.

Pe ecranul următor, veți vedea o comparație side-by-side a paginii dvs., arătând versiunile înainte și după.

Pluginul evidențiază automat diferențele vizuale, astfel încât să puteți identifica rapid probleme precum:

• Schimbări de layout și elemente nealiniate: Dacă designul dvs. se modifică după o actualizare de plugin sau o schimbare de temă, cum ar fi mutarea butoanelor din poziție sau sărituri de text, VRT-urile le vor semnala.
• Elemente lipsă sau defecte: Fie că este vorba de o imagine lipsă, un buton CTA sau un formular încorporat, VRT-urile fac ușor de identificat orice dispare neașteptat.
• Conținut dinamic (False Pozitive): Uneori, instrumentul poate semnala o modificare care nu este o eroare. Acest lucru se întâmplă adesea cu glisiere de imagini, reclame sau testimonialuri rotative care se schimbă de fiecare dată când pagina se încarcă.
• Modificări neașteptate ale conținutului: Pluginul vă va alerta, de asemenea, cu privire la modificările de text, linkuri sau imagini, astfel încât să puteți prinde editări neautorizate sau erori de publicare înainte ca utilizatorii să le facă.

Puteți utiliza mânerul de glisare din centrul ecranului pentru a glisa între versiunile vechi și noi și pentru a confirma vizual modificările exacte.

Pasul 5: Revizuire și acțiune

După rularea unui test de regresie vizuală, luați măsuri pe baza rezultatelor. Iată ce puteți face în continuare:

• Editați manual pagina: Dacă modificările sunt mici, puteți remedia problemele direct prin editarea paginii, cum ar fi ajustarea aspectului, mutarea elementelor sau adăugarea funcționalităților lipsă.
• Reveniți la o copie de rezervă: Dacă modificările sunt mai mari sau mai greu de remediat, puteți restaura pagina la o versiune anterioară folosind copia de rezervă a site-ului dvs. web sau istoricul versiunilor. Acest lucru ajută la evitarea lăsării problemelor pe site-ul dvs.

Acestea fiind spuse, rețineți că dacă remediați o problemă, dar testul arată în continuare eroarea, asigurați-vă că ștergeți memoria cache a WordPress-ului pentru ca instrumentul să vadă cea mai recentă versiune a site-ului dvs.

Întrebări frecvente: Cum să rulați testarea de regresie vizuală în WordPress

Dacă abia începeți cu testarea de regresie vizuală, nu sunteți singur. Iată câteva răspunsuri rapide la întrebări frecvente de la utilizatorii și dezvoltatorii WordPress.

Care este diferența dintre testarea instantanee și testarea regresiei vizuale?

Testarea snapshot este un termen de dezvoltator care se referă de obicei la verificarea dacă ieșirea codului subiacent corespunde unui record anterior. Testarea de regresie vizuală verifică cum arată site-ul dvs. ochiului uman, comparând capturi de ecran pentru a detecta modificări de aspect sau design.

Care este cel mai bun instrument pentru testarea de regresie vizuală în WordPress?

Cea mai ușoară opțiune este plugin-ul VRTs – Visual Regression Tests. Este prietenos cu începătorii, rulează în tabloul de bord și nu necesită codare. Versiunea gratuită funcționează bine pentru majoritatea utilizatorilor.

Cum pot face testarea regresiei manual?

Testarea manuală înseamnă să navigați prin paginile dvs. importante după o actualizare pentru a vă asigura că totul arată în continuare corect. Veți dori să verificați pagini precum pagina principală, pagina de contact, postările de pe blog și orice aspecte sau pași de finalizare a comenzii personalizate. Funcționează, dar poate dura mult timp.

Cum accelerați testarea de regresie?

Automatizați-l. Un plugin precum VRTs – Visual Regression Tests poate captura capturi de ecran ale paginilor dvs. cheie și le poate compara pentru dvs., astfel încât să nu fie nevoie să verificați totul manual.
Utilizarea unui site de testare vă ajută, de asemenea, să detectați probleme înainte de a actualiza site-ul dvs. live.

Care sunt cele mai bune modalități de a testa designul unui site WordPress?

Un instrument de regresie vizuală este una dintre cele mai ușoare modalități de a detecta modificări de aspect după o actualizare. De asemenea, ajută la previzualizarea actualizărilor pe un site de testare înainte de a le publica.

Asigurați-vă că verificați cum arată paginile dvs. pe desktop, tabletă și mobil. Instrumentele de dezvoltare ale browserului facilitează testarea rapidă a diferitelor dimensiuni ale ecranului. Și, în final, obținerea feedback-ului de la utilizatori reali sau clienți vă poate ajuta să detectați detalii pe care le-ați putea omite.

Pașii următori: Îmbunătățiți designul site-ului dvs. WordPress

Sper că acest articol v-a ajutat să învățați cum să faceți testarea vizuală de regresie în WordPress. Dacă doriți să vă îmbunătățiți continuu site-ul, s-ar putea să vă placă și:

• Ghid pentru începători despre cum să reproiectați un site WordPress
• Elemente cheie de design pentru un site web WordPress eficient
• Cum să obții feedback despre designul site-ului în WordPress
• Cum să îmbunătățiți experiența utilizatorului în WordPress
• Întrebări de feedback despre experiența utilizatorului adresate vizitatorilor site-ului web

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.