The last time I used Selenium, in 2015, I hated it. It was slow, brittle, and difficult to get working. These days, it can actually be pleasant!
Recently, in the ActionHero project, we found that we really needed a "full browser" integration test… something that we couldn’t mock or accomplish with even a robust tool like request. We needed to ensure that our HTTP and WebSocket libraries properly shared session & fingerprint information, which required cookies, headers, and 2 "full" protocols in the test… so we needed a real browser :/
What follows is a step-by-step guide to writing a "full-browser" test in Jest on OSX, complete with saving off photos of the page.
First, you’ll need to install a few things into your node.js project:
if you don't have homebrew: https://brew.sh/
chromedriver is a version of the Chrome browser which is able to be "machine controlled" by selenium in our tests. Note that we do not need to install anything else like the selenium server.
The default is to use
chromedriver, which is what we’ll be using, but you can also test with Firefox, Safari, and other browsers. Using
jest-environment-webdriver means that we get a few new global variables we can use in our tests, specifically
by(full list here), which we will use in our test.
From here on out, you can use normal Jest commands to start your server in
before blocks, configure whatever you need… and control your browser in the test. We can continue to use the normal Jest/Jasmine assertions. In this example, we’ll be testing www.actionherojs.com for a few things, but you’ll probably be testing localhost.
File Location: __tests__/integration/test.js
Your test can now be run via the normal
jest command*.* That’s it!
Note that there is no need to start or stop the
chromedriver or selenium server (this handled for you).
Selenium is very powerful (full api docs here). You can type input, scroll the page, get and set cookies, etc. If you do find that you need a "full" integration test, this is a very painless way to do it!