Share
Testare a fondo un sito Web che hai creato è tanto importante quanto svilupparlo.
Supponiamo che la tua azienda abbia creato un sito di e-commerce. Se hai appena testato il pulsante "Acquista ora" per la categoria elettronica e ha funzionato, potresti pensare che funzioni anche per tutte le altre categorie. Che cosa succede se in seguito hai scoperto che un problema tecnico impedisce agli utenti di fare clic sul pulsante "Acquista ora" per tutti i prodotti nella categoria fitness? Qualcosa del genere sta sicuramente andando a intaccare i ricavi della società di e-commerce. Non si tratta solo delle entrate; influisce anche sulla reputazione dell'azienda. Gli utenti possono evitare di visitare il tuo sito Web a favore della concorrenza.
Gli sviluppatori e le aziende a volte evitano accuratamente di testare il loro sito web a causa di due principali vincoli: tempo e denaro. Anche se hai eseguito tutti i test possibili per il tuo sito web su un singolo dispositivo, non è garantito che funzioni anche su tutti gli altri dispositivi. Ci sono molti fattori come browser, sistema operativo e dimensioni dello schermo che devono essere presi in considerazione. Inoltre, nuovi dispositivi con diverse dimensioni e capacità dello schermo continuano a spuntare. Testare più di mille combinazioni di browser, sistemi operativi e dimensioni dello schermo sarà anche un processo che richiede molto tempo. Di conseguenza, molte aziende non testano i loro siti web come dovrebbero.
CrossBrowserTesting può risolvere entrambi questi problemi in modo molto elegante. Questo servizio ti consente di eseguire test automatici su oltre 1.500 dispositivi desktop e mobili reali senza mai lasciare il comfort del tuo principale browser di sviluppo. Il debug avviene in remoto, ma puoi interagire con i siti web esattamente come farebbe un utente reale. Il processo non sarà più dispendioso in termini di tempo, perché sarà possibile eseguire tutti questi test in parallelo.
Questo tutorial ti aiuterà a iniziare con CrossBrowserTesting e ti mostrerà come eseguire test automatici su migliaia di dispositivi in parallelo. Dovresti registrarti per una prova gratuita per seguire il resto del tutorial.
Mocha è ricco di funzionalità ed è uno dei più popolari framework di test JavaScript asincroni per Node.js. Consente di eseguire più test in serie, con conseguente reporting accurato e mappatura delle eccezioni non rilevate per correggere i casi di test. Il quadro ci fornisce prima, dopo, beforeeach, e dopo ogni ganci. È possibile utilizzare questi hook per impostare alcune precondizioni per i test e pulire l'ambiente dopo aver eseguito qualsiasi test.
Mentre Mocha può aiutarti a scrivere dei test, avrai bisogno dell'aiuto di una libreria di asserzioni per verificare se i risultati di un test sono quelli che ti aspetti che siano. Utilizzeremo Chai in questo tutorial. La libreria di asserzioni è molto flessibile e ti consente di scegliere un'interfaccia a tua scelta per testare i risultati. Spetta a te da usare dovrebbero(), aspettarsi(), o affermare() affermazioni di stile.
Mocha e Chai possono essere utilizzati per eseguire tutti i tipi di test e controllare i valori risultanti. Se è necessario eseguire test come verificare se un array contiene un elemento specifico, questi due strumenti saranno sufficienti. Tuttavia, siamo interessati a eseguire test più sofisticati come verificare se un tentativo di accesso ha avuto esito positivo o se gli utenti sono in grado di aggiornare i loro nomi utente, ecc. Ciò richiede l'installazione di Selenium WebDriver. Con Selenium WebDriver, saremo in grado di automatizzare molte cose, facendo clic su collegamenti e pulsanti per compilare un modulo.
Una volta che hai una conoscenza di base di questi strumenti, la parte difficile è finita. Scrivere test automatici per CrossBrowserTesting è facile. Suppongo che tu abbia già installato Node.js.
Passare alla directory del progetto ed eseguire i seguenti comandi:
npm installa mocha --save-dev npm installa chai --save-dev npm installa selenium-webdriver --save-dev
Una volta che tutti i pacchetti sono stati installati, creare una cartella denominata test all'interno della cartella del tuo progetto. Questa cartella conterrà tutti i nostri file di test. Per ora, crea un file chiamato github.js all'interno della cartella test. Scrivi il seguente codice all'interno github.js.
Accentsconagua
var webdriver = require ('selenium-webdriver'); var assert = require ('chai'). assert; var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var username = '[email protected]'; var authkey = 'yourAuthKey'; var caps = nome: 'GitHub Search', build: '1.0.0', browserName: 'MicrosoftEdge', versione: '15', piattaforma: 'Windows 10', screen_resolution: '1366x768', record_video: 'true', record_network: 'true', nome utente: username, password: authkey; define ("Ricerca in GitHub per Mocha", function () this.timeout (5 * 1000 * 60); var driver = new webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); before ( function setupWebdriver (done) driver.get ("https://github.com/search/advanced") .then (done)); it ("Mochajs dovrebbe essere il risultato migliore", function (done) 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 () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo -list h3 a ")), 10000)) .then (function (element) return element.getText ();) .then (function (text) assert.deepEqual (text," mochajs / mocha "); ) .then (done);); it ("Dovrebbe mostrare un prompt di registrazione dopo aver caricato la pagina del repository", function (done) driver.findElement (webdriver.By.css (". repo-list h3 a") click) () .then (funzione ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". signup-prompt h3.pt-2")), 10000)) .then (function (elemento) return element.getText ( ); ) .then (function (text) assert.deepEqual (text, "Join GitHub today");); driver.findElement (webdriver.By.css (". form form prompt-prompt")). click () .then (done); ); after (function quitWebdriver (done) driver.quit () .then (done);); );Nel codice sopra, dovresti sostituire [email protected] con l'indirizzo email che hai utilizzato per registrarti per la tua prova gratuita. Allo stesso modo, dovrai ottenere la tua chiave di autorizzazione dalla pagina dell'account. Copia quella chiave e incollala al posto di yourAuthKey.
Il caps oggetto viene utilizzato per specificare diverse opzioni di configurazione per eseguire il test. Puoi dare il tuo test a nome e a costruire numero per identificarlo. Il browserName la proprietà viene utilizzata per specificare il nome del browser in cui si desidera eseguire i test. Puoi anche specificare a versione per il browser, ma è facoltativo. Quando non viene specificato nulla, viene utilizzata l'ultima versione del browser.
Puoi leggere tutte le proprietà e i loro valori validi nell'articolo intitolato Funzionalità di automazione Selenium. Dovresti leggere attentamente questa pagina per sfruttare appieno tutte le funzionalità di test automatizzati del Selenium. Per semplificare l'uso, CrossBrowserTesting offre anche un configuratore di funzionalità nella home page di automazione.
Dopo aver impostato i valori appropriati per i nostri parametri di test, possiamo scrivere i test che vogliamo eseguire. Ogni serie di test che si desidera eseguire è inclusa in a descrivere bloccare. Dentro il descrivere blocco, abbiamo impostato un timeout per diversi test e creato un oggetto webdriver a cui si accede da ciascun test nel blocco.
Nel prossimo passo, abbiamo usato il prima aggancia per accedere alla pagina di ricerca di GitHub prima di eseguire i test all'interno di esso blocchi. Il codice all'interno prima verrà eseguito solo una volta, che è quello che voglio fare nel mio caso. Tuttavia, se si desidera cercare un nuovo termine dopo ogni test riuscito, sarà necessario tornare alla pagina di ricerca ancora e ancora. In tali situazioni, usando a beforeeach il gancio ha più senso. Puoi utilizzare questo hook per ripristinare tutti i dati come i cookie che non desideri persistere tra le sessioni.
Il test effettivo va dentro il esso blocchi. Nel primo test, identifichiamo il campo di input usando un selettore CSS e quindi impostiamo il suo valore su "Mocha". Dopodiché, clicchiamo sul pulsante di ricerca e aspettiamo che il guidatore possa individuare un link identificato dal selettore .repo-list h3 a. Controlliamo il testo all'interno di quell'elemento per vedere se corrisponde mochajs / moka. Il test all'interno del secondo esso il blocco continua dal primo test e fa clic sul link per visitare il repository GitHub.
Il codice all'interno del dopo il blocco viene eseguito dopo aver eseguito tutti i test esso blocchi. Assicurati di chiamare driver.quit () all'interno del dopo blocco, altrimenti la sessione rimarrà aperta per 10 minuti per impostazione predefinita.
Potresti voler fare delle istantanee in varie fasi durante i tuoi test per condividere i risultati con gli altri. Questo può essere fatto richiamando l'API. Ulteriori informazioni relative a questo argomento sono disponibili nel post di CrossBrowserTesting sull'esecuzione di test automatici del browser con selenio e JavaScript.
Dopo aver creato il suddetto file di test, è possibile eseguire i test sul dispositivo e sul browser di propria scelta immettendo il seguente comando nella console dall'interno della directory del progetto:
mocha test / github.js
Se tutto ha funzionato come previsto, sarai in grado di vedere i risultati dei test all'interno del tuo account CrossBrowserTesting qui. Ho scaricato il video che è stato creato dopo aver eseguito questo test con il mio account. Dovresti vedere qualcosa di simile.
L'aspetto positivo di CrossBrowserTesting è che puoi integrarlo facilmente con i tuoi strumenti preferiti per aiutarti a scrivere rapidamente test e utilizzare framework che il tuo team ha già familiarità con.
In questa sezione, scriveremo alcuni test usando WebdriverIO. Fondamentalmente, invia semplicemente le richieste a un server Selenium e gestisce la risposta. Il framework consente di scrivere comandi asincroni in modo sincrono in modo da non doversi preoccupare delle promesse e delle condizioni di gara. Puoi leggere i documenti API per ottenere maggiori informazioni sul framework.
Iniziamo a scrivere i nostri test ora. Questa volta, proveremo ad accedere a un account che ho creato su Pixabay. Forniremo consapevolmente credenziali errate la prima volta per testare se il sito Web ci consente di entrare. La prossima volta utilizzeremo le credenziali corrette e verificheremo che siamo stati registrati.
Prima di procedere, devi installare WebdriverIO eseguendo il seguente comando:
npm installa webdriverio --save-dev
Ora crea un file all'interno del test cartella e chiamarlo pixabay.js. Il file dovrebbe contenere il seguente codice:
var webdriverio = require ('webdriverio'); var assert = require ('chai'). assert; var username = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [browserName: 'Chrome', piattaforma: 'Windows 10',, browserName: 'Firefox', piattaforma: 'Windows 7',, browserName: 'Internet Explorer', piattaforma: 'Windows 7 64 -Bit ',, browserName:' Safari ', piattaforma:' Mac OSX 10.9 ',]; devices.forEach (function (device) var options = desiredCapabilities: name: 'Pixabay Log In Test (Multiple Devices)', build: '1.0', platform: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', host: "hub.crossbrowsertesting.com", porta: 80, utente: username, chiave: authkey describe (' Accesso a Pixabay ', function () this.timeout (5 * 60 * 1000); var client; before (function () client = webdriverio.remote (opzioni); return client.init ();); it ('Wrong Credentials Should Prevent Log In', function () return 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 (result, 'Immettere un nome utente e una password corretti. potrebbe essere sensibile al maiuscolo / minuscolo. '););); it (' Dovrebbe essere possibile accedere con il diritto C redentials ', function () return client .url (' https://pixabay.com/en/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ',' correct_pixa_password ') .click (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (function (result) assert.equal (result,' Upload images '); ); ); after (function () return client.end ();); ); );Dopo aver eseguito il codice nella sezione precedente, questo dovrebbe apparire molto familiare. Proprio come nell'esempio precedente, sostituisci [email protected] e yourAuthKey con il tuo indirizzo email CrossBrowserTesting e la chiave di autenticazione.
Per testare la pagina di accesso, è possibile creare il proprio account Pixabay o provare ad accedere ad altri siti Web. Tieni presente che dovresti selezionare i campi e i campi di input corretti utilizzando selettori diversi.
Una differenza importante questa volta è che abbiamo creato una serie di oggetti di configurazione e possiamo eseguire il loop su ognuno di essi per eseguire gli stessi test su più dispositivi. Questo può far risparmiare molto tempo a te e alla tua squadra. Tutto quello che devi fare è scrivere i test una volta e poi eseguirli su tutti i dispositivi che vuoi. CrossBrowserTesting ti consente di visualizzare le registrazioni video di tutti i tuoi test automatici. In questo modo puoi facilmente vedere cosa è andato storto con un particolare dispositivo e browser.
La capacità di testare il tuo sito web su oltre 1.500 dispositivi diversi in remoto è sorprendente. Non devi più preoccuparti di perdere clienti perché il tuo sito web non funzionava come previsto su un dispositivo che hai dimenticato o non hai potuto testare. Il numero elevato di dispositivi forniti da CrossBrowserTesting copre quasi tutti i dispositivi e le combinazioni di browser che i tuoi clienti potrebbero utilizzare. Non solo, ma ti sbarazzi anche dell'enorme costo del mantenimento di così tanti dispositivi.
Ho creato alcuni test di automazione di base qui per aiutarti a iniziare con CrossBrowserTesting. Una volta acquisita una buona conoscenza dei fondamenti, sarai in grado di eseguire tutti i tipi di test, dalla compilazione di moduli di grandi dimensioni alla visita di una pagina di prodotto dopo l'altra. Poiché i test sono automatizzati e puoi eseguirli in parallelo, risparmi anche un sacco di tempo, che può essere utile per rendere il tuo prodotto principale ancora migliore.
È possibile iscriversi gratuitamente al servizio, quindi fare un tentativo e conoscere le diverse funzionalità che lo rendono un'opzione migliore e più conveniente rispetto alla concorrenza. Se le cose si risolvono, tu o la tua azienda finirete di risparmiare migliaia di dollari e centinaia di ore preziose con l'aiuto di CrossBrowserTesting.
