Poum - Mot-clé - JavascriptDe la qualité logicielle, méthodes agiles et outils logiciels libres ...2023-08-25T16:53:12+01:00Poumurn:md5:6b5c625a812aff31ffa1cd1f3648e14bDotclearAttendre qu'une page ExtJs soit chargée avec Seleniumurn:md5:5005c47b2ffa130d31a81046099b607e2015-02-07T12:31:00+01:002015-02-07T13:01:58+01:00PoumTrucs & astucesBDDJavascriptpage objectssplashscreen<p><img src="http://philippe.poumaroux.free.fr/public/moonraker.png" alt="Moonraker" title="Moonraker, fév. 2015" /></p>
<p>Il existe pleins de frameworks de tests d'IHM en <a href="http://philippe.poumaroux.free.fr/index.php?tag/Javascript">Javascript</a>, et notamment pour faire du test fonctionnel ou <a href="http://philippe.poumaroux.free.fr/index.php?tag/BDD">BDD</a>. Outre <a href="https://github.com/cucumber/cucumber-js" hreflang="en" title="site github de cucumber-js">cucumber-js</a>, on trouve aussi l'excellent <a href="https://github.com/acuminous/yadda" hreflang="en" title="site github de Yadda">Yadda</a> qui a le bon goût d'avoir une localisation en français... Et plus encore, on trouve le formidable <a href="https://github.com/LateRoomsGroup/moonraker" hreflang="fr" title="Site github Moonraker">Moonraker</a> qui propose une solution complète clef en main: Yadda plus <a href="http://mochajs.org/" hreflang="en" title="Site de Mocha">mocha</a>, <a href="https://code.google.com/p/selenium/wiki/WebDriverJs" hreflang="en" title="Documentation de WebDriverJs">WebDriverJs</a> et <a href="http://chaijs.com/" hreflang="en" title="Site de Chai">Chai</a> et, cerise sur le pompon: des <a href="http://philippe.poumaroux.free.fr/index.php?tag/page%20objects">page objects</a> !</p>
<p>Mais avec <a href="http://www.sencha.com/products/extjs/" hreflang="en" title="Site ExtJs">ExtJs</a>, quand on met un <a href="http://philippe.poumaroux.free.fr/index.php?tag/splashscreen">splashscreen</a> pendant le chargement et la création de la page, on a un problème: comment cliquer sur un élément seulement quand le splashscreen a disparu ?</p> <p>En effet, si on attend simplement que la page soit chargée et qu'on tente, par exemple, de cliquer sur un élément alors que le splashscreen n'a pas complètement disparu, on obtient une exception ressemblant à ça:</p>
<pre> UnknownError: unknown error: Element is not clickable at point (1531, 14). Other element would receive the click: <div class="x-mask splashscreen" id="ext-gen1020" style="opacity: 0.403855921654898;"></div></pre>
<p>On voit ici clairement qu'on était pas loin, vu la valeur d'opacity.</p>
<p>Donc, il faut que ce splashscreen ait une opacité à 0 exactement. A ce moment, style prend également la propriété visibility avec la valeur hidden.</p>
<p>Il suffit de récupérer, via <strong>xpath</strong> - ce qui est le plus simple avec ExtJS - la div ayant les classes <code>x-mask-msg</code> et <code>splashscreen</code> et le style <code>visibility</code> avec la valeur <code>hidden</code>:</p>
<pre>//div[contains(concat(' ', @class, ' '), 'x-mask-msg splashscreen')][contains(concat(' ',@style,' '), 'visibility: hidden')]</pre>
<p>Alternativement, on peut aussi chercher:</p>
<pre>//div[contains(concat(' ', @class, ' '), 'x-mask-msg splashscreen')][contains(concat(' ',@style,' '), 'opacity: 0;')]</pre>
<p>mais dans ce cas, ne pas oublier le '<code>;</code>' après le '<code>0</code>', sinon, ça fonctionnera dès que <code>opacity</code> vaudra 0.9 et on retombera sur l'erreur vue précédemment.</p>
<p>Du coup, comme Selenium utilisé par WebDriverJs va attendre de trouver l'élément indiqué, il ne rendra la main que quand le loading mask aura totalement disparu (il reste présent, mais n'est plus visible).</p>
<p>Dans le page object de Moonraker, on ajoute donc une méthode comme celle-ci:</p>
<pre>chargee: { get: function() { return this.element("//div<a href="http://philippe.poumaroux.free.fr/index.php?post/2015/02/07/contains(concat(' ', @class, ' '), x-mask-msg splashscreen')" title="contains(concat(' ', @class, ' '), x-mask-msg splashscreen')">contains(concat(' ', @class, ' '), ...</a><a href="http://philippe.poumaroux.free.fr/index.php?post/2015/02/07/contains(concat(' ',@style,' '), 'visibility: hidden')" title="contains(concat(' ',@style,' '), 'visibility: hidden')">contains(concat(' ',@style,' '), 'v...</a>", 'xpath'); } }</pre>
<p>Et dans la bibliothèque d'étapes:</p>
<pre> var pageAccueil = require('../pages/accueil.js');
...
exports.define = function (steps) {
...
steps.given("la page d'accueil", function () {
pageAccueil.visit();
pageAccueil.chargee;
});
...</pre>Inventaire des frameworks Javascripturn:md5:99999598fddebd00f63efc4b01940da92014-01-09T22:19:00+01:002014-01-12T22:06:06+01:00PoumQualité logicielleAJAXframeworkJavascript<p><img src="http://philippe.poumaroux.free.fr/public/javascript_logo.png" alt="javascript" title="javascript, janv. 2014" />Ceci n'est pas un scoop, <a href="http://philippe.poumaroux.free.fr/index.php?tag/Javascript">Javascript</a> explose. Il est loin le temps des petits bouts de code pour afficher une boîte d'alerte dans une page. Depuis, il y a eu <a href="http://philippe.poumaroux.free.fr/index.php?tag/AJAX">AJAX</a> et maintenant, il existe une multitude de <a href="http://philippe.poumaroux.free.fr/index.php?tag/framework">framework</a> pour faire pleins de choses. Je vais reporter ici (et tenir à jour) mes notes concernant les différents frameworks et outils Javascript au fur et à mesure de mes investigations....</p> <h4>Manipulation du DOM</h4>
<ul>
<li><a href="http://jquery.com/" hreflang="en" title="JQuery">JQuery</a> : navigation et manipulation DOM, gestion des événements et ajax</li>
<li><a href="http://prototypejs.org" hreflang="en" title="Prototype">Prototype</a> : navigation et manipulation DOM, ajax et ajouts au langage</li>
</ul>
<h4>Ajout de fonctionnalités</h4>
<ul>
<li><a href="http://underscore.js" hreflang="en" title="Underscore.js">Underscore.js</a> : manipulation d'objets, de collections et de tableaux (ajoute 80 fonctions supplémentaires comme *map*, *each*, etc...)</li>
</ul>
<h4>Outils</h4>
<ul>
<li><a href="http://gruntjs.com" hreflang="en" title="Grunt.js">Grunt.js</a> : sorte de make</li>
<li><a href="https://github.com/senchalabs/jsduck" hreflang="en" title="JsDuck">JSDuck</a> : génération de documentation</li>
</ul>
<h4>Javascript côté serveur</h4>
<ul>
<li><a href="http://nodejs.org/" hreflang="en" title="Nodejs">Node.js</a></li>
<li><a href="http://expressjs.com/" hreflang="en" title="express.js">Express.js</a> : serveur web sur Node.js (gestion des routes, templates et exceptions)</li>
</ul>
<h4>Moteurs de template</h4>
<ul>
<li><a href="http://jade-lang.com/" hreflang="en" title="Jade">Jade.js</a></li>
<li><a href="http://handlebarsjs.com/" hreflang="en" title="Handlebars.js">handlebars.js</a></li>
</ul>
<h4>Qualité</h4>
<ul>
<li><a href="http://www.jslint.com/" hreflang="en" title="JSLint">JSLint</a> : outil de qualité de code</li>
<li><a href="http://www.jshint.com/" hreflang="en" title="JSHint">JSHint</a> : outil de qualité de code</li>
<li><a href="http://www.sonarqube.org/" hreflang="en" title="SonarQube">SonarQube</a> : pas du javascript mais possède un <a href="http://docs.codehaus.org/display/SONAR/JavaScript+Plugin" hreflang="en" title="plugin JavaScript SonarQube">plugin</a> de qualité de code Javascript</li>
</ul>
<h4>Applications riches</h4>
<ul>
<li><a href="http://backbonejs.org/" hreflang="en" title="Backbone.js">Backbone.js</a></li>
<li><a href="https://www.sencha.com/products/extjs/" hreflang="en" title="ExtJS">ExtJS</a> : framework MVC pour application riche</li>
</ul>
<h4>Applications client & serveur temps réel</h4>
<ul>
<li><a href="https://www.meteor.com/" hreflang="en" title="Meteor">Meteor</a></li>
<li><a href="http://emberjs.com/" hreflang="en" title="Ember.js">Ember.js</a></li>
</ul>Sortie de Sonar 3.3.2urn:md5:60d5772fff2f76920685aa5f7a8d43982012-12-02T14:53:00+01:002012-12-02T14:59:19+01:00PoumNouvelles versionsANTLRCCobolFlexJavaJavascriptJenkinsPL-SQLPostgresPythonSSLRThucydides <p><img src="http://philippe.poumaroux.free.fr/public/sonar.png" alt="Sonar" title="Sonar, janv. 2012" /></p>
<p>Sortie, le 24 octobre de la version 3.3 de <a href="http://philippe.poumaroux.free.fr/index.php?tag/Sonar">Sonar</a>, l'outil de qualimétrie, suivie les 7 et 21 novembre des versions correctives 3.3.1 et 3.3.2. On notera:</p>
<ul>
<li>prise en charge des projets multi langages (source dans des répertoires différents pour le moment)</li>
<li>l'apparition de profils multiples par projet (un par langage)</li>
<li>l'analyseur de code <a href="http://philippe.poumaroux.free.fr/index.php?tag/Java">Java</a> <a href="http://philippe.poumaroux.free.fr/index.php?tag/SSLR">SSLR</a> en remplacement de <a href="http://philippe.poumaroux.free.fr/index.php?tag/ANTLR">ANTLR</a>. SSLR était déjà utilisé pour <a href="http://philippe.poumaroux.free.fr/index.php?tag/Javascript">Javascript</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/Cobol">Cobol</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/PL-SQL">PL/SQL</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/Flex">Flex</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/C">C</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/C">C++</a>, <a href="http://philippe.poumaroux.free.fr/index.php?tag/C">C#</a> et <a href="http://philippe.poumaroux.free.fr/index.php?tag/Python">Python</a>.</li>
<li>l'ajout de 2 règles pour Java</li>
<li>l'apparition d'une couverture de code globale (tests unitaires et tests d'intégration)</li>
<li>une gestion améliorée des exclusions de fichiers</li>
<li>une amélioration de l'IHM: fil d’Ariane, liste déroulante dynamique et fenêtres modales.</li>
</ul>
<p>La 3.3.1 corrige notamment un problème posé par la traduction française provoquant un crash au démarrage. Le pack en version 1.6 (13 novembre 2012) est <a href="http://docs.codehaus.org/display/SONAR/French+Pack" hreflang="en" title="pack french pour Sonar">là</a>.</p>
<p>La 3.3.2 corrige des problèmes rencontrés avec <a href="http://philippe.poumaroux.free.fr/index.php?tag/Postgres">Postgres</a> 8.</p>
<p>Pour une description avec captures d'écran, c'est <a href="http://www.sonarsource.org/sonar-3-3-in-screenshots/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Sonar+%28Sonar%29" hreflang="en" title="Screenshots de la 3.3">là</a>, les changelogs sont <a href="http://www.sonarsource.org/downloads/#3.3" hreflang="en" title="changelog 3.3">là</a> et le téléchargement, <a href="http://www.sonarsource.org/downloads/" hreflang="en" title="télécharger Sonar">ici</a>. Penser également à la <a href="http://docs.codehaus.org/display/SONAR/Installing+Sonar" hreflang="en" title="installation Sonar">doc d'installation</a> et de <a href="http://docs.codehaus.org/display/SONAR/Upgrade+Guide" hreflang="en" title="mise à jour Sonar">mise à jour</a>.</p>
<p>A noter également la sortie du plugin <a href="http://philippe.poumaroux.free.fr/index.php?tag/Jenkins">Jenkins</a> pour Sonar version 2.0.1 qui corrige quelques bugs et ajoute les champs login et password pour accéder à l'instance de Sonar. Voir le changelog <a href="http://jira.codehaus.org/secure/ReleaseNote.jspa?projectId=11911&version=18954" hreflang="en" title="changelog plugin jenkin Sonar">ici</a>. Pour la documentation, c'est <a href="http://docs.codehaus.org/pages/viewpage.action;jsessionid=6B1305893D9B3B2A4E9F45E9250FB0CD?pageId=116359341" hreflang="en" title="documentation plugin Sonar pour Jenkins">là</a>.</p>
<p>J'en profite enfin pour signaler un plugin <a href="http://philippe.poumaroux.free.fr/index.php?tag/Thucydides">Thucydides</a> en version 0.1 sorti le 6 juin 2012: <a href="http://docs.codehaus.org/display/SONAR/Thucydides+Plugin" hreflang="en" title="plugin Thucydides pour Sonar">voir là</a>.</p>Sortie de Selenium WebDriver version 2.18.0urn:md5:7b4cc11fbc7ca4146671e5680b8085262012-01-28T10:18:00+01:002012-10-19T18:46:54+02:00PoumNouvelles versionsAndroidFirefoxFlashGeolocationIEiPhonejarJavascriptMavenSeleniumSelenium ServerSVGWebDriver <p><img src="http://philippe.poumaroux.free.fr/public/selenium-logo.png" alt="selenium-logo.png" title="selenium-logo.png, janv. 2012" /> <img src="http://philippe.poumaroux.free.fr/public/selenium-grid-logo.png" alt="selenium-grid-logo.png" title="selenium-grid-logo.png, janv. 2012" /></p>
<p><a href="http://philippe.poumaroux.free.fr/index.php?tag/Selenium">Selenium</a> <a href="http://philippe.poumaroux.free.fr/index.php?tag/WebDriver">WebDriver</a> et <a href="http://philippe.poumaroux.free.fr/index.php?tag/Selenium%20Server">Selenium Server</a> sortent en version 2.18.0, poursuivant le rythme rapide des mises à jour.
Concernant les modifications:</p>
<ul>
<li>WebDriver:
<ul>
<li>correction de récupération de la valeur d'un attribut des éléments option</li>
<li>gestion des alert dans <a href="http://philippe.poumaroux.free.fr/index.php?tag/Firefox">Firefox</a> et <a href="http://philippe.poumaroux.free.fr/index.php?tag/IE">IE</a>: lance une exception UnhandledAlertException si une boîte alert est présente lors de l'opération. Le alert non géré est également acquitté pour éviter les exceptions à répétition</li>
<li>meilleure gestion des appels de getText dans les éléments <a href="http://philippe.poumaroux.free.fr/index.php?tag/SVG">SVG</a></li>
<li>correction des clics qui ne fonctionnaient plus sous Firefox 4</li>
<li>le driver <a href="http://philippe.poumaroux.free.fr/index.php?tag/Android">Android</a> gère maintenant le <a href="http://philippe.poumaroux.free.fr/index.php?tag/Flash">Flash</a> et <a href="http://philippe.poumaroux.free.fr/index.php?tag/Geolocation">Geolocation</a></li>
<li>correction du support du changement de frame pour le driver <a href="http://philippe.poumaroux.free.fr/index.php?tag/iPhone">iPhone</a></li>
</ul></li>
<li>Remote Control:
<ul>
<li>correction du problème de fermeture de IE HTA à la fin des tests</li>
</ul></li>
<li>WebDriverJS (le binding <a href="http://philippe.poumaroux.free.fr/index.php?tag/Javascript">Javascript</a>):
<ul>
<li>correction de findElements</li>
</ul></li>
</ul>
<p>Le <a href="http://philippe.poumaroux.free.fr/index.php?tag/jar">jar</a>: <a href="http://selenium.googlecode.com/files/selenium-server-standalone-2.18.0.jar" title="http://selenium.googlecode.com/files/selenium-server-standalone-2.18.0.jar">http://selenium.googlecode.com/file...</a></p>
<p>Pour une utilisation avec <a href="http://philippe.poumaroux.free.fr/index.php?tag/Maven">Maven</a>, voir <a href="http://seleniumhq.wordpress.com/2010/07/30/how-to-use-selenium-2-with-maven/" title="http://seleniumhq.wordpress.com/2010/07/30/how-to-use-selenium-2-with-maven/">http://seleniumhq.wordpress.com/201...</a></p>Bienvenue !urn:md5:b4e86dd02d935bef10e84344002dd6292012-01-15T11:22:00+00:002012-01-22T14:30:00+00:00PoumQualité logicielleApachedéveloppementfrançaisIntranetJavaJavascriptLDAPlicence libreoutilsPerlPHPPostgresproductivitéqualitéRESTSGBDSOAPweb <p>Ce blog est destiné à partager les connaissances que j'aurais pu acquérir dans le domaine du <a href="http://philippe.poumaroux.free.fr/index.php?tag/d%C3%A9veloppement">développement</a>, plus principalement dans la recherche de l'amélioration de la <a href="http://philippe.poumaroux.free.fr/index.php?tag/productivit%C3%A9">productivité</a> et donc, de la <a href="http://philippe.poumaroux.free.fr/index.php?tag/qualit%C3%A9">qualité</a> logicielle.... Une particularité: l'ajout de la contrainte de travailler en équipe sur un <a href="http://philippe.poumaroux.free.fr/index.php?tag/Intranet">Intranet</a> non connecté à l'Internet.</p>
<p>Les principaux langages évoqués seront <a href="http://philippe.poumaroux.free.fr/index.php?tag/Java">Java</a> et <a href="http://philippe.poumaroux.free.fr/index.php?tag/PHP">PHP</a> sans oublier <a href="http://philippe.poumaroux.free.fr/index.php?tag/Javascript">Javascript</a>, les développements étant principalement <a href="http://philippe.poumaroux.free.fr/index.php?tag/web">web</a>. Mais comme il faut bien se faire plaisir, il y aura aussi du <a href="http://philippe.poumaroux.free.fr/index.php?tag/Perl">Perl</a> !</p>
<p>Le choix des <a href="http://philippe.poumaroux.free.fr/index.php?tag/outils">outils</a> est réalisé selon les critères suivants:</p>
<ul><li><a href="http://philippe.poumaroux.free.fr/index.php?tag/licence%20libre">licence libre</a></li>
<li>projet actif</li>
<li>localisé en <a href="http://philippe.poumaroux.free.fr/index.php?tag/fran%C3%A7ais">français</a></li>
<li>authentification <a href="http://philippe.poumaroux.free.fr/index.php?tag/LDAP">LDAP</a> possible</li>
<li>api web <a href="http://philippe.poumaroux.free.fr/index.php?tag/SOAP">SOAP</a> ou <a href="http://philippe.poumaroux.free.fr/index.php?tag/REST">REST</a></li>
<li>intégrable avec les autres outils si nécessaire</li>
<li>cohérence technologique: outil si possible en Java ou PHP sur <a href="http://philippe.poumaroux.free.fr/index.php?tag/SGBD">SGBD</a> <a href="http://philippe.poumaroux.free.fr/index.php?tag/Postgres">Postgres</a> si nécessaire et via serveur <a href="http://philippe.poumaroux.free.fr/index.php?tag/Apache">Apache</a></li>
</ul>
<p>A bientôt !</p>