Hello, CCS — A look at testing using Cucumber, Capybara, & Selenium
I was recently tasked with a Test Automation project that would require implementing Cucumber, Capybara, and Selenium. My previous testing experience had primarily been with RSpec, and while I knew some general aspects of CCS, I didn’t have as much experience with it as I did with RSpec. Always wanting to learn something new, I embraced the challenge of teaching myself about CCS through many blogposts, Stack Overflow, and YouTube/CodeSchool videos. What follows is my implementation of a project applying the knowledge that I learned.
First Cucumber
I began by installing the Cucumber gem on my computer. After familiarizing myself with Cucumber’s syntax, I wrote down the steps and behavior I needed to accomplish my goal.
Then suddenly — magic happened! My code was transformed into the format below.
Then Capybara
Though cool, I realized this wasn’t enough and that I needed to install Capybara. Capybara would provide me with domain specific language that would provide built-in methods and syntax for clicking links, pages, and copying forms.
Generally if this was a Rails app I would put Capybara into my gem folder. However since I was merely writing tests here, this wouldn’t work. So I made a support folder. Inside the folder I entered the requirement for Capybara so I would have access to all of its methods throughout my code.
And finally, Selenium
Then I installed Selenium. Selenium is the final piece of this triumvirate and it ties Cucumber and Capybara together. It serves as the webdriver that simulates what our code will look like in the browser. We can enter a series of steps that details the methods and actions we’d like our code to do, and Selenium will show what it looks like. Simply put, Selenium is awesome.
Now, through a series of 5 steps — let’s look at an example of how to implement Cucumber, Capybara and Selenium in an app
Step 1 — “Shop Men’s” > “Boots”
Having our Cucumber Regex methods in place, the first thing to do would be to write the code to select “Boots.” This was straightforward and I used Capybara’s click_link method to select the text. It turns out I needed an action to select “Shop Men’s” before I selected “Boots.” The reason both are needed is because if we look at the URL path, we see that first there’s a Mens path followed by the Boots path.
Here’s the code to select both “Shop Men’s” and “Boots.”
Step 2 — Selecting Under Armour
Now that we’re in “Boots” the next stage is to select “Under Armour.” Building off of what we know from Step 1, we know that we need to be specific and select “Under Armour.”
While Under Armour can be found under “Brand,” it’s id is strong enough to be selected on it’s own- by inspecting element we can see it and use it as we like.
The code to select “Under Armour” is:
Step 3 — Select the blue Under Armour shoes
This step is different from the previous two. Now that we’ve narrowed down the category we’re looking for, we have to select the actual blue Under Armour shoes.
How could we do this? Simple: let’s inspect the element and extract the unique id.
After inspecting the element, we can use Capybara’s find_method to isolate the shoe’s unique id, and tack on find’s accompanying “click” method to select that shoe. But which element is unique to this shoe? I initially implemented this method:
… but after running Cucumber, this didn’t return our desired result. Rather this is what was returned: (note: NOT the blue Under Armour shoes)
I figured the reason for this was there must be more than one “.r0–1–1” element on the page. I looked at the div again, decided to make my way backwards through it, and instead put in “style-3266091.” I ran my code and…
Viola! Our blue shoes were selected!
Step 4 — Adding to Cart
Now that I had the shoes I wanted, I had to add them to a cart. I inspected the element and noticed that there was a cart button
Capybara gave me a click_button method and I selected “addToCart” as the button id.
I was a little confused as to what to do next, but found Capybara’s querying methods to be very helpful. I queried the page as to whether it had content, and if so it should add “Please select a size.” If the page didn’t have content, there would need to be a link that said “Don’t see your size?”
Running the code in cucumber brought us this:
Here’s the code:
Step 5 — Filling in the popup window & Notify
This step was a little complicated, as I had to figure out how to not only have a pop up window show up — but also how to populate it with the correct data. Ultimately, this amazingly helpful Stack Overflow answer helped me figure it out.
Running the above code, we see that we’re taken all the way to the “Notify Me” page.
We see that all the info is now populated into the popup window. All that’s left to do now is select the “Notify Me!” button and our mission is complete! We can do this with some easy code:
And now we’ll now get a notification that our message was sent!
… and everything is green like a cucumber!
We’re all done… and I actually received an email from Zappos! :)
Takeaways
Cucumber + Capybara + Selenium = great friends
The main thing I learned from this project was the incredible way of how Cucumber, Capybara, and Selenium all work in tandem. Cucumber serves as the low level framework that holds together the different portions of the app, Capybara adds the methods to it, and Selenium mimics what the actions will look like in a browser.
Opting for a single workflow
Rather than separating my code into different chunks and individual features, I decided to put it into one workflow. All of our steps are part of one fluid process (i.e. notifying me when the shoe is available), and since all of the earlier steps are a prerequisite to the later ones, there seems to be one main scenario.
If we wanted to test more than one item on Zappos.com, we could abstract the code more generically with more dynamic parts- our particular case was extremely specific so it didn’t feel it needed this.
The entire code can be found on GitHub, and hope you enjoyed this walkthrough!
