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

• How to add jQuery (Sizzle) selectors to Selenium
• Sizzle

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!

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.

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!

https://careers.ing.com/

<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.

Tags: jaiku, feeds, rss, mash-up, web2.0, useless

However, Microsoft also has a web alternative: live gadgets. These gadgets are installed and run on your personal start page (as Microsoft sees it) live.com. Today I had to do a bit of a research on gadgets and walked through the Windows Live Gadget Developer’s Guide. In the guide I discovered two little errors, so if you want to play around with gadgets be aware:

1. In section “Setting Up Your Environment” is stated: “In order to develop locally hosted Gadgets within IE, ensure that you have set the ‘Access data sources across domains’ setting to ‘prompt’. Inside IE, you can check this through Tools -> Internet Options… Click on the Security tab, select internet zone and click on ‘Custom Level’. Under ‘Miscellaneous’ select ‘prompt’ for ‘Access data sources across domains’.” Be sure that this accounts for the internet zone as well as for the trusted zone!
2. In section “Defining Content” a code example is provided with the following line “Gadgets/htmlinliner/htmlcontent.xml”. On my station this only worked with a full address: “http://localhost/Gadgets/htmlinliner/htmlcontent.xml”.

Check my delicious-links on Microsoft Gadgets. Happy gadgetting!

Tags: microsoft, windows, vista, gadgets, widgets, develop

Onder standardista’s is het nogal cool om geen XHTML, maar HTML te schrijven. Belangrijkste argument is doorgaans dat je XHTML als “text/html” en niet als XML mag serveren (omdat Internet Explorer daar geen raad mee weet). So what? zou je zeggen. Tommy Olsson: “We cannot use any of the features of XHTML when serving it this way, because we are not really using XHTML at all — we’re only pretending to.” Dan zou ik wel graag willen weten wat die ‘features’ zijn. Missen we echt iets? En over missen gesproken: mis je iets als je XHTML gebruikt in plaats van HTML? Ik vermoed van niet.

Wat ik niet wist was de betekenis van de opbouw van de DOCTYPE-declaratie (als <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). Wat doet de ‘EN’ daar bijvoorbeeld? “Note that it doesn’t say anything about the language of the web page itself; it is the language of the DTD that is specified here.” Het eerste deel van de identifier heet de ‘public identifier’ en het tweede deel de ‘system identifier’. “If the system identifier is missing, or if there is no DOCTYPE declaration at all, browsers assume that this is an old document and render it in ‘quirks mode’.” (Hé, zou Anne bewust ‘quirks mode’ triggeren?)

Ook over character encoding is Olsson verhelderend. Ik wist bijvoorbeeld niet dat de character set die je in je HTML-pagina opneemt (bijvoorbeeld “<meta http-equiv="Content-Type" content="text/html; charset=utf-8">“) overruled wordt door de HTTP header die je mogelijk via de server verstuurt.

Over het address-element zegt Olsson dat “A common misconception is that address is meant to be used to mark up only postal addresses, but that is not the case.” Ook telefoonnummers en andere contactinformatie kan met het address-element opgemaakt worden. Hij vergeet evenwel te vermelden dat het bij het address-element gaat om de contactinformatie die van toepassing is op de informatie die een bepaalde pagina geeft. Een adresboek bestaat dus nietuit een lange reeks address-elementen.Alleen de contactgegevens van de maker van het adresboek zou je in een address-element mogen verwachten.

Olsson licht nog een paar HTML-elementen toe die we nooit gebruiken omdat geen CMS ze ondersteunt. Maar toch is het handig om te weten dat “A certain term should only be marked up with dfn once in a document (where it is first used and explained)” en dat “A common misconception is that var should be used for marking up variables in programming code samples”.

Over het alt attribute kan nooit genoeg gezegd worden: “This text equivalent should not describe the image; it should convey the equivalent information”. Olsson geeft ook een helder voorbeeld om deze stelling toe te lichten (zie step 33).

Tot slot beweert Olsson dat de waarde van een id, name and class attribute altijd moet beginnen met een letter. Ik dacht evenwel dat het ook een underscore mocht zijn?

Een aantal van dit soort artikel tesamen zou een prachtig boek kunnen vormen over de basis en de achtergrond van HTML; verplichte kost voor iedereen die al langer dan vijf jaar met HTML zit te knoeien.

Tags: tommy+olsson, html, markup