Share
În acest tutorial, vom arunca o privire la WebDriverJs, care este un instrument folosit pentru automatizarea browser-ului. Chrome va fi folosit pe tot parcursul browserelor moderne tind să aibă drivere disponibile pentru utilizarea cu WebDriver (chiar și pentru dispozitivele mobile), așa că verificați-le dacă doriți să automatizați alte browsere.
În timp ce testele unitare sunt cu siguranță valoroase pentru aplicațiile web moderne, într-un anumit moment, pe măsură ce cererea dvs. crește, veți găsi bug-uri care nu au fost surprinse de un test unitar, dar teoretic ar fi fost surprinse de un test de integrare / acceptare.
Dacă doriți să urmați o strategie de testare care include testarea browserului, acest ghid vă va oferi o introducere inițială în testarea cu WebDriverJs, astfel încât să aveți suficientă cunoștințe pentru a începe.
Acest tutorial presupune că sunteți familiarizat cu JavaScript și puteți rula codul JavaScript folosind node.js.
Dacă doriți să urmați, nu ezitați să verificați acest exemplu de proiect, care conține câteva exemple WebDriver pentru a vă rula. De asemenea, va trebui să instalați Chromedriver și să îl aveți disponibil în calea dvs..
Selenium WebDriver are în mod obișnuit un server și un client. În afară de colaboratorii WebDriver, majoritatea oamenilor vor fi interesați numai de API client care le permite să controleze un browser prin scriptul lor. Pentru a începe, instalați legăturile JavaScript pentru WebDriver:
npm instala selenium-webdriver
Odată ce ați instalat modulul prin NPM, puteți solicita modulul din codul nodului dvs., astfel:
necesită ( 'seleniu-webdriver');
Alternativ, dacă verificați proiectul de eșantion, puteți rula un npm install în interiorul dosarului, pe măsură ce modulul WebDriverJs este afișat ca o dependență în package.json fişier.
În timp ce puteți răsfoi documentația oficială, preferatul meu personal este sursa în sine. Acest fișier webdriver.js enumeră mai multe metode WebDriver, de ex. veți observa un getAttribute și un getText. Iată câteva metode care ar putea fi de interes:
Accentsconagua
obține - Navigați browserul la o adresă URL.findElements - Similar cu document.querySelectorAll în browser.executeScript - Executați JavaScript brut pe pagina curentă.getText - Obțineți conținutul text al unui element, inclusiv al copiilor acestuia.este afisat - Aflați dacă un element este afișat pe pagină.Un factor legat de legăturile JavaScript pentru WebDriver este în special faptul că aproape fiecare metodă este asincronă. Aceasta înseamnă că următorul cod nu obține titlul paginii web:
var titlul = browser.getTitle (); // loguri apoi: [Funcție: apoi], anulați: [Funcție: anula], isPending: [Funcție: isPending] console.log (titlu);
În schimb, ceea ce trebuie să faceți este acesta:
var promise = browser.getTitle (); promise.then (funcția (titlu) console.log (title););
Acest lucru se datorează faptului că WebDriverJs folosește promisiuni pentru a face ca relațiile cu codul asincron să devină mai plăcute. Rețineți că implementarea promisiunii ca parte a WebDriverJs nu se conformează exact standardului Promises / A +.
Lucrul cheie care trebuie luat aici este că majoritatea metodelor WebDriver vor reveni a atunci care acceptă două argumente opționale (funcție). Primul argument este un apel invers care poate primi o valoare.
În exemplul de mai sus, am cerut un titlu, prin urmare apelul nostru va primi acel titlu ca primul său argument. Al doilea argument opțional al funcției pe care îl putem trece la metoda de atunci ne permite să detectăm erori, dacă este deloc.
Să recapitulăm unde suntem atât de departe:
Aruncați o privire la acest exemplu de cod:
var webdriver = necesită ("selenium-webdriver"); var browser = nou webdriver.Builder () folosindServer () cuCapacități ('browserName': 'chrome') build (); browser.get ( 'http://en.wikipedia.org/wiki/Wiki'); browser.findElements (webdriver.By.css ('[href ^ = "/ wiki /"]')), apoi (funcția (links) console.log (' browser.quit (););Rulați exemplul Wiki astfel:
$ node Wiki.js Au fost găsite 367 link-uri Wiki.
În exemplul de cod, primele câteva linii sunt, în esență, boilerplate. Inițializează obiectul browserului și specifică o anumită configurație inițială, cum ar fi ce browser să utilizeze efectiv. Începând cu apelul către browser.get, avem codul la care ne pasă.
findElements metoda care va merge mai departe și va evalua asincron expresia selectorului.Găsirea elementelor pe pagină este o piesă a puzzle-ului, să aruncăm o privire la un alt exemplu care demonstrează efectuarea unei căutări Google și făcând clic pe rezultatul pe care ne așteptăm să îl găsim pe pagină.
/ * * Realizarea unei Căutări Google * / "utilizarea strictă"; var webdriver = necesită ("selenium-webdriver"); var browser = nou webdriver.Builder () folosindServer () cuCapacități ('browserName': 'chrome') build (); funcția logTitle () browser.getTitle (), apoi (funcția (titlu) console.log ('Titlul curent al paginii:' + titlu);); funcția clickLink (link) link.click (); handle handleFailure (err) console.error ('Ceva a mers prost \ n', err.stack, '\ n'); closeBrowser (); function findTutsPlusLink () retur browser.findElements (webdriver.By.css ('[href = "http://code.tutsplus.com/"]')) ;); funcția closeBrowser () browser.quit (); browser.get ('https://www.google.com'); browser.findElement (webdriver.By.name ('q')). sendKeys ('tuts + code'); . Browser.findElement (webdriver.By.name ( 'btnG')) click (); browser.wait (findTutsPlusLink, 2000) .then (clicLink) .then (logTitle) .then (closeBrowser, handleFailure);Rularea codului de mai sus:
$ node GoogleSearch.js Titlul curent al paginii: Tuts + Code Tutorials
Câteva fragmente interesante sunt afișate aici. În primul rând, putem să simțim cum este să folosim declarații de funcții - în loc de apelări anonime ale funcțiilor (care sunt transmise atunci), rezultatul este ceva asemănător unui API fluent (a se vedea ultima linie). De asemenea, deoarece avem capacitatea de a crea promisiuni personalizate (amânate), putem fi la fel de fluent cum dorim!
Rețineți că atașăm un apel de eroare în ultimul apel la atunci, chiar dacă apare o eroare mai devreme, se va propaga în continuare.
Navigăm pe pagina de pornire Google și căutăm "tuts + code". Din moment ce operăm pe obiectul browserului, mecanismul de control intern al WebDriver-ului știe să programeze fiecare comandă să se întâmple una după alta, acest lucru ne salvează de hassle de a lant toate lucrurile împreună și, de asemenea, explică de ce există două apeluri la findElement, unul după altul, fără a fi nevoie să fie înlănțuite unul cu celălalt.
Când efectuăm căutarea Google de pe pagina de pornire, nu are loc reîncărcarea paginii, prin urmare WebDriver va încerca imediat să găsească elementele pe care le-am instruit pe pagina cu rezultatele căutării. Știind când să aștepți elementele este o parte esențială a automatizării browser-ului.
Modul vechi și nefast de a face lucrurile a fost să folosești a dormi. Deoarece punctul în care apare un element poate depinde în mare măsură de factori externi (de exemplu, viteza de conectare la rețea), dezvoltatorii pot instrui uneori WebDriver să aștepte o perioadă fixă de timp înainte de a continua. Acest lucru, desigur, este plin de probleme.
Din fericire, aștepta metoda face automatizarea paginilor web moderne mult mai frumoase. Apelați așteptați cu două argumente, prima este o funcție care trebuie evaluată la adevărat printr-o perioadă de timp definită ca al doilea argument de așteptat. WebDriver apelează în mod regulat apelul dvs. de returnare până când acesta se întoarce la adevărat, sau timpul s-a terminat, caz în care o eroare este aruncată.
Deși există numeroase metode pentru a apela contextul elementelor DOM, puteți apela și metode din browser în sine pentru a vă oferi mai mult control asupra stării browserului. Iată câteva exemple simple pentru a vă oferi o idee mai bună:
Setați dimensiunile ferestrei browserului
browser.manage () fereastra () setSize (1280, 720)
Conectați browserul la un proxy:
var proxy = necesită ("selenium-webdriver / proxy"); browser = new webdriver.Builder () .usingServer () .withCapacități ('browserName': 'chrome') .setProxy (proxy.manual (http: '127.0.0.1:9000')) .build ();De asemenea, puteți să citiți, să scrieți și să ștergeți cookie-urile, să faceți o captură de ecran a ferestrei, să setați anumite setări de browser individuale și multe altele.
Există o serie de opțiuni disponibile atunci când doriți să controlați programatic un browser. Mai întâi, am aruncat o privire asupra legăturilor JavaScript pentru WebDriver, dar există și altele:
WebDriverJs, de ex. versiunea pe care am instalat-o folosind npm instala selenium-webdriver este o singură versiune a unui API WebDriver Client scris în JavaScript. Dacă doriți să controlați programatic browserele prin intermediul JavaScript, există și alte opțiuni:
Folosind ceva de genul WD.js sau Nightwatch poate însemna o serie de lucruri:
Dacă doriți să începeți să utilizați WebDriver de dragul testelor, atunci este minunat. De asemenea, trebuie să rețineți că automatizarea browserului nu trebuie să se oprească la testare, ci doar la automatizarea unei sarcini repetitive?
De exemplu, verificați acest articol despre "Să ajungem la filosofie", explică în mod esențial cum clicul continuu pe primul link din articolele Wiki vă va duce în cele din urmă la articolul din filosofie!
Acest lucru face ca o sarcină distractivă să automatizeze! Verificați acest gif animat sau sursa pentru ao vedea în acțiune.
