How to Click Text/Numbers Using Capybara and Cucumber


We have a jquery date picker calendar. Now, we have to open the calendar and select a date. But selecting a link and selecting a date (number) is different.

Screen Shot 2015-11-22 at 2.17.17 PM

Issues to be discussed:

Cucumber contains a web step that allows you to easily click a link. But what if what you want to click is not a link, but some plain text like:

<h3 class='clickable-text'>Click me</h3>

Cucumber doesn’t have a web step for such case. so I needed an alternative approach. Capybara code that would click the text above.

find('.clickable-text', :text => 'Click me').click

Then I’ve got a cool idea. Let’s load them up…


Save the file at auto_posting.rb

And I want to make schedule posting with custom time and date

Given /^I want to make schedule posting with custom time and date$/ do
 find(:xpath, ".//*[@id='SocialHistory']").click
 find(:xpath, ".//*[@id='SocialDate']").click
 page.execute_script %Q{ $("input[id^='splash_']:contains('28')").trigger("click"); }

Save the file at auto_posting.feature


I needed to set custom date and so I refectored thus  I can bypass my date 29.

And I select 29 from the calender.

Given /^I select "([^"]*)" from the calender$/ do |date|
 find('.calendarDate', :text => date).click

Thanks a lot to automicobject and teamgaslight and gazler for the comments.

Simple Cucumber Installation in Windows 7


  1. Installing cucumber in windows/pc is hard – mostly fails with so many errors :(
  2. It works sometimes and sometimes not :(
  3. Community and support is poor :(
  4. Not easily explained anywhere :(

So here YOU go:


  1. Visit Ruby Installer page and under left side Download Ruby 2.2.3(x32) or Ruby 2.2.3(x64). It depends on your PC wether it’s 32bit or 64 bit – download as accordingly.
  2. Install the downloaded rubyinstaller-2.2.3.exe file to c:/ drive (default location). And keep selecting (all), when options come to screen and move on next and complete the installation
  3. Now search for “Start command prompt with Ruby” and run this console.


  1. Once again, Visit Ruby Installer page and under the “DEVELOPMENT KIT“, download DevKit-tdm-32…exe or DevKit-tdm-(x64)…exe. It depends on your PC wether it’s 32 bit or 64 bit – download as accordingly.
  2. Now unzip the DevKit-tdm-(x64)…exe file. And you will have a file named dk.rb.
  3. From “Start command prompt with Ruby”, locate the dk.rb or drag-drop this file to the console. 
  4. Once it will one on console, it will be like this
    c:\Users\users\ruby developmentkit\dk.rb init (hit enter)
  5. Again drag-drop the file to console, it will be like this
    c:\Users\users\ruby developmentkit\dk.rb  install (hit enter)


Now we need to install few gem libary,

  1. gem install bundler #required 
  2. gem install cucumber


  1. Download your cucumber projects and give this command “bundle install”.


  1. Ruby Installer and Development Kit preferred to install x64 or 32bit – depends on your PC. They have two version always there.
  2. To get color PASS/FAIL in windows console- Install Ansicon. Unzip the file, you will find x64/x32 – choose right one and ansicon (double click) or ansicon -i from console to install. It doesn’t work in 64bit at all. 
  3. Nokogiri is an HTML, XML, SAX, and Reader parser. It always messing up with windows setup. So, you need to setup manually.
    1. Download nokogiri desired version (mentioned in console or project requirement)
    2. Run this, gem install –local nokogiri- (just locate your file to console and hit enter)

Cucumber/Capybara: Run tests on Firefox, Chrome, Safari, Opera, Poltergeist/PhantomJS

The Problem:

Those are working with cucumber test automation – there is default browser given as Firefox. Firefox renders and performs best. But to give coverge on other platform and see how features functionality going on other browser – we must go through with other browsers too.

We need to cover up:

  1. Internet Exploer 10, 11
  2. Firefox – Mac/PC
  3. Chrome – Mac/PC
  4. Safari – PC


  1. With the install Homebrew – – to handle downloads for Chromedriver, Operadriver, Safaridriver, Poltergeist/PhantomJS in your machine
  2. Add these following lines and run “bundle”

gem 'capybara'
gem 'poltergeist'
gem 'selenium-webdriver'
gem 'cucumber'


So, as we have cucumber_helper.rb file, replace with this code

require 'capybara/cucumber'
require 'rspec/expectations'

# Capybara.default_driver = :selenium  #disable default firefox

Capybara.app_host = ""
Capybara.run_server = true
Capybara.default_wait_time = 5

We need to disable it while we run the script.

As well, we have support/env.rb file, replace with these codes,

require 'capybara'
require 'capybara/cucumber'
require 'capybara/poltergeist'
require 'selenium-webdriver'

#pass environment variables to control which browser is used for testing. Default is HEADLESS/POLTERGEIST
#usage: firefox=true bundle exec cucumber features/test.feature

if ENV['chrome']
 Capybara.default_driver = :chrome
 Capybara.register_driver :chrome do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }, :browser => :chrome)
elsif ENV['firefox']
 Capybara.default_driver = :firefox
 Capybara.register_driver :firefox do |app|
 options = {
 :js_errors => true,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }, :browser => :firefox)
elsif ENV['safari']
 Capybara.default_driver = :safari
 Capybara.register_driver :safari do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }, :browser => :safari)
elsif ENV['opera']
 Capybara.default_driver = :opera
 Capybara.register_driver :opera do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }, :browser => :opera)
Capybara.default_driver = :poltergeist
 Capybara.register_driver :poltergeist do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :phantomjs_options => ['--load-images=no', '--disk-cache=false'],
 :inspector => false,
 }, options)

Now, lets run the test on different browser:

Access your terminal and run any of it. And replace your desired brower and make sure you’ve pre-setup of web-drivers.

chrome=true bundle exec cucumber features/test.feature

Note: It might be working on Internet Explorer too. I’m still working on. I will let you know. 

Cucumber to generate HTML report

The Problem:

For test automation we use cucumber testing tools and besides selenium web driver to run the functional test process as we follow BDD (Behaviour Driven Development). Now, at the end we have very some results in terminal: As follows:

  • Passed scenario
  • Failed scenario
  • Number of scenario ran
  • Number of steps ran
  • Total run time of scripts.

But, you know client or the business people want more then that.


Cucumber has some build it features. You can simply run this

cucumber features --format html --out reports -

it will run all the features and execute a detailed reports

You can have two types of reports:

If everything passed: we have green and you can expand to see details

Screen Shot 2015-10-25 at 9.13.03 PM

If we got issues: we have red report and details shown where the problem is.

Screen Shot 2015-10-25 at 9.12.03 PM

Testing Browser Pop-up: Basic Auth with Capybara

The Problem:

In our company most of the server is port blocked, thus only inside developer, tester, project manager and product owner and client (spefici) can access the system. And besides we block normal or anonmous users registration and blocks google crawling.

Screen Shot 2015-10-25 at 8.56.43 PM

A Solution:

As we run test automation and we were preparing simple setup and configuration. And we could have hold javascript and give the input with valid information to pass on. So, we needed faster solution and we don’t want to see the popup – just pass us and get into project login system and execute rest of the services.

#pop_up_auth.rb under steps_definitions

When /^Given Enable port access$/ do
visit "<a href=""></a>"

#In feature block, I mentioned simply,

Given Enable port access

Cucumber: Upload file to system

I’m working on a project to practice test automation. So, I’ve choose framework and integrated cucumber + selenium web driver.

New Media Feature:

Feature Screenshot:

Screen Shot 2015-01-26 at 10.27.52 PM

Html Source Code:

&lt;&lt;span class=&quot;pl-ent&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;async-upload-wrap&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC2&quot; class=&quot;line&quot;&gt;&lt;&lt;span class=&quot;pl-ent&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;for&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;async-upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;screen-reader-text&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&gt;Upload&lt;/&lt;span class=&quot;pl-ent&quot;&gt;label&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC3&quot; class=&quot;line&quot;&gt;&lt;&lt;span class=&quot;pl-ent&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;file&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;async-upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;async-upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC4&quot; class=&quot;line&quot;&gt;&lt;&lt;span class=&quot;pl-ent&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;submit&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;value&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;Upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;button&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;html-upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;html-upload&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC5&quot; class=&quot;line&quot;&gt;&lt;&lt;span class=&quot;pl-ent&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;onclick&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;try{top.tb_remove();}catch(e){}; return false;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;pl-e&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;pl-s1&quot;&gt;&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;pl-pds&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&gt;Cancel&lt;/&lt;span class=&quot;pl-ent&quot;&gt;a&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC6&quot; class=&quot;line&quot;&gt;&lt;/&lt;span class=&quot;pl-ent&quot;&gt;p&lt;/span&gt;&gt;&lt;/div&gt;
&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;file-upload-html-LC7&quot; class=&quot;line&quot;&gt;

Now, in step definitions I can write this – to directly show the local file (images, pdf, locations)


&lt;div class=&quot;line&quot;&gt;When &quot;I upload a file&quot; do&lt;/div&gt;
&lt;div id=&quot;file-upload_steps-LC2&quot; class=&quot;line&quot;&gt;attach_file('file','features/upload_files/theme-unit-test-data.xml')&lt;/div&gt;
&lt;div id=&quot;file-upload_steps-LC3&quot; class=&quot;line&quot;&gt;end&lt;/div&gt;
&lt;div class=&quot;line&quot;&gt;
&lt;div class=&quot;line&quot;&gt;When I upload a file&lt;/div&gt;
&lt;div class=&quot;line&quot;&gt;

It works as we have type=”file” and finds and system uploads file to system

Now if we go that way, sometimes it will not work. If we look that source code

Importing XML File:

Screen Shot 2015-01-26 at 10.35.32 PM

Source Code Html:

&lt;label for=&quot;upload&quot;&gt;Choose a file from your computer:&lt;/label&gt; (Maximum size: 32 MB)
&lt;input type=&quot;file&quot; size=&quot;25&quot; name=&quot;import&quot; id=&quot;upload&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;save&quot; name=&quot;action&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;33554432&quot; name=&quot;max_file_size&quot;&gt;

Now, in that case, I found it go confused and I needed generic solution to test.

Step definitions:

When /^I upload a &quot;(.+)&quot; file with &quot;(.+)&quot; and located at &quot;(.+)&quot;$/ do |file_name, name_selector, path|
attach_file(name_selector, &quot;#{path}/#{file_name}&quot;)


And I upload a &quot;theme-unit-test-data.xml&quot; file with &quot;file&quot; and located at &quot;/Users/sakib/Documents/projects/wp-automation/features/upload_files&quot;


  • (Configured and execute on local server)
  • Cucumber
  • Capybara

Close range idea of Product Price – From Google Engine

As you know, people were looking for product price in several prices. Now google has algorithm which gets the product price (possibly close to) range and if you type “Sharp AQUOS Crystal price”, it will tell you the price of the product.

Screen Shot 2014-09-01 at 10.35.23 PM

With that feature, I’m sure they will kill some mid-level web services traffic so fast. Just like, now we are used to with 2+2 = 4 in google calculation. Similar way, we will not visit to gsmarena or verge to find the prices (maybe we will go for review to get product inside out) but I would prefer to get directly from google engine – even without browsing those official pages :)