Selenium, JSLint and editors

Testing with Selenium can require adding a user-extensions.js to your Selenium IDE and Server.

While modifying the user-extensions.js you could need a javascript editor with a JSLint plugin suggesting how to make your code better.

Among open source solutions with JSLint plugin I found: Notepad++, jEdit, Netbeans, Eclipse and Aptana (please suggest others if you know).

Notepad++ (5.9.6.2) has a good plugin updated to 2011 (I can see the Node.js option) and you can put the variable Selenium in the options (Predefined field) of the plugin. The errors are displayed in the JSLint panel which is good but you cannot order them by error description. The only problem is that Notepad++ is for Windows (I have seen people using it with wine for Linux).

Notepad++ doesn’t provide a function navigator but it is possible to setup a Function List plugin manually (put the dll in the program files directory and the rest in the %appdata%/Notepad++/plugins/config with the xml in readonly) and add a rule as explained in this blog.

jEdit (4.5.1 pre1) is a good multiplatform editor. It has a function navigator (you have to install Sidekick plugin with the XML plugin) and it has a JSLint plugin (0.8)

The JSLint plugin is old (in the page you see that the latest release is in 2009) and indeed you don’t see the Node.js option, further you need to add /*global Selenium */ inside your script to make disappear the undefined variable Selenium message. The errors are displayed in the Error List panel and underlined in the file andyou cannot order them by error description

Netbeans (7.0.1) has his own JSLint plugin, with a configuration under Tools->Options->Miscellaneous->JSLint but the Predefined field doesn’t seem to work so you need to add /*global Selenium */ in your script. The error are displayed next to the file and under the Task list (see the instructions) and you can order them by error description.

With Netbeans you can see the function navigator in the Navigator panel. Compared with others IDE (Eclipse/Aptana) you can do the check on a file or in a project while the others can work only in the project.

For Eclipse (Indigo) I setup the JSLint plugin using the update site:

http://update.rockstarapps.com/site.xml

When you have setup the plugin, you see a RockStarApps menu and, as you can notice, the plugin is not updated to the last version of JSLint (Node.js is not there) but the Predefined field works.

The errors are displayed next to the file and under the Problems panel and you can group them by error description.

For the function navigator Eclipse has a JavaScript Development Tools plugin that you can setup using the following site under WTP 3.3.1:

http://download.eclipse.org/webtools/repository/indigo

Then open the perspective Javascript and you find the function navigator in the Script Explorer panel.

Concerning Aptana Studio 3, there is a native JSLint plugin to be enabled under Window->Preferences->Aptana Studio->Validation->Javascript. I don’t see the configuration panel like in the other plugins so you need to add all the options in your javascript file but you can fiter some warnings.

The errors are displayed next to the file and under the Problems panel and you can group them by error description. It doesn’t look to me stable for the moment (it seems not all the warnings I get with the others plugin are there).

Aptana has a function navigator in the Outline panel.

At Continuous Integration level I found a Jenkins Violation Plugin or just using jslint4java which has an ant plugin on which is based the Sonar plugin.

Advertisements

Testing a multilanguage website with Selenium

I believe the technique to test a multilanguage website is still a quite open discussion and it depends what are the objectives. Normally you would say “I want to check all the labels that are on the website are on the right place” which means you have to extract them from somewhere, store them and compare them with those on the website.

When you extract them from a database you might probably already have a form that allows to create them and a page to list all of them. Somebody would say that it is convenient to retrieve them directly from the database doing in practice data driven testing/database validation.

If you are writing test cases directly with a programming language like Java (just for example) you have already the methods to contact the database and retrieve the labels but if you are writing your test cases in Javascript either you need a webservice to contact an application to retrieve the database data or you have to create a command to go to the page of your application that list all the labels. For sure you have to synchronize your test cases with the stored labels and not updating the test cases manually.

I am still not convinced how far a tester can go (and learn) when testing. At the beginning I was thinking that a tester could learn just selenium commands and a developer will extend some of them for her/him. In reality it depends on the skills of your tester. In my opinion javascript is a language easy to learn (together with xpath or css selector) it can parse easily DOM objects and Selenium can reach this level of granularity. So a tester needs to know the structure of a DOM object and from here s/he can learn xpath/css selector and javascript.

This long introduction will help to understand what I am going to explain.

Usually with Selenium you can store xpath or css selector in a variable with a simple command (like storeText) which stores this variable in a local javascript array (storedVars) invisible to a simpler tester. A contributed user extension can store a text in a global array that can be reused among all the test case. This global array (globalStoredVars) can be indeed used to store the labels of your website.

Now supposing that you have a website in 3 languages (en, fr, de), the approach that I would do is to store the labels with a language suffix (for example label_login_en, label_login_fr, label_login_de) and store in the original variable (label_login) one of 3 variables every time I change language, using a javascript function to update the original variable.

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

Selenium.prototype.doSetLanguage = function(language) {
  var languages=new Array("en","de","fr");
  if((languages.indexOf(language) == -1) || (language=="random") )
    language = languages[Math.round(Math.random() * new Date().getMilliseconds())%(languages.length)];
  var suffix="_"+language;
  for (var i in globalStoredVars){
    if(i.endsWith(suffix)){
      LOG.info("found variable "+i);
      var new_var=i.substring(0,(i.length-suffix.length));
      LOG.info("new_var: "+new_var);
      globalStoredVars[new_var]=globalStoredVars[i];
    }
  }
  globalStoredVars['xpath_cell']="//td[.='"+globalStoredVars['label_login']+"']";
};

The example above shows a Selenium command setLanguage which takes as input a language (or gives the possibility to choose a random language if not inserted or if “random” is used), it takes all the labels stored in globlalStoredVars with the suffix for the language chosen and it to replace them with the original variable without suffix.

The inconvenient is that if you have for example an xpath that it turns contain one of the original labels (see the last row in the code where xpath_cell depends on the label_login variable), you have to update it as well every time  (which means moving the storing of the xpath from the selenium command into a javascript command directly, which means the tester needs to know javascript).

Putting a part the usage of an xpath containing a label (that can be arguable), the question would be if it is correct changing a language (and what are the implications) at the beginning of the test suite or at the beginning of each test case.

It is obvious that in terms of performance it is better to choose it once at the beginning of the test suite but in some cases (a user chooses the own language in the profile or the website chooses a language for a particular user) it is not possible so you need to update each testcase.

Web, javascript e performance

Oggigiorno il web sta assistendo ad una evoluzione dal punto di vista delle performance. Evoluzione che è determinata in parte dall’uso di Javascript (e quindi spostamento del carico dal server al client) e in parte dall’annunciato standard HTML 5 che permette evoluzioni come webgl spingendo i browser a diventare migliori ma anche a fare i conti con le prestazioni.

Possiamo in definitiva avere 3 tipi di evoluzioni dal punto di vista delle performance:

  1. Performance dei client (browser)
  2. Performance del codice scritto per client e server
  3. Performance dei server (dal punto di vista dei client)

Performance dei browser

E’  in questo periodo che con l’uso, magari anche smoderato, di Javascript e con l’implementazione dello standard HTML 5 assistiamo ad una competizione tra i browser per quanto riguarda le performance ed in particolar modo quelle cosi tanto pubblicizzate di Chrome e ora anche di Opera 10.50.

Performance del codice scritto per i browser e per i server

Ovviamente questo campo è molto delicato perchè dipende dalle capacità dei programmatori. Se prima cercavamo di ottimizzare il codice lato server per scrivere perfertte pagine dinamiche ora, poichè esistono librerie come Jquery, che permetto di essere espandibili, la programmazione si è spostata sul fronte Javascript (a tal proposito ho trovato questo articolo dove si suggeriscono metodi per incrementare le performance con il codice JQuery)

Software come Netbeans e Aptana ad esempio permettono ora l’autocompletamento del codice con quindi una relativa facilità nella scrittura.

Performance dei server (dal punto di vista dei client)

In questo campo ci sono molti aspetti da tenere in considerazione. Quando vogliamo che un sito web sia veloce possiamo intendere:

  • numero di connessioni http
  • numero di immagini, javascript, CSS da caricare
  • ordine in cui caricare javascript e CSS

Esistono diverse misure per fare ridurre il carico. Prima di tutto vi consiglio di usare Firebug che con un diagramma temporale vi fa notare come le varie risorse vengono caricate.

Sulla base di Firebug esistono poi Yslow e Page speed che assegnano dei punteggi alle pagine web in base a come sono strutturate e suggeriscono come migliorare il caricamento delle pagine, come ad esempio:

  • combinare diversi javascript se possibile e minimizzare il codice (in pratica il codice javascript risulta su 1 o poco più linee cosi da essere caricato velocemente (ovviamente questo lo rende illegibile)
  • combinare diversi CSS, minimizzare il codice e rimuovere quello non usato; un piccolo aiuto può venire anche da DustMeSelector un plugin di firefox che, stando a quello che dice, tramite il file sitemap permette di analizzare il CSS delle pagine e vedere quello non usato.
  • combinare le immagini e minimizzare le immagini, a tal proposito è possibile talvota che in presenza di piccole immagini è più il tempo sprecato per le connessioni http che quello di caricare una immagine, vi consiglio perciò di dare una occhiata a SpriteMe

C’è da dire che Page Speed nasce dopo Yslow o comunque dopo che Steve Souders, scrittore del libro High Performance Web Sites è passato da Yahoo a Google, consiglio di avere entrambi.

Inoltre si sta facendo strada le reti CDN, che non sono altro che un sistema di load balancing dal punto vista geografico. Prima fra tutte Google che, avendo a disposizione server in tutti il mondo, vi permette di non fare caricare le librerie javascript dal vostro sito ma da uno dei tanti server sparsi, vedete la lista delle librerie nel sito. A voi la scelta se passare da Google o no.

Ora cercate di non diventare troppo maniaci delle performance :-)

Note su Hudson e CruiseControl

In uno dei recenti progetti sto valutando con un mio collega la possibilità di fornire come servizio l’uso di uno strumento di Continuous Integration.

Attualmente stiamo hostando diversi progetti Java (30), PHP (10), Python (6) e Javascript(6), C++ (4) più altri minimi progetti; di conseguenza ho cominciato a valutare strumenti Java tra cui Hudson, CruiseControl e Apache Continuum per poi vedere quale è il più indicato per progetti in PHP e Python.

Nota: Avevo già provato Apache Continuum ma non mi aveva dato una grande impressione.

Guardando sul sito JavaPowerTools , Wakkaleo, SOA World Magazine, Eclipse Community Survey 2009 e partecipando al Devoxx si nota come Hudson e CruiseControl sono i preferiti.

Se diamo uno sguardo a strumenti di continuous integration per PHP ritroviamo in pratica Xinc e PHPUnderControl, quest’ultimo si basa su CruiseControl e include strumenti come PHPUnit, PhpDocumentor e PHP_CodeSniffer.

Se quindi consideriamo CruiseControl + PHPUnderControl si copre una grossa percentuale di progetti. CruiseControl e Hudson hanno comunque il supporto a Phing per progetti in PHP ma PHPUnderControl è alettante.

Vediamo quali strumenti esistono per Python:

Development in Python

Link

Buildbot, a python continuous integration tool http://buildbot.net/trac
It explains how to integrate Hudson and Python (but an internal link explains the same thing with CruiseControl with PyUnit). For Hudson there is a plugin that uses Pylint http://redsolo.blogspot.com/2007/11/hudson-embraces-python.html
Python Ant task (Pydoc generation) http://www.rpstechnologies.net/PyAntTasks.html

http://www.ibm.com/developerworks/opensource/library/os-ecant/

Python Doxygen integration http://internetducttape.com/2007/03/20/automatic_documentation_python_doxygen/
Pylint (errors in python code – command line) http://www.logilab.org/857

It claims to be more advanced of PyChecker, also Netbeans Python Early Access seems to use it, see:

http://www.netbeans.org/kb/docs/python/temperature-converter.html#08

Also PyDev (Eclipse plugin) has a support for PyLint, see

http://pydev.sourceforge.net/pylint.html

Eric Python IDE has a plugin for Pylint, see:

http://eric-ide.python-projects.org/index.html

PyChecker (error in python code – command line) http://pychecker.sourceforge.net/

Used by Stani Python Editor, see:

http://pythonide.blogspot.com/

PyFlakes (error in python code – command line) http://divmod.org/trac/wiki/DivmodPyflakes
Figleaf (code coverage – command line) http://darcs.idyll.org/~t/projects/figleaf/doc
General notes http://www.doughellmann.com/articles/CompletelyDifferent-2008-03-linters/index.html

Sfortunatamente vediamo che esiste in pratica solo Buildbot che non puo’ essere integrato con CruiseControl o Hudson ma esiste un plugin, più per Hudson che per CruiseControl, che aiuta ad integrare Python con gli altri tools.

Dall’altro lato abbiamo un Python Ant Task e qualche strumento a linea di comando che possono essere usati con Ant e quindi una facile integrazione con CruiseControl e Hudson.

Riguardo Javascript al momento l’unico Javascript unit test che sembra integrabile con Ant per eseguire unit test è JsUnit.

Riguardo a C++ notiamo che in Hudson ci sono 2 plugin (CCCC e CppUnit) mentre su CruiseControl sembra che non ci sia niente (solo questo link). Tuttavia ho trovato un Ant task per C++ che permette di scegliere tra diversi compilatori.

Per quanto riguarda i generatori di documentazione ritroviamo:

Document generator

Link

Javadoc

http://java.sun.com/j2se/javadoc/

Doxygen

http://www.stack.nl/~dimitri/doxygen/

PhpDocumentor

http://www.phpdoc.org/

Pydoc

http://docs.python.org/library/pydo

JsDoc Toolkit

http://code.google.com/p/jsdoc-toolkit-ant-task

Per C++ di solito viene usato Doxygen. Per Javascript potete notare JsDoc Toolkit per cui esiste il rispettivo Ant task.

Sarebbe bene anche includere software che fanno analisi statica del codice per fare debug del codice tra questi ritroviamo dal sito JavaPowerTools:

Java Analyzer Code Style

Vote – Number of votes

Checkstyle

3,37/5 – 90

PMD

3,63/5 – 84

Findbugs

3,69/5 – 83

Dobbiamo dire che Doxygen e questi strumenti (più Cobertura) sono integrati come plugin su Hudson tuttavia essi sono disponibili come Ant task e quindi integrabili con CruiseControl:

Plugins

Link

Checkstyle

http://checkstyle.sourceforge.net/anttask.html

Findbugs

http://findbugs.sourceforge.net/manual/anttask.html

Cobertura

http://cobertura.sourceforge.net/anttaskreference.html

PMD

http://pmd.sourceforge.net/ant-task.html

Doxygen

http://ant-doxygen.blogspot.com/

Per C++ ho notato che esiste Cppcheck to do static code analysis. Qui ho trovato come usarlo, in pratica è un eseguibile (esiste exe e deb)  che si puo’ facilmente integrare.

Per Javascript ho notato che esiste Yasca strumento a linea di comando che si integra con diversi strumenti visti prima (tra questi Javascript Lint e CppCheck) e genera diversi report.

Ultime note:

  • abbiamo notato che Gforge AS (quindi non la nostra versione community), ha un plugin per CruiseControl.
  • Gforge ha poi un sistema di gestione delle richieste di supporto (ticket) non tanto carino e sarebbe possible rimpiazzarlo con Trac che ha tra i suoi plugin proprio il supporto per CruiseControl e Hudson.
  • Abbiamo notato che Jboss e Linkedin fanno uso di Hudson (stiamo parlando di soli progetti Java).
  • Quelli di Apache usano sia Hudson che Continuum :-)
  • Stefane Fermigier, CEO di Nuxeo, afferma di usare Hudson e Glassfish come application server.
  • Installando Hudson per prova si vede subito la possibilità di usarlo su più nodi per scalabilità o semplicemente perchè alcuni progetti richiedono sistemi operativi diversi mentre sembra per CruiseControl non esiste una perfetta integrazione. Entrambi comunque propongono JNLP come connessione.
  • Occorre considerare l’integrazione con LDAP. Per Hudson un post interessante è qui.
  • Trovata una tabella comparativa.
  • Trovato un documento comparativo pubblicato il 2 gennaio 2009

Ora credo ci sia da scegliere anche perchè ho notato in rete che la gente lamenta il fatto che CruiseControl vada opportunatamente configurato tramite file XML mentre Hudson tramire interfaccia grafica e gli sviluppatori migrano nel tempo a Hudson.

//