Share
Testarea temeinică a unui site pe care l-ați creat este la fel de important ca și dezvoltarea acestuia.
Să presupunem că compania dvs. a creat un site web de comerț electronic. Dacă tocmai ați testat butonul "Cumpărați acum" pentru categoria electronică și a funcționat, ați putea crede că funcționează și pentru toate celelalte categorii. Ce se întâmplă dacă ați aflat mai târziu că o eroare împiedică utilizatorii să facă clic pe butonul "Cumpărați acum" pentru toate produsele din categoria de fitness? Ceva de genul asta va da cu siguranta o scadere in veniturile companiei de comert electronic. Nu se referă doar la venituri; afectează de asemenea reputația companiei. Utilizatorii pot evita în întregime vizitarea site-ului dvs. în favoarea concursului.
Dezvoltatorii și companiile evită uneori testarea temeinică a site-ului lor din cauza a două constrângeri principale: timp și bani. Chiar dacă ați efectuat toate testele posibile pentru site-ul dvs. pe un singur dispozitiv, nu există nicio garanție că acesta va funcționa și pe celelalte dispozitive. Există o mulțime de factori, cum ar fi browser-ul, sistemul de operare și dimensiunea ecranului care trebuie luate în considerare. În plus, noile dispozitive cu diferite dimensiuni și capabilități ale ecranului continuă să apară. Testarea a peste o mie de combinații de browsere, sisteme de operare și dimensiuni ale ecranului va fi, de asemenea, un proces consumator de timp. Ca urmare, multe companii nu testează site-urile lor cât mai bine cum ar trebui.
CrossBrowserTesting poate rezolva ambele probleme foarte elegant. Acest serviciu vă permite să executați teste automate pe peste 1.500 de dispozitive desktop și mobile, fără a lăsa niciodată confortul principalului browser de dezvoltare. Depanarea se întâmplă de la distanță, dar puteți interacționa cu site-urile chiar ca un utilizator real. Procesul nu va mai dura atât de mult timp, deoarece a fost posibil să puteți executa toate aceste teste în paralel.
Acest tutorial vă va ajuta să începeți cu CrossBrowserTesting și să vă arătați cum să executați teste automate pe mii de dispozitive în paralel. Ar trebui să vă înscrieți pentru o încercare gratuită pentru a urmări restul tutorialului.
Mocha este bogat în caracteristici și este unul dintre cele mai populare cadre de testare JavaScript asincronă pentru Node.js. Acesta vă permite să executați mai multe teste în serie, rezultând o raportare și o mapare precisă a excepțiilor necontrolate pentru corectarea cazurilor de testare. Cadrul ne oferă inainte de, după, beforeEach, și după fiecare cârlige. Puteți utiliza aceste cârlige pentru a stabili unele condiții preliminare pentru teste și a curăța mediul după ce ați efectuat orice încercare.
În timp ce Mocha vă poate ajuta să scrieți teste, veți avea nevoie de ajutorul unei biblioteci de afirmații pentru a verifica dacă rezultatele unui test sunt ceea ce vă așteptați să fie. Vom folosi Chai în acest tutorial. Biblioteca de afirmații este foarte flexibilă și vă permite să alegeți o interfață de alegere pentru testarea rezultatelor. Depinde de tine să o utilizați ar trebui să(), aştepta(), sau afirma() stilul afirmațiilor.
Mocha și Chai pot fi folosite pentru a rula toate tipurile de teste și pentru a verifica valorile rezultate. Dacă trebuie să efectuați teste cum ar fi verificarea dacă un matrice conține un element specific, aceste două instrumente vor fi suficiente. Cu toate acestea, suntem interesați să efectuăm teste mai sofisticate, cum ar fi verificarea dacă o încercare de conectare a reușit sau dacă utilizatorii au posibilitatea de a-și actualiza numele de utilizator, etc. Acest lucru ne cere să instalăm Selenium WebDriver. Cu Selenium WebDriver, vom putea automatiza o mulțime de lucruri, făcând clic pe link-uri și butoane pentru a completa un formular.
Odată ce aveți o înțelegere de bază a acestor instrumente, partea dificilă sa încheiat. Scrierea testelor automate pentru CrossBrowserTesting este ușor. Presupun că ați instalat deja Node.js.
Mergeți în directorul de proiect și executați următoarele comenzi:
npm instalare mocha --save-dev npm instalare chai --save-dev npm instalare selenium-webdriver --save-dev
Odată ce toate pachetele au fost instalate, creați un folder numit Test în dosarul proiectului. Acest dosar va conține toate fișierele noastre de testare. Pentru moment, creați un fișier numit github.js în dosarul de testare. Scrieți următorul cod înăuntru github.js.
Accentsconagua
var webdriver = necesită ("selenium-webdriver"); var assert = cer ('chai'). var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var username = '[email protected]'; var authkey = 'yourAuthKey'; var caps = nume: 'GitHub Search', construi: '1.0.0', browserName: 'MicrosoftEdge', versiunea: '15', platforma: 'Windows 10', screen_resolution: '1366x768', record_video: 'true', record_network: 'true', username: username, password: authkey; descrie ("Căutarea GitHub pentru Mocha", funcția () this.timeout (5 * 1000 * 60); var driver = new webdriver.Builder () .usingServer (remoteHub) .withCapacități (caps) .build ("Mochajs trebuie să fie primul rezultat", funcția (făcut) var inputField = driver.findElement (webdriver.By.css ("search-form-fluid-search-page-input")); inputField.click () .then (function () inputField.sendKeys ("Mocha" ); driver.findElement (webdriver.By.css ("# search_form button")) .Click () .then (function () retur driver.wait (webdriver.until.elementLocated (webdriver.By.css (funcția (element)) return element.getText ();) .then (funcția (text) assert.deepEqual (text, "mochajs / mocha"); ) .then (done);); acesta ("Ar trebui să afișeze o solicitare de înregistrare după încărcarea paginii de depozit", funcția (done) driver.findElement (webdriver.By.css ("repo-list h3 a" )) .Click () .then (funcția ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (".registration-prompt h3.pt-2")), 10000)) .then (functie (element) return element.getText ); ) .then (funcția (text) assert.deepEqual (text, "Alăturați-vă GitHub astăzi");); driver.findElement (webdriver.By.css (".ubscription-prompt buton de formular")). click () .then (done); ); după (funcția quitWebdriver (done) driver.quit () .then (done);); );În codul de mai sus, ar trebui să înlocuiți [email protected] cu adresa de e-mail pe care ați folosit-o pentru a vă înscrie pentru procesul dvs. gratuit. În mod similar, va trebui să obțineți propria cheie de autorizare de pe pagina contului. Copiați această cheie și inserați-o în locul acesteia yourAuthKey.
capace obiect este folosit pentru a specifica diferite opțiuni de configurare pentru a executa testul. Puteți să vă dați testul a Nume și a construi pentru a le identifica. browserName proprietatea este utilizată pentru a specifica numele browserului în care doriți să executați testele. De asemenea, puteți specifica a versiune pentru browser, dar este opțional. Când nu este specificat nimic, se utilizează cea mai recentă versiune de browser.
Puteți citi despre toate proprietățile și valorile lor valide în articolul intitulat Capabilități de automatizare pentru Selenium. Ar trebui să citiți cu atenție această pagină pentru a profita din plin de toate caracteristicile de testare automată Selenium. Pentru ușurința în utilizare, CrossBrowserTesting oferă, de asemenea, un configurator de capabilități pe pagina principală de automatizare.
După setarea valorilor adecvate pentru parametrii de testare, putem scrie testele pe care dorim să le executăm. Fiecare set de teste pe care doriți să le rulați este închis în interiorul a descrie bloc. În interiorul descrie bloc, am setat un interval de timp pentru diferite teste și am creat un obiect webdriver care va fi accesat de fiecare test din bloc.
În pasul următor, am folosit inainte de pentru a accesa pagina de căutare GitHub înainte de a efectua testele din interiorul aceasta blocuri. Codul dinăuntru inainte de va rula doar o singură dată, ceea ce vreau să fac în cazul meu. Cu toate acestea, dacă doriți să căutați un nou termen după fiecare test de succes, va trebui să reveniți din nou și din nou la pagina de căutare. În astfel de situații, folosind a beforeEach cârligul are mai mult sens. Puteți utiliza acest cârlig pentru a reseta toate datele cum ar fi modulele cookie pe care nu doriți să le persistați între sesiuni.
Testul real intră în interiorul aceasta blocuri. În primul test, identificăm câmpul de intrare utilizând un selector CSS și apoi setăm valoarea lui la "Mocha". După aceea, faceți clic pe butonul de căutare și așteptați până când șoferul poate localiza o legătură identificată de selector .lista repo h3 a. Verificăm textul din interiorul acelui element pentru a vedea dacă se potrivește mochajs / Mocha. Testul din cel de-al doilea aceasta blocul continuă de la primul test și face clic pe link pentru a vizita depozitul GitHub.
Codul din interiorul lui după bloc este executat după ce am rulat testele în interiorul tuturor aceasta blocuri. Asigurați-vă că sunați driver.quit () în interiorul blocului după, în caz contrar sesiunea va rămâne deschisă timp de 10 minute în mod implicit.
S-ar putea să doriți să faceți instantanee în diferite etape în timpul testelor dvs. pentru a împărtăși rezultatele cu alții. Acest lucru se poate face invocând API-ul. Mai multe informații referitoare la acest subiect pot fi găsite în mesajul CrossBrowserTesting despre rularea testelor de browser automate cu Selenium și JavaScript.
După ce ați creat fișierul de testare de mai sus, puteți rula testele de pe dispozitivul și browserul dorit introducând următoarea comandă din consola din interiorul directorului de proiect:
test mocha / github.js
Dacă totul a funcționat așa cum era de așteptat, veți putea vedea aici rezultatele testelor din contul dvs. CrossBrowserTesting. Am descarcat videoclipul creat dupa ce am facut acest test cu contul meu. Ar trebui să vezi și ceva similar.
Cel mai bun lucru despre CrossBrowserTesting este că îl puteți integra cu ușurință cu instrumentele dvs. preferate pentru a vă ajuta să scrieți rapid testele și să folosiți cadre pe care echipa dvs. le cunoaște deja.
În această secțiune, vom scrie câteva teste utilizând WebdriverIO. Practic, trimite doar cereri către un server Selenium și gestionează răspunsul. Cadrul vă permite să scrieți comenzi asincrone sincron, astfel încât să nu vă faceți griji în legătură cu promisiunile și condițiile de curse. Puteți citi documentele API pentru a obține mai multe informații despre cadrul.
Să începem să scriem testele noastre acum. De data aceasta, vom încerca să vă conectăm la un cont pe care l-am creat pe Pixabay. Vom oferi cu bună știință acreditări greșite pentru prima dată pentru a testa dacă site-ul ne permite să intrăm. Data viitoare vom folosi datele de identificare corecte și vom verifica dacă am fost conectat.
Înainte de a continua, va trebui să instalați WebdriverIO executând următoarea comandă:
npm instalați webdriverio -save-dev
Acum, creați un fișier în interiorul Test și denumiți-o pixabay.js. Fișierul trebuie să conțină următorul cod:
var webdriverio = necesită ("webdriverio"); var assert = cer ('chai'). var username = '[email protected]'; var authkey = 'yourAuthKey'; var dispozitive = [browserName: 'Chrome', platforma: 'Windows 10',, browserName: 'Firefox', platforma: 'Windows 7',, browserName: 'Internet Explorer' -Bit ',, browserName: "Safari", platformă: "Mac OSX 10.9",]; dispozitive.for orice (functie (dispozitiv) var optiuni = doriteCapacitati: name: 'Pixabay Log In Test (Multiple Devices)', build: '1.0', platforma: device.platform, browserName: device.browserName, screen_resolution: 1366x768 ', record_video:' true ', record_network:' true ', gazdă: "hub.crossbrowsertesting.com", port: 80, user: username, Acest client este un client de tip client.inter (), clientul (client) = client.init ();) ("Clientul = webdriverio.remote (optiuni) function () retur client .url ('https://pixabay.com/en/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('id_password', 'wrong_pixa_password') .click ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (function (result) assert.equal (rezultat, 'Introduceți un nume de utilizator și o parolă corecte. poate fi sensibil la majuscule.)));)) ("Ar trebui să fie capabil să se conecteze cu dreapta C ('# id_password', '$ id_username', 'pixa_username') .setValue ('# id_password', ' corect_pixa_password ') .click (' # sign_in_out input.pure-buton ') .getText (' # my_images a.pure-button ') .then (function (rezultat) assert.equal (rezultat; ); ); după (funcția () return client.end ();); ); );După rularea codului din secțiunea anterioară, acest lucru ar trebui să pară foarte familiarizat. La fel ca exemplul anterior, înlocuiți-l [email protected] și yourAuthKey cu adresa de e-mail și cheia de autentificare CrossBrowserTesting.
Pentru a testa pagina de conectare, puteți să vă creați propriul cont Pixabay sau să încercați să vă conectați la alte site-uri Web. Rețineți că trebuie să selectați câmpurile și butoanele de intrare potrivite utilizând selectori diferiți.
O diferență importantă de data aceasta este faptul că am creat o serie de obiecte de configurare și putem să le compundem pe fiecare dintre ele pentru a rula aceleași teste pe mai multe dispozitive. Acest lucru vă poate salva pe dvs. și pe echipa dvs. o mulțime de timp. Tot ce trebuie să faceți este să scrieți testele o dată și apoi să le executați pe cât mai multe dispozitive pe care le doriți. CrossBrowserTesting vă permite să vizualizați înregistrări video ale tuturor testelor dvs. automate. În acest fel, puteți vedea cu ușurință ce a mers prost cu un anumit dispozitiv și browser.
Capacitatea de a testa site-ul dvs. pe peste 1.500 de dispozitive diferite de la distanță este uimitoare. Nu mai trebuie să vă faceți griji cu privire la pierderea clienților, deoarece site-ul dvs. nu funcționa conform așteptărilor pe un dispozitiv pe care ați uitat sau nu l-ați putea testa. Numărul mare de dispozitive furnizate de CrossBrowserTesting acoperă aproape fiecare combinație de dispozitive și browsere pe care clienții dvs. le-ar putea utiliza. Nu numai că, dar și tu scapi de costul imens de a păstra atât de multe dispozitive.
Am creat câteva teste de automatizare de bază pentru a vă ajuta să începeți cu CrossBrowserTesting. Odată ce ai o bună înțelegere a fundamentelor, vei putea să conduci tot felul de teste, de la completarea formularelor mari la vizitarea unei pagini de produs după alta. Deoarece testele sunt automate și le puteți executa în paralel, economisiți și mult timp, ceea ce poate fi pus în a face produsul dvs. principal chiar mai bine.
Puteți să vă înscrieți pentru serviciu gratuit, așa că faceți o încercare și aflați despre diferitele caracteristici care o fac o opțiune mai bună și mai rentabilă decât concurența. Dacă lucrurile funcționează, dvs. sau compania dvs. veți termina salvarea a mii de dolari și a sutelor de ore de valoare cu ajutorul serviciului CrossBrowserTesting.
