This site has moved

This site has moved. For more post on web development (in English and Dutch) follow us on www.tomgreuter.nl/tech.

Geef een reactie

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

 

Geef een reactie

Set text file encoding to UTF-8 in Aptana

Working in a web environment, it’s important to keep your character encoding clear. Serious websites set their character encoding to UTF-8 to be sure to be compatible with different language sets. Obviously the same accounts for the database.

Sometimes it’s also important to set the text file encoding of your script file (php etc.). In Aptana 2 the global text file encoding is set to Cp1252. You can change this to UTF-8 the following way:

  • In Aptana go to Window -> Preferences
  • Type “encoding” in the search box.
  • Go to General -> Workspace
  • Change the text file encoding to UTF-8 and apply.

In my case Aptana hung with the build settings so I had to uncheck them all:

Happy UTF-8 programming!

Comments (2)

CSS and ellipsis: Cross-browser practices

Every now and then, say twice a year, I run into the same problem: what is the best cross-browser ellipsis solution? Because I end up searching the internet everytime, I decided the write down my prefererred solution.

The problem is as follows: You have a long sentence and you want to show only the first line and end up with … (the ellipsis) and trunk the rest of the sentence. Of course you can implement a server side solution, but today I prefer a client-side one.

IE6 and IE7 are simple, they support the CSS-property text-overflow, as do the Webkit based browsers Safari and Chrome. Text-overflow is part of the coming CSS3-recommendation, by the way. Because the property is not standardized yet Opera has it’s own implementation -o-text-overflow, while IE8 in standards mode supports -ms-text-overflow.

The only hickup we encouter with Firefox. The current version (Firefox 3.5) still does not support this property… This leaves us for several workarounds:

  • Do nothing. All browsers will show an ellipsis, Firefox just shows nothing. My prefered solution, because it involves less time and effort.
  • Create a Firefox-only selector in your CSS. This can be handy is you have something like Browserhawk installed on your server. Is not 100% waterproof though. Don’t just add the sometimes suggested “:after-content” option. (With something like myclass:after { content: “…” } we could easy add ellipsis to Firefox, but other modern browsers would render the ellipsis twice.
  • Use the “:after-content” setting for all modern browsers and show the ellipsis in IE6 and IE7 with conditional comments.
  • Use a JavaScript solution. Check for example this nice jQuery plugin.
  • Use XUL.

The CSS at last:

.ellipsis { 
  display: block; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis; 
  width: 230px;
  overflow: hidden;
}

Bonus:

Toggle the ellipsis view with jQuery:

$(".ellipsis").click( function() { $(this).toggleClass(".ellipsis") });

Disclaimer:

Not all options are tested. Please comment.

Geef een reactie

IIS7 configuren voor Windows Vista Home Premium (NL)

Daar ging mijn halve avond in rook op: ik wilde even mijn oude ASP-site draaiend krijgen op mijn localhost op Windows Vista…

  1. Met Windows Vista wordt IIS7 meegeleverd. Deze staat standaard (natuurlijk) niet aan. IIS aanzetten gaat via het Configuratiescherm > Programma’s > Windows-onderdelen in- of uitschakelen (administrator-rechten vereist).
  2. Simpel Internet Information Services aanklikken is niet voldoende. Je moet ook kiezen voor World Wide Web-services > Toepassingsontwikkelingsfuncties > ASP.
  3. Je zou nu een ASP-site moeten kunnen draaien op http://localhost.

Iedereen – behalve de Goden op de Olympus – maakt wel eens fouten in hun software. Om gedetailleerde foutmeldingen te tonen moet je de halve wereld omdraaien, maar de volgende handelingen zouden ook kunnen helpen:

  1. Je kunt de IIS-manager (IIS-beheer geheten in het Nederlands) openen door in Vista te zoeken op “iis”.
  2. Selecteer de default website (of een andere als het daar om gaat…).
  3. Dubbelklik op het icoon Foutpagina’s. Klik op de actie Functie-instellingen bewerken…
  4. Selecteer een van de opties voor gedetailleerde foutmeldingen.
  5. Nu kreeg ik direct de weinig verhelderende foutmelding “An error occurred on the server when processing the URL. Please contact the system administrator” voor de kiezen.
  6. Nu kun je a) in je logfiles gaan neuzen (die standaard op onzichtbaar staan in de Verkenner, dus die moet je eerst tweaken).
  7. Fijner is het natuurlijk om de exacte foutmelding in je browser te zien. Daartoe moet je een command box openen (als administrator!!) en de volgende regel uitvoeren “%windir%\system32\inetsrv\appcmd.exe set config -section:asp /scriptErrorSentToBrowser:true“. (Zie de comments op IIS.net)

Happy debugging!

Comments (6)

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)

IE7 and form submitting

Often, IE7 is regarded less standards compliant than its open source alternatives. Accidentally I ran into a – at least for me – unknown feature in IE7 which proves that in some cases IE7 can be rather strict. Take this, a FORM without a submit-button, but with a BUTTON-button:

<form>
  <!-- a lot of code -->
  <button>fire!</button>
</form>

Firefox just submits the form when you click the button. IE7 however does nothing! It appeared that IE7 only submits the form when the attribute type is specified as type=”submit”.

  <button type="submit">fire!</button>

Cool! Seems logically in the end. Where are the times that Microsoft interpreted all your sloppy code?

Tested with a XHTML 1.0 Strict page with a FORM-element which included three BUTTON-buttons. I encountered no form submitting problems without the type attribute specified¬† in FF 2.0.0.1 or in Opera 8.54 on Windows XP SP2. I didn’t test in IE6 or other exotic browsers. Lees de rest van dit artikel »

Comments (7)

Older Posts »
Volg

Ontvang elk nieuw bericht direct in je inbox.