bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • unity_ar • email_linux_docker
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 [2024/01/31 20:23] (actual)
enric_mieza_sanchez [Testing amb Selenium en Node.js]
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>
  
Línia 214: Línia 266:
 ==== Test 02 : formulari buit ==== ==== Test 02 : 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 02-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 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>
  
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