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.

Pentru a începe, conectează-te la tabloul de bord al site-ului de staging (sau la site-ul tău live, dacă preferi).

Ș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ă testarea diferitelor instrumente și metode, am găsit o opțiune fiabilă care nu necesită nicio cunoștință de codare sau expertiză tehnică. În acest ghid, îți voi arăta cum să efectuezi teste vizuale de regresie pe site-ul tău WordPress în cinci 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 de 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ă administrezi un site web WordPress, testarea vizuală a regresiei este o plasă de siguranță care economisește timp.

Site-urile WordPress sunt în mod unic vulnerabile la întreruperi de aspect, deoarece sunt asamblate din multe părți independente — tema ta, page builder-ul, blocurile și pluginurile presupun toate lucruri diferite despre cum sunt redate paginile tale.

Oricare dintre acestea poate schimba în tăcere modul în care arată o pagină:

• O actualizare de plugin modifică stilul unui buton sau al unui formular
• O actualizare de bază WordPress modifică modul în care este afișat un bloc Gutenberg
• O actualizare WooCommerce modifică aspectul produsului sau câmpurile de plată
• O actualizare de temă ajustează spațierea, fonturile sau punctele de întrerupere responsive
• O editare CSS personalizată afectează mai multe pagini decât te așteptai

Testarea vizuală a regresiei WordPress surprinde aceste modificări neintenționate înainte ca vizitatorii tăi să le observe. În loc să parcurgi fiecare pagină după fiecare actualizare, instrumentul compară capturile de ecran înainte și după și marchează orice lucru care arată diferit.

Pentru proprietarii de site-uri ocupați, acest lucru înseamnă liniște sufletească. Pentru agențiile care administrează site-urile clienților, înseamnă surprinderea regresilor înainte ca un client să vă trimită un e-mail despre ele.

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

Pentru a începe, conectați-vă la tabloul de bord al site-ului dvs. de staging (sau la site-ul dvs. live, dacă preferați).

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

Iată cum funcționează: Pluginul 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 dvs.

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.

La momentul scrierii, planul gratuit îți permite să testezi până la 3 pagini pe zi pe un singur domeniu și să programezi teste zilnice. Planurile plătite îți permit să testezi mai multe pagini, să efectuezi teste manuale și să rulezi automat teste vizuale de regresie după actualizările WordPress core, de pluginuri și de 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 regresiei vizuale.

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:

• Modificări de aspect și elemente nealiniate: Dacă designul dvs. se modifică după o actualizare de plugin sau o modificare de temă, cum ar fi butoane care se mută din poziție sau text care sare, VRTs va semnala acest lucru.
• Elemente lipsă sau defecte: Fie că este vorba de o imagine lipsă, un buton CTA sau un formular încorporat, VRTs facilitează detectarea oricărui lucru care dispare neașteptat.
• Conținut dinamic (Fals Pozitive): Uneori, instrumentul poate semnala o modificare care nu este o eroare. Acest lucru se întâmplă adesea cu glisiere de imagini, reclame sau mărturii rotative care se schimbă de fiecare dată când se încarcă pagina.
• Modificări neașteptate de conținut: Pluginul vă va alerta, de asemenea, cu privire la modificări ale textului, linkurilor sau imaginilor, astfel încât să puteți detecta editări neautorizate sau erori de publicare înainte de utilizatori.

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.

Dacă modificarea a fost intenționată (cum ar fi o redesign planificată a paginii de pornire), poți pur și simplu să aprobi noua captură de ecran, astfel încât pluginul să știe să o folosească ca nouă bază de referință pe viitor.

Pasul 5: Revizuire și acțiune

După efectuarea unui test vizual de regresie, ia măsuri în funcție de rezultate.

Un lucru de știut înainte de a începe să revizuiești alertele: nu fiecare diferență marcată este de fapt un bug. Uneori, o pagină se modifică legitim la fiecare vizită, iar testul va marca și acele modificări.

Acestea se numesc fals pozitive și sunt cel mai frecvent motiv pentru care utilizatorii noi se frustrează din cauza testării vizuale a regresiei. Deoarece instrumentul verifică în esență dacă diferența de pixeli > 0%, orice element dinamic care deplasează pixelii va declanșa o alertă.

Iată cele mai frecvente declanșatoare de fals pozitive pe site-urile WordPress:

• Glisiere și animații(carusele de imagini, animații eroice, efecte de hover)
• Date live(fluxuri cu cele mai recente postări, număr de comentarii, contoare de stoc WooCommerce)
• Plasări de reclame și trackerecare încarcă conținut diferit la fiecare vizită
• Bannere de consimțământ pentru cookie-uri sau GDPRcare apar imprevizibil
• Imagini încărcate leneșcare s-ar putea să se fi încărcat sau nu atunci când a fost capturat screenshot-ul
• Fonturicare se redau ușor diferit înainte de a termina încărcarea

Când vedeți unul dintre acestea semnalat, deschideți vizualizarea de comparație în VRT-uri și utilizați opțiunea „ascunde elemente” pentru a exclude acea regiune de la testele viitoare. După aceea, veți vedea doar modificări reale de design care merită revizuite — ceea ce este exact ceea ce doriți.

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țiilor lipsă.
• Restaurare dintr-un backup: Dacă modificările de aspect sunt minore, le puteți anula adesea restaurând pagina la o versiune anterioară. Dacă o actualizare majoră v-a stricat întregul site, este posibil să fie necesar să restaurați un backup recent al site-ului. Dar amintiți-vă că acest lucru va anula toate datele site-ului dvs., ștergând potențial vânzări sau comentarii recente.

Acestea fiind spuse, rețineți că dacă remediați o problemă, dar testul încă arată eroarea, asigurați-vă că ștergeți cache-ul WordPress, precum și orice cache CDN sau de hosting. Astfel, instrumentul va vedea 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 pentru dezvoltatori care se referă de obicei la verificarea codului ascuns din spatele site-ului dvs. pentru a vedea dacă se potrivește cu o versiune anterioară, mai degrabă decât cum arată pe ecran.

Testarea de regresie vizuală verifică cum arată site-ul dvs. ochiului uman, comparând screenshot-uri pentru a detecta modificări de aspect sau de design.

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

Cea mai ușoară opțiune este pluginul VRTs – Visual Regression Tests. Este prietenos cu începătorii, rulează în interiorul tabloului de bord și nu necesită nicio 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 staging vă ajută, de asemenea, să detectați problemele î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 de ecran. Ș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.

Când ar trebui să rulez teste de regresie vizuală pe site-ul meu WordPress?

Cele mai bune momente pentru a rula un test de regresie vizuală sunt chiar înainte și chiar după orice modificare care ar putea afecta designul site-ului dvs. Aceasta include actualizări ale nucleului WordPress, actualizări de plugin-uri și teme, editări CSS personalizate și adăugarea de noi blocuri sau elemente de constructor de pagini.

Dacă nu faceți modificări frecvente, testele zilnice programate sunt suficiente pentru a detecta probleme lente, cum ar fi o actualizare de plugin care a stricat în tăcere un aspect pe care nu v-ați gândit să îl verificați.

Ce cauzează fals pozitive în testarea de regresie vizuală?

Fals pozitive apar atunci când testul semnalează o diferență care nu este de fapt o eroare. Cele mai comune cauze pe site-urile WordPress sunt glisoarele, animațiile, plasarea reclamelor, bannerele de cookie-uri, imaginile încărcate leneș și datele live, cum ar fi cele mai recente postări sau contoarele de stoc WooCommerce.

În VRT-uri, puteți ascunde aceste elemente, astfel încât să fie excluse din comparație, ceea ce înseamnă că testele viitoare vor semnala doar modificări reale de design.

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ă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.