bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
nodejs_selenium

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
nodejs_selenium [2024/01/24 19:42]
enric_mieza_sanchez remove PHP 		nodejs_selenium [2025/02/04 18:36] (actual)
enric_mieza_sanchez [Test 02 : login ok]
Línia 4: Línia 4:
  
 Ens pot ser molt pràctic per a realitzar tests per a [[Cordova]] o el propi [[NodeJS]]. Ens pot ser molt pràctic per a realitzar tests per a [[Cordova]] o el propi [[NodeJS]].
 +
 +{{ selenium-diag.png }}
  
 Referències: Referències:
Línia 64: Línia 66:
  
 ===== Desenvolupament ===== ===== Desenvolupament =====
 +
 +En aquests tests funcionals, els tests estan aïllats del desenvolupament i del llenguatge emprat, pel què podem fer un objecte per testejar qualsevol altre projecte. Només el fitxer ''run.sh'' contindrà les i instruccions adients per engegar un o altre projecte.
 +
 +==== Arxius de posada en marxa del server ====
 +
 +<WRAP important>
 +''run.sh'' (o ''run.bat'' en Windows) està a l'arrel del projecte, és a dir, al mateix nivell que la carpeta ''.test''
 +</WRAP>
 +
 +
 +<tabbox Versió Linux>
 +
 +=== run.sh per a PHP ===
 +<file bash run.sh>
 +#!/bin/bash
 +# directori del script run.sh
 +SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 +# entrem a la carpeta del codi font
 +cd $SCRIPT_DIR/src
 +# engeguem el PHP server
 +php -S 0.0.0.0:8000
 +</file>
 +
 +=== run.sh per a Cordova ===
 +<file bash run.sh>
 +#!/bin/bash
 +# directori del script run.sh
 +SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 +# entrem a la carpeta del codi font
 +cd $SCRIPT_DIR
 +# engeguem el cordova sense browser
 +cordova serve
 +</file>
 +
 +<tabbox Versió Windows>
 +
 +=== run.sh per a Cordova ===
 +<file bash run.bat>
 +cordova serve
 +</file>
 +
 +</tabbox>
 +
 +\\
  
 ==== Llibreria Base ==== ==== Llibreria Base ====
-En aquests tests funcionals, els tests estan aïllats del desenvolupament i del llenguatge emprat, pel què podem fer un objecte per testejar qualsevol altre projecte: 
  
 <file javascript BaseTest.js> <file javascript BaseTest.js>
Línia 91: Línia 136:
  
         // run server and setup driver         // run server and setup driver
-        await this.runServer( "../run.sh", [] );+        await this.runServer( "../run", [] );
         await this.setupDriver();         await this.setupDriver();
         // deixem temps a que el servidor es posi en marxa         // deixem temps a que el servidor es posi en marxa
Línia 145: Línia 190:
         // Engeguem server amb la APP         // Engeguem server amb la APP
         if( process.platform=="win32" ) {         if( process.platform=="win32" ) {
-            this.cmd = spawn(command,options,{shell:true});+            this.cmd = spawn(command+".bat",options,{shell:true});
         } else {         } else {
             // linux, macos (darwin), or other             // linux, macos (darwin), or other
-            this.cmd = spawn(command,options);+            this.cmd = spawn(command+".sh",options);
         }         }
  
Línia 199: Línia 244:
         // testejem H1 a la home page         // testejem H1 a la home page
         //////////////////////////////////////////////////////         //////////////////////////////////////////////////////
-        await this.driver.get("http://localhost:8000/"); +        await this.driver.get("http://localhost:8000/browser/www/"); 
-        var text = await this.driver.findElement(By.tagName("h1")).getText(); +        var currentText = await this.driver.findElement(By.tagName("h1")).getText(); 
- +        var expectedText = "Tasklist"; 
-        assert( text=="Projecte VOTA!", "Títol H1 de la pàgina incorrecte");+        assert( currentText==expectedText, "Títol H1 de la pàgina principal incorrecte");
  
         console.log("TEST OK");         console.log("TEST OK");
Línia 215: Línia 260:
  console.log("END")  console.log("END")
 })(); })();
- 
 </file> </file>
  
 \\ \\
  
-==== Test 02 : formulari buit ====+==== Test 00 : formulari buit ====
  
-Aquest exemple testeja que si deixem buit el nom, ens surt un ''alert'' que ens avisa:+Aquest exemple testeja que si deixem buit el nom, ens surt un ''alert'' que ens avisa.
  
-<file javascript 02-nom-buit.js>+<file javascript 00-nom-buit.js>
 // carreguem les llibreries // carreguem les llibreries
 const { BaseTest } = require("./BaseTest.js") const { BaseTest } = require("./BaseTest.js")
Línia 266: Línia 310:
  
 </file> </file>
 +
 +
 +\\
 +
 +
 +==== Test 02 : login ok ====
 +
 +Testeja que podem logar-nos en un //admin panel// de [[Django]].
 +
 +<WRAP important>
 +És molt important **no deixar credencials en els arxius de codi** per raons òbvies.
 +
 +Per selventar aquest problema, aquest exemple utilitza la llibreria ''dotenv'' de NPM, pel què caldrà que la instal·lis:
 +
 +  $ npm install dotenv
 +
 +I crear un arxiu ''.env'' com aquest:
 +  URL=http://localhost:8000
 +  HEADLESS=false
 +  USUARI=el-meu-username
 +  CONTRASENYA=la-contrasenya-secreta
 +</WRAP>
 +
 +<file javascript 02-login-ok.js>
 +
 +// carreguem les llibreries
 +const { BaseTest } = require("./BaseTest.js")
 +const { By, until } = require("selenium-webdriver");
 +const assert = require('assert');
 +
 +//.env
 +require('dotenv').config()
 +console.log(process.env)
 +
 +class MyTest extends BaseTest
 +{
 +    async test() {
 +        // Login test
 +        //////////////////////////////////////////////////////
 +        var site = process.env.URL
 +        var driver = this.driver
 +        await driver.get(site+"/admin/login/");
 +
 +        // 1 cercar login box
 +        let usernameInput = await driver.wait(until.elementLocated(
 +                By.id('id_username')), 10000);
 +        let passwordInput = await driver.wait(until.elementLocated(
 +                By.id('id_password')), 10000);
 +
 +        // 2 posar usuari i pass
 +        usernameInput.sendKeys(process.env.USUARI)
 +        passwordInput.sendKeys(process.env.CONTRASENYA)
 +
 +        // 3 boto send .click()
 +        let sendButton = await driver.wait(until.elementLocated(
 +                By.css('input[value="Iniciar sessió"]')), 10000);
 +        sendButton.click()
 +
 +        // 4 comprovem que hem entrat
 +        let logoutButton = await driver.wait(until.elementLocated(
 +                By.xpath('//button[@type="submit"]')), 10000);
 +        var currentLogoutText = await logoutButton.getText();
 +        var expectedText = "FINALITZAR SESSIÓ";
 +        
 +        // assert verifica que es compleixin condicions concretes
 +        // si no es compleix, llançarà una excepció de test fallit
 +        assert( currentLogoutText==expectedText,
 +                "Login fallit.\n\tTEXT TROBAT="+currentLogoutText+"\n\tTEXT ESPERAT="+expectedText);
 +
 +        console.log("TEST OK");
 +    }
 +}
 +
 +// executem el test
 +
 +(async function test_example() {
 + const test = new MyTest();
 + await test.run();
 + console.log("END")
 +})();
 +</file>
 +
 +\\
 +
 +==== Test Cordova : afegir tasca ====
 +
 +Aquest exemple inclou l'ús de prompts, que es fa com si fos un alert.
 +
 +Fixeu-vos que Cordova necessita anar a la web ''/browser/www''.
 +
 +<file javascript addtask.js>
 +// carreguem les llibreries
 +const { BaseTest } = require("./BaseTest.js")
 +const { By, until } = require("selenium-webdriver");
 +const assert = require('assert');
 +
 +// heredem una classe amb un sol mètode test()
 +// emprem this.driver per utilitzar Selenium
 +
 +class AddTaskTest extends BaseTest
 +{
 + async test() {
 +        // testejem afegir tasca en tasklist de Cordova
 +        //////////////////////////////////////////////////////
 +        await this.driver.get("http://localhost:8000/browser/www/");
 +
 +        // cliquem botó "+"
 +        await this.driver.findElement(By.xpath("//button[text()='+']")).click();
 +
 +        // el prompt pel text de la tasca es tracta igual que un alert en Selenium
 +        await this.driver.wait(until.alertIsPresent(),2000,"ERROR TEST: el botó '+' d'afegir tasca ha d'obrir un prompt.");
 +        let prompt = await this.driver.switchTo().alert();
 +        // afegim el text de la tasca i acceptem
 +        var taskText = "lalala";
 +        prompt.sendKeys(taskText);
 +        await this.driver.sleep(1000);
 +        await prompt.accept();
 +        await this.driver.sleep(1000);
 +
 +        // checkejem tasca
 +        await this.driver.findElement(By.xpath("//li[text()='"+taskText+"']")).click();
 +
 +        console.log("TEST OK");
 + }
 +}
 +
 +// executem el test
 +
 +(async function test_example() {
 + const test = new AddTaskTest();
 + await test.run();
 + console.log("END")
 +})();
 +</file>
 +
 +<WRAP todo>
 +Crea un test ''DelTaskTest'' similar a l'anterior que:
 +  * Crei 3 tasques amb noms aleatoris.
 +  * Esborri una d'elles.
 +  * Comprovi que no existeix la tasca esborrada i sí que romanen les altres dues.
 +</WRAP>
 +
 +===== Exercicis =====
 +<WRAP todo>
 +Crea els següents tests amb la web que t'ha proporcionat el professor:
 +  * 01 comprovar header h1
 +  * 02a fer login amb l'usuari proporcionat
 +  * 02b intentar login amb usuari incorrecte (ha de refusar el login)
 +  * 03 entrar i crear un llibre amb el teu nom
 +  * 04 entrar i esborrar el llibre amb el teu nom.
 +  * 05 crear un arbre de categories aniuades (jerarquia). Podeu triar temàtica:
 +    * pelis: drama, thriller, acció, etc.
 +    * productes: ferreteria, imatge i so, verdures, informàtica, ...
 +    * regions: espanya, comunitat autònoma, província, ciutat
 +    * regions2: continents, paisos, regions
 +    * etc.
 +  * 06 crear un llibre i cercar les dades per ISBN
 +</WRAP>
 +
 +<WRAP todo>
 +Crea un dels següents tests que t'assigni el professor:
 +[[Django Test #exercicis_de_test_amb_django_tutorial]]
 +</WRAP>
 +
  
nodejs_selenium.1706125333.txt.gz · Darrera modificació: 2024/01/24 19:42 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki