As a tester of web applications, I’ve become familiar with how web pages are constructed and rendered through the browser. Firefox Add-ons provide a great set of tools for doing this and have been a mainstay of my testers toolbox for quite a while. One of my jobs as a Mozilla employee was to show others how to use some of these addons.
Below is a chat I had a while back with a contributor (name anonymized for privacy) about Firebug and Firepath, 2 addons that I use all the time for getting information about the elements, called locators, on a webpage. We use these all the time in Selenium testing and it is a taste of what I’ll be talking about in a free webinar I’ll be giving for the Software Association of Oregon on Tuesday, May 15 from 12:00pm to 1:00pm. Registration is free :o)
In addition to Firebug and Firepath, I’ll be talking about an add-on developed at Mozilla, Mem Chaser and some browser functionality that started as an add-on but has made its way into the Firefox browser, Tilt.
marlenac Have you used Firebug before?
olivier No i have heard of it
olivier Its a firefox extension
marlenac You’ll want to install 2 addons: Firebug and Firepath into firefox
marlenac I use both of these all the time to help with the locators. I’m also looking up a good link on CSS for you.
marlenac This blog post explains some of it and has a bunch of other links for working with Selenium and CSS: http://blog.reallysimplethoughts.com/2010/10/12/a-quick-introduction-to-css-locators-in-selenium/
olivier How does firebug help with locators?
olivier Does it generate the expression?
marlenac It allows you to inspect web pages so you can see what the locators are.
marlenac If you’ve got it installed, choose an element on a web-page, right click and choose “inspect element”
olivier Kk
marlenac As an example, I’m on the homepage for addons: https://addons-dev.allizom.org/en-US/firefox/
marlenac If I hover the mouse over the big “ADD-ONS”, right click, and choose inspect element
marlenac It will split the window of the browser and show me the html of the page at the bottom.
olivier Kk
marlenac the line starting with “<a title=”Return to the Firefox…” is highlighted.
marlenac Just above that is a css class “site-title”
olivier Right
marlenac If I want to select the link at “ADD-ONS”, the selector will be “.site-title > a”
marlenac We can check that this is correct with Firepath.
marlenac In the Firebug pane, there are several tabs at the top. “HTML”, “CSS” and further over is “Firepath”
olivier Kk
marlenac If you paste in “.site-title > a” without the quotes, it will highlight the element for you.
marlenac It’s pretty great!
olivier Thx so much u just made my life easier
marlenac I know!!!!!! We’d all be suffering without Firebug and Firepath!!
marlenac A couple of tips.
marlenac Use .blah to specify a class name
marlenac Use #blah to specify an id.
marlenac Use the “>” to get to a child element.
olivier What if there are many child element?
marlenac You can keep going with it.
marlenac or if there is a list, you can use “nth” to specify the 1st, 2nd, 3rd.
marlenac This post has a great explanation of that: http://saucelabs.com/blog/index.php/2010/01/selenium-totw-css-selectors-in-selenium-demystified/
marlenac I’m just finding an example in our code as well.
olivier I think i get it
marlenac Cool!
olivier I will ask i get stuck
olivier Thx again
marlenac You’re welcome :)
We so enjoyed the webinar, I really enjoyed the way it was conducted. The participants were allowed to add our comments and all.
Had real fun.