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/22 20:03]
enric_mieza_sanchez [Projecte base] 		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 32: Línia 34:
   $ cd .test   $ cd .test
   $ node 01-xxxx.js   $ node 01-xxxx.js
 +
 +Per defecte s'executarà en mode HEADLESS (sense GUI). Si volem veure el //browser//:
 +  $ HEADLESS=false node 01-xxx.js
 +
 +Per executar els tests amb Chrome enlloc de Firefox:
 +  $ CHROME_TESTS=chrome node 01-xxx.js
 +
 +\\
  
 ===== Projecte base ===== ===== Projecte base =====
Línia 45: Línia 55:
   │   └── ...   │   └── ...
   └── .test   └── .test
-      ├── BasePhpTest.js+      ├── BaseTest.js
       └── 01-page-h1.js       └── 01-page-h1.js
  
Línia 55: Línia 65:
 \\ \\
  
-===== Desenvolupament en PHP =====+===== 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 ====
-L'objecte base per a projectes PHP: 
  
-<file javascript BasePhpTest.js>+<file javascript BaseTest.js>
 const {Builder, Browser, By, Key, until} = require("selenium-webdriver"); const {Builder, Browser, By, Key, until} = require("selenium-webdriver");
 const firefox = require('selenium-webdriver/firefox'); const firefox = require('selenium-webdriver/firefox');
Línia 68: Línia 121:
  
  
-class BasePhpTest {+class BaseTest {
  
     constructor() {     constructor() {
Línia 83: 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 90: Línia 143:
  
     async tearDown() {     async tearDown() {
-        console.log("Closing PHP server...");+        console.log("Closing server...");
         // parem server         // parem server
         await this.stopServer();         await this.stopServer();
Línia 117: Línia 170:
         let chromeOptions = new chrome.Options();         let chromeOptions = new chrome.Options();
         if( this.headless ) {         if( this.headless ) {
-            console.log("Running Headless Tests...") +            console.log("Running Headless Tests..."); 
-            firefoxOptions = new firefox.Options().headless();+            firefoxOptions = new firefox.Options().addArguments('-headless');
             chromeOptions = new chrome.Options().addArguments('--headless=new');             chromeOptions = new chrome.Options().addArguments('--headless=new');
         }         }
Línia 137: 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 169: Línia 222:
 } }
  
-// publiquem l'objecte BasePhpTest +// publiquem l'objecte BaseTest 
-exports.BasePhpTest = BasePhpTest;+exports.BaseTest = BaseTest;
 </file> </file>
  
Línia 179: Línia 232:
 <file javascript 01-header-h1.js> <file javascript 01-header-h1.js>
 // carreguem les llibreries // carreguem les llibreries
-const { BasePhpTest } = require("./BasePhpTest.js")+const { BaseTest } = require("./BaseTest.js")
 const { By, until } = require("selenium-webdriver"); const { By, until } = require("selenium-webdriver");
 const assert = require('assert'); const assert = require('assert');
Línia 186: Línia 239:
 // emprem this.driver per utilitzar Selenium // emprem this.driver per utilitzar Selenium
  
-class MyTest extends BasePhpTest+class MyTest extends BaseTest
 { {
  async test() {  async test() {
         // 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 207: 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 { BasePhpTest } = require("./BasePhpTest.js")+const { BaseTest } = require("./BaseTest.js")
 const { By, until } = require("selenium-webdriver"); const { By, until } = require("selenium-webdriver");
 const assert = require('assert'); const assert = require('assert');
Línia 225: Línia 277:
 // emprem this.driver per utilitzar Selenium // emprem this.driver per utilitzar Selenium
  
-class MyTest extends BasePhpTest+class MyTest extends BaseTest
 { {
  async test() {  async test() {
-        // testejem H1 a la home page+        // testejem login
         //////////////////////////////////////////////////////         //////////////////////////////////////////////////////
         await this.driver.get("http://localhost:8000/register.php");         await this.driver.get("http://localhost:8000/register.php");
Línia 258: 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.1705953816.txt.gz · Darrera modificació: 2024/01/22 20:03 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