Webinar with me: Using Firefox Add-ons for testing

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 :)

1 thought on “Webinar with me: Using Firefox Add-ons for testing”

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

Leave a Reply

Your email address will not be published. Required fields are marked *