Setting up cucumber in rails project

Setting up cucumber in rails project is pretty much simple.

Lets do this:

From your unix environment, terminal to run one after another:

rails new my_projects
//rails g scaffold post title:string text:text
// rails g model comment post_id:integer text:text 
// rake db:migrate
// rails s

Now, open your Gemfile and add that block of code

group :test, :development do
  gem 'cucumber-rails', :require => false
  gem 'database_cleaner'
end

Once you’ve added. Run simply “bundle install”

rails generate cucumber:install

That’s it :). Now, you can have similar structure. You can start your project scratch.

Screen Shot 2015-12-06 at 8.41.56 PM

How to Click Text/Numbers Using Capybara and Cucumber

Problems:

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…

Solutions:

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"); }
end

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
end

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

Simple Cucumber Installation in Windows 7

Problems:

  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:

Firstly:

  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.

Secondly: 

  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)

Thirdly:

Now we need to install few gem libary,

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

Forth:

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

Note:

  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-1.6.6.2-x86-mingw32.gem (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

Pre-requsities:

  1. With the install Homebrew – http://brew.sh/ – 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'

Solution:

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 = "https://trello.com"
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,
 }
 Capybara::Selenium::Driver.new(app, :browser => :chrome)
 end
elsif ENV['firefox']
 Capybara.default_driver = :firefox
 Capybara.register_driver :firefox do |app|
 options = {
 :js_errors => true,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }
 Capybara::Selenium::Driver.new(app, :browser => :firefox)
 end
elsif ENV['safari']
 Capybara.default_driver = :safari
 Capybara.register_driver :safari do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }
 Capybara::Selenium::Driver.new(app, :browser => :safari)
 end
elsif ENV['opera']
 Capybara.default_driver = :opera
 Capybara.register_driver :opera do |app|
 options = {
 :js_errors => false,
 :timeout => 360,
 :debug => false,
 :inspector => false,
 }
 Capybara::Selenium::Driver.new(app, :browser => :opera)
 end
elsif
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,
 }
 Capybara::Poltergeist::Driver.new(app, options)
 end
end


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.

Solution:

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="http://google.com/users/sign_in?lan=en">http://moteel:mxxxxx3@myproject.com/users/sign_in?lan=en</a>"
end

#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 WordPress.org 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)

Step_definitions:

&lt;/div&gt;
&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;
 Media-lib.feature
&lt;/div&gt;
&lt;div class=&quot;line&quot;&gt;When I upload a file&lt;/div&gt;
&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;/div&gt;
&lt;p&gt;
&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;
&lt;/p&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;)
end

Upload.features

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;

Pre-requirement:

  • WordPress.org (Configured and execute on local server)
  • Cucumber
  • Capybara