Selenium may seem like a big overhead, but when you don’t have a dedicated QA team like us, it is a life saver. Between that, and our functional, unit, and integration tests we manage to cover testing most of the app. However, since it uses JavaScript, and each browser is implemented different, there are some tricks that are required in order to get cross-browser selenium running.
One of them that we use most of the time allows us to enable show/hiding of browser elements and test through selenium that it works.
The trick is to define a css class :
.hidden { display:none; }
Locate the content that needs to be toggled :
<div id=”toggle_me”> content </div>
Then use this JS onclick for your element that initiates the toggle. Since we use rails, we use prototype, which has a terrific helper function:
$(“toggle_me”).toggleClassName(“hidden”);
The reason it needs to be done that way is because Internet Explorer doesn’t fully support attributes. So CSS like this is invalid in IE:
DIV[style="display:inline;"] { background: yellow; }
Then in selenium the checks will look something like this
check hidden :
verify_element_present “css=#hidden_options.hidden”
check visible :
verify_element_not_present “css=#hidden_options.hidden”
That’s it! This simple thing has saved us lots of pain in making sure we can run Selenium in IE. If anyone else has some tips, I’d love to hear them. We’ve been having problem after problem trying to get selenium passing using Safari.
Can you tell us in which file(.js or .css and the location of the file in the project) we have to make changes?
Thanks In Advance
Vk
Comment by Vk — September 17, 2008 @ 2:53 pm
The css file would just be the main css file in your application. The JS is referring to any place you use javascript. So it may be embedded, called via ajax, or in a helper JS file.
Comment by Russell — November 11, 2008 @ 7:47 pm