Soon after I started working at Redfin at the beginning of February, I was introduced to the browser automation tool Selenium Webdriver. Regretfully I had never gotten around to taking the web programming course at the University of Washington, and so was barely comfortable with HTML, let alone Javascript or CSS. This made learning how to effectively use Selenium much more tedious, in the case of finding the appropriate CSS selectors, and difficult, when I needed to do something that was best done natively in Javascript.
To tackle both of these problems I decided to create one fairly simple Chrome™ extension in Javascript that would help me choose the best CSS selectors to use in our Selenium automation code. The only program already in existence I could find that tried to make finding CSS selectors easier was Selector Gadget, which is a really awesome extension, but didn’t allow me to manually choose human readable CSS selectors that correspond to widgets and links on our pages. This makes already fragile Selenium code even more subject to breakage at the slightest change of the page.
Instead of trying to automatically locate the selectors for an element as Selector Gadget does, I decided to build an extension that would simply list the ID and class names of an element and all of its ancestor elements, and leave it up to the user to decide which ones made the most sense. The extension I ended up writing also lists any iframes (and frame ancestors) that the element is in, and has the ability to filter elements based off of a decent implementation of Selenium’s criteria for element “visibility”.
I learned a ton from this project, and am now pretty comfortable with Javascript. I plan on continuing work on this extension as I learn more about web programming and find more ways to automate the testing of Redfin.
Get the extension on the Chrome web store here: Extension Link
United States
Canada