End-to-End Testing of an iFrame Chrome Extension using Node Selenium Webdriver
With Selenium Webdriver, you can create end-to-end tests on more than just your webpages. One capability that we use at Lever is to test our (iframe-embedded) Chrome extension. By skipping into frames, Selenium can test the end-to-end behavior of your extension to make sure you are getting full coverage of your use cases.
Lever’s Chrome extension is a powerful and effective tool that allows recruiters to easily add candidates to their hiring pipeline. By visiting a candidate profile on a variety of websites (such as LinkedIn, Github, AngelList), the extension can automatically grab relevant info and build a full candidate profile in Lever.
Prior to including end to end testing, we treat the Chrome extension as a website and perform standard browser tests to it. This works for well encapsulated behaviors, but the Lever extension also depends on the context around it. We structured our extension as an iframe that resides within the main DOM. Besides benefits such as faster releases, having the extension as an iframe allows the Selenium webdriver to access our extension by switching frames.
Clear setup documentation for Node selenium webdriver is hard to find in the wild, so here is a snapshot of our setup code.
Getting the packaged Chrome extension is also part of the challenge. You have a few options to get the correct file. Currently, we point our extension to the one that is live in the Chrome store.
With this setup, the Node Selenium webdriver can spin up a browser for you with the right chrome extension(s) installed. We recommend that you cache your downloads so that you don’t have to refetch the chrome extension on every single test run. To interact with your extension in the browser, simply jump through frames using the built driver.
Now, you can start interacting with your extension just like any other webpage!
We hope that this quick guide can help you set up your own Chrome extension for testing. If you have any questions or feedback on this tutorial, feel free to leave a note!
Lever is building the world’s first collaborative applicant tracking system, using modern real-time technologies. Learn more about Engineering @ Lever here.