Selenium Builder was a life saver for many testers when SeleniumIDE became…a bit deprecated. With Selenium Builder, manual testers and less technical team members were still able to record and replay automated tests against a variety of browsers. When we came out with our integration for Selenium Builder and CrossBrowserTesting’s Cloud Grid, we also saw how awesome it would be to integrate it with our Automated Screenshots. So we did, and this is how you can use it to easily take automated browser screenshots of your website after a complex set of actions.
First, let’s begin by installing Selenium Builder and getting familiar with it. Selenium Builder is a Firefox Add-On you can find in their Add-On store. Once you have downloaded it, you’ll have to restart your Firefox browser. After you’ve done that, let’s head on over to Google.com.
In this example, we’ll want to take an automated screenshot of the second search results page for “Cross Browser Testing” on Google. This is a fairly complex action, and hey – it might help you with tracking SEO.
Right-click your screen, and select Launch Selenium Builder from the menu.
That will bring up Selenium Builder in another window:
Let’s click record and start recording our test. Head back to the Chrome window and type “CrossBrowserTesting” into the Google search bar, and click enter. Once that page loads, click Page 2. After you’ve finished, go back to the Selenium Builder window and click Stop Recording.
Now that we’ve finished recording our script we’ll want to export this script in a file format compatible with CrossBrowserTesting’s Automated Screenshots. By clicking File, and then Export, we’re given a few different options formatting our export. We’ll choose JSON, save the file with the title “google-screenshot.json”, and then open the file and copy the text <– we’ll need this soon!
Here is my JSON file after recording our test.
Now let’s head back to CrossBrowserTesting to feed our test into the Automated Screenshot tool. Once logged in, click Screenshots in the left menu, and then Advanced Options. You should see a list of toggles – click the one called “Selenium Script”, then click New.
This will bring up a modal for us to name our script and paste it in from our clipboard. After you can see your script in the entry modal, click Save.
Okay, now we have our script created and loaded into CrossBrowserTesting. Now, the only thing left to do is run the test. Click Run Test and we’ll start running your test against our real browsers and return you a high-def, full-page automated screenshot!