Archive for JavaScript

Run Selenium IDE tests with jQuery selectors

This took me a lot of time to find out, so here is a short and handy overview for everyone that wants to use jQuery selectors instead of Xpath selectors in their Selenium IDE tests. First the steps to achieve this, followed by some comments for the few readers that are still interested.

Add jQuery selectors to Selenium

  1. The selector engine of jQuery is called Sizzle. Download it from sizzlejs.com and store the file sizzle.js in your Selenium project. (I used the current version, 1.0.)
  2. Create a blank JavaScript file, rename it to “user-extensions.js” and save it to your Selenium project.
  3. Add the following code to “user-extensions.js”:
    PageBot.prototype.locateElementBySizzle = function(locator, inDocument) {
    var results = [];
    window.Sizzle(locator, inDocument, results);
    return results.length > 0 ? results[0] : null;
    }
  4. Open Selenium IDE from Firefox.
  5. Go to Options > Options > General.
  6. Click the “Browse …”-button of “Selenium Core extensions (user-extensions.js)”
  7. Multiple select “sizzle.js” and “user-selections.js”. They should be added comma-seperated to the input field (for example: “D:\myProject\user-extensions.js, D:\myProject\sizzle.js“).
  8. Restart Selenium IDE.
  9. Execute the following test:

Command: verifyElementPresent
Target: sizzle=body
Value: true

This test should succeed on every normal HTML page. ;)

Comments

  • Why use Sizzle and not the complete  jQuery library? The same setup can also be used for jQuery, but I could not get it working. Some say that recent versions of jQuery (I use 1.4.4) don’t cope with Selenium, at the moment.
  • It’s still possible though to use jQuery functionality in your tests. If jQuery is available on the page you are testing, one could do a test similar to:

Command:assertEval
Target: selenium.browserbot.getUserWindow().jQuery("body").length
Value: 1

 

Helpful resources

 

Advertenties

Geef een reactie

Bij de ING geen Firefox

Je kunt je natuurlijk afvragen wat ik op de banensite van de ING doe, maar deze foutmelding – die mij nota bene verhindert bij de vacaturedetails te komen – wilde ik jullie toch niet onthouden:

Foutmeldinkie

https://careers.ing.com/

Comments (5)

Gescheiden JavaScript (maar niet altijd?)

Stel je hebt een pagina met 100 linkjes die in een pop-up venster geopend moeten kunnen worden, dan zijn er (o.a.) deze twee opties:

<a href="popup.html" class="open-popup">linktitel</a>

en

<a href="popup.html" onclick="return openPopup(this.href)">linktitel</a>

Bij het eerste voorbeeld zou je op de volgende manier in de JavaScriptcode het onclick-event aan de anchor kunnen hangen:

function attachEvent() {
  var links = getElementsByClassName(document, "*", "open-popup");
  for (var i=0; i<links.length; i++) {
	links[i].onclick = function() {
	    openPopup(this.href);
	    return false;
	}
  }
}

Bij het tweede voorbeeld ben je meteen klaar. Stel dat je ook al gebruikt maakt van sIFR en andere JavaScript enhancement functionaliteiten, welke oplossing zou dan je voorkeur hebben?

Tags: ,

Comments (2)

CSS Browser Selector

Leuk bedacht hoor, die op JavaScript gebaseerde CSS Browser Selector (tot mijn verrassing gepromoot door de Zijlijn). Maar wat is het nut ervan? Zelf zie ik geen directe connectie tussen CSS en JavaScript en vind ik dat beide technologieën onafhankelijk van elkaar op een webpagina moeten kunnen staan. Bovendien dacht dat ik dat code forking voltooid verleden tijd was. En tot slot houdt het script geen rekening met de verschillende browserversies. Kan iemand mij vertellen wat het nut zou kunnen zijn van de CSS Browser Selector?

Tags: , ,

Comments (2)

Maintainable JavaScript

In de drietrapsraket van onderhoudbare HTML, onderhoudbare CSS en onderhoudbare JavaScript zijn we met de eerste goed op weg, maar valt er bij de laatste twee nog veel te winnen. Regelmatig zie ik een unobtrusive JavaScriptmenuutje uitgroeien tot een codemonster van 200 regels, omdat je én Dean Edward’s window.onload wilt toepassen, rekening wilt houden met memory leakage en ook nog toevallig sIFR van stal gehaald hebt. Alles geheel en al tot brei verwerkt.

Chris Heilmann doet een goede voorzet om met The Importance of Maintainable JavaScript licht in de duisternis te werpen:

So here’s an eight step plan to show you what can be done to make your scripts easier for the maintainer.

Hij geeft 8 soms voor de hand liggende, maar desalniettemin niet te verontachtzamen tips.

Tags: , ,

Geef een reactie

Front-end code reviews

In het Digital Web Magazine spreekt Garrett Dimon over front-end code reviews. Hij heeft helemaal gelijk dat een review op HTML- of CSS-code een ondergeschoven kindje is. Hij vindt dat ook projectteamleden die niet direct met de HTML te maken hebben een review zouden moeten doen en ziet de volgende voordelen van front-end code reviews:

  • Verschillende disciplines binnen één team raken betrokkener bij elkaars werk;
  • Het verhoogt de consistentie van de code;
  • De code wordt beter, omdat meer mensen er een blik op geworpen hebben;
  • Het is een evidente manier om van elkaar te leren.

Vervolgens bespreekt hij een grondige aanpak voor code-reviews, die mijns inziens wat ver gaat, maar zijn punt is gemaakt. Garrett, ik zal er harder aan gaan trekken om dit voor elkaar te krijgen, want ik ben het met je eens dat de volgende drie gevolgen van code reviews erg belangrijk voor kwalitatief betere code: educatie, consistentie en vroegtijdige foutopsporing.

Tags: , , , , ,

Geef een reactie