Tutorial selenium cucumber ruby web login & checkout

In this tutorial, i want share about web automation test suitable for beginner. Why choose selenium cucumber ruby? Because selenium is popular open-source suite of tools and libraries that is used for automation. Cucumber is an open-source software testing tool written in Ruby, writen language gherkin for describe scenario test, now supports various other programming languages like Java, JavaScript, Python and . Net. Ruby is open source language with short syntax. And the last why choose web? Because easy to view in screen and happy to see laptop automatic run based on script. For tutorial i am using windows, chrome & chromedriver.

A. Installation & Folder Structure

1. Ruby

• On Linux/UNIX, you can use the package management system of your distribution or third-party tools (rbenv and RVM).
• On macOS machines, you can use third-party tools (rbenv and RVM).
• On Windows machines, you can use RubyInstaller.

2. Chromedriver : https://chromedriver.chromium.org/

3. Instalasi Gem

• Start installation via terminal/command prompt, open terminal/command prompt.
• Install cucumber, type gem install cucumber, Enter.
• Install gherkin, type gem install gherkin, Enter.
• Install selenium-webdriver, type gem install selenium-webdriver, Enter.
• Install report builder, type gem install report_builder, Enter.
• Install rspec, type gem install rspec, Enter.
• To verify installation, type gem list, Enter.
• Installation finish, but don’t close terminal / command prompt

4. Folder structure

• Stay in terminal / command prompt
• To create new folder, type mkdir ruby-login-checkout, enter
• Go to directory folder, type cd ruby-login-checkout, enter
• To create structure cucumber, type cucumber — init, enter
• Add folder report, type mkdir report, enter
• Add folder screenshot, type mkdir screenshoot, enter
• Add folder pages in folder step_definitions. type cd step_definitions, enter. Type mkdir pages, enter

B. Start code automation web test

Let’s open your favorite text editor. I’m using VS Code. And than follow the step.

1. Create .feature file in folder features: write scenario test with gherkin language (given, when, and, then). You be able to write 1 scenario positive test or negative test. Other that write scenario outline used to run the same Scenario multiple times, with different combinations of values, we be able call it many scenario consider positive test and negative test.

• Click right in folder features, add file login.feature
• Click right in folder features, add file checkout.feature

2. Create _step.rb file in folder step_definitions: write detail step based on .feature file to _step.rb. Write method from _page.rb to _step.rb

3. Create _page.rb file in folder pages: write element web, 1 page 1 file & method in the page

4. Create env.rb file in folder support. Type code below & save

require 'selenium-webdriver'
require 'rspec/expectations'
require 'test/unit/assertions'
require 'report_builder'

5. Create hook.rb in folder support. Type code below & save.

Before do
$browser = Selenium::WebDriver.for:chrome
end

After do
$browser.quit
end

6. Create screen_action.rb file in folder support. Type code below & save

def screenshot(name)
$browser.save_screenshot("screenshot/#{name}.png")
end

def scroll_up()
$browser.execute_script('window.scrollTo(0, 0)')
end

def scroll_down()
$browser.execute_script('window.scrollTo(0, document.body.scrollHeight)')
end

def maximize_browser()
$browser.manage.window.maximize
end

def minimize_browser()
$browser.manage.window.minimize
end

def open_url(url)
$browser.navigate.to url
end

7. Create report_builder.rb file in folder support. Type code below & save

require 'report_builder'

time = Time.now.getutc
ReportBuilder.configure do |config|
 config.report_path = 'report/report'
 config.report_types = [:html]
 config.report_tabs = %w[Overview Features Scenarios Errors]
 config.report_title = 'Checkout'
 config.compress_images = false
 config.additional_info = { 'Project name' => 'Login & Checkout', 'Platform' => 'Website', 'Report generated' => time }
end
ReportBuilder.build_report

So we can move to the scenario. I divide into 4 scenario with combination one scenario & scenario outline

I. Login (scenario outline 1 with positive test & negative test)

• Type code below in login.feature & save

@Login
Feature: Login

Scenario Outline:  User try to login to saucedemo
Given User open saucedemo
When User try to login with "<login_data>"
Then verify User "<status>" to login
Examples:
| login_data       | status  |
| valid            | success |
| invalid_username | failed  |
| invalid_password | failed  |
| empty_username   | failed  |
| empty_password   | failed  |

• Create login_step.rb. Type code below & save

require_relative '../support/screen_action.rb'

Given 'User open saucedemo' do
    maximize_browser()
    open_url("https://www.saucedemo.com/")
    sleep(2)
end

When 'User try to login with {string}' do |login_data|
    case login_data
    when 'valid'
      input_username_field
      input_password_field
      click_login_btn
    when 'invalid_username'
      invalid_username_field
      input_password_field
      click_login_btn
    when 'invalid_password'
        input_username_field
        invalid_password_field
        click_login_btn
    when 'empty_username'
        empty_username_field
        input_password_field
        click_login_btn
    when 'empty_password'
        input_username_field
        empty_password_field
        click_login_btn
    end
end

Then 'verify User {string} to login' do |status|
    case status
    when 'success'
      success_login
      sleep(2)
    when 'error'
      fail_login
      sleep(2)
    end
end

• Crete login_page.rb. Type code below & save

$username_field = 'user-name'
$password_field = 'password'
$login_btn = 'login-button'
$fail_login_text = 'error-message-container error'

def input_username_field
    $browser.find_element(:name,$username_field).send_keys('standard_user')
    screenshot("input_username_field")
end

def invalid_username_field
    $browser.find_element(:name,$username_field).send_keys('standard_user1')
    screenshot("invalid_username_field")
end

def empty_username_field
    $browser.find_element(:name,$username_field).send_keys('')
    screenshot("empty_username_field")
end

def input_password_field
    $browser.find_element(:id,$password_field).send_keys('secret_sauce')
    screenshot("input_password_field")
end

def invalid_password_field
    $browser.find_element(:id,$password_field).send_keys('secret_sauce1')
    screenshot("invalid_password_field")
end

def empty_password_field
    $browser.find_element(:id,$password_field).send_keys('')
    screenshot("empty_password_field")
end

def click_login_btn()
    screenshot("login")
    $browser.find_element(:id,$login_btn).click
    screenshot("success_login")
end

def fail_login()
    $browser.find_element(:class,$fail_login_text)
    screenshot("fail_login")
end

• Run automation. ctrl + shift + ` to open terminal in vs code. Type code below & enter

cucumber features/login.feature:4 

it mean run login.feature line 4. and you will see in terminal like this

II. login (scenario 1 with positive)

• Type code below in login.feature & save

@Login
Feature: Login

Scenario:  User should be able to login to saucedemo
Given User open saucedemo
When User try to login with "valid"
Then verify User "success" to login

For the login_step.rb & login_page.rb still the same with scenario outline 1.Iif there are no scenario outline before, type below in login.feature & adjust in login_step.rb

@Login
Feature: Login

Scenario:  User should be able to login to saucedemo
Given User open saucedemo
When User try to login with valid
Then verify User success to login

• Run automation. ctrl + shift + ` to open terminal in vs code. Type code below & enter

cucumber features/login.feature:16

It mean run login.feature line 16. And you will see in terminal like this

III. Checkout (scenario outline 2 with positive test & negative test)

• Type code below in checkout.feature & save

@Checkout
Feature: Checkout

Scenario Outline:  User should to try to checkout in saucedemo
Given User open saucedemo
When User try to login with "valid"
Then verify User "success" to login
When User sort "<type_sort>" item 
And User add items to cart
And User check cart
And User continue shop
And User remove items from cart
And User checkout
And User try to input information with "<info_data>"
Then verify User "<status>" to input information
Examples:
| type_sort         | info_data                                | status  |
| name_a_to_z       | input_checkout_step_one_field            | success |
| name_z_to_a       | empty_checkout_step_one_field            | failed  |
| price_low_to_high | empty_firstname_checkout_step_one_field  | failed  |
| price_high_to_low | empty_lastname_checkout_step_one_field   | failed  |
| name_a_to_z       | empty_postalcode_checkout_step_one_field | failed  |

• Create checkout_step.rb. Type code below & save

When 'User sort {string} item' do |type_sort|
    click_product_sort_btn 
    case type_sort
    when 'name_a_to_z'
        click_sort_asc_name_btn
    when 'name_z_to_a'
        click_sort_desc_name_btn
    when 'price_low_to_high'
        click_sort_asc_price_btn
    when 'price_high_to_low'
        click_sort_desc_price_btn
    end
end

And 'User add items to cart' do 
    click_add_to_cart_backpack_btn
    click_add_to_cart_tshirt_btn
end

And 'User check cart' do
    click_shopping_cart_btn
end

And 'User continue shop' do
    click_continue_shopping_btn
end

And 'User remove items from cart' do
    click_remove_backpack_btn
end

And 'User checkout' do
    click_shopping_cart_btn
    click_checkout_btn
end

And 'User try to input information with {string}' do |info_data|
    direct_to_checkout_step_one
    case info_data
    when 'input_checkout_step_one_field'
        input_checkout_step_one_field
    when 'empty_checkout_step_one_field'
        empty_checkout_step_one_field
    when 'empty_firstname_checkout_step_one_field'
        empty_firstname_checkout_step_one_field
    when 'empty_lastname_checkout_step_one_field'
        empty_lastname_checkout_step_one_field
    when 'empty_postalcode_checkout_step_one_field'
        empty_postalcode_checkout_step_one_field
    end
    click_continue_btn
end

Then 'verify User {string} to input information' do |status|
   case status
   when 'success'
    direct_to_checkout_step_two
    click_finish_btn
    click_back_to_home_btn
   when 'error'
    error_checkout_step_one
    $browser.quit
   end
end

• Crete inventory_page.rb. Type code below & save

$title = '//span[contains(text(),"Products")]'
$add_to_cart_backpack_btn = 'add-to-cart-sauce-labs-backpack'
$add_to_cart_tshirt_btn = 'add-to-cart-test.allthethings()-t-shirt-(red)'
$shopping_cart_btn = 'shopping_cart_container'
$product_sort_btn = 'select_container'
$sort_asc_name_btn = '//option[contains(text(),"Name (A to Z)")]'
$sort_desc_name_btn = '//option[contains(text(),"Name (Z to A)")]'
$sort_asc_price_btn = '//option[contains(text(),"Price (low to high)")]'
$sort_desc_price_btn = '//option[contains(text(),"Price (high to low)")]'

def success_login()
    $browser.find_element(:xpath,$title)
    expect($browser.find_element(:xpath,$title).text).to eql('Products')
    screenshot("success_login")
end

def click_product_sort_btn
    $browser.find_element(:class,$product_sort_btn).click
end

def click_sort_asc_name_btn
    expect($browser.find_element(:xpath,$sort_asc_name_btn).text).to eql('Name (A to Z)')
    $browser.find_element(:xpath,$sort_asc_name_btn).click
    screenshot("sort_a_to_z")
end

def click_sort_desc_name_btn
    expect($browser.find_element(:xpath,$sort_desc_name_btn).text).to eql('Name (Z to A)')
    $browser.find_element(:xpath,$sort_desc_name_btn).click
    screenshot("sort_z_to_a")
end

def click_sort_asc_price_btn
    expect($browser.find_element(:xpath,$sort_asc_price_btn).text).to eql('Price (low to high)')
    $browser.find_element(:xpath,$sort_asc_price_btn).click
    screenshot("sort_low_to_high")
end

def click_sort_desc_price_btn
    expect($browser.find_element(:xpath,$sort_desc_price_btn).text).to eql('Price (high to low)')
    $browser.find_element(:xpath,$sort_desc_price_btn).click
    screenshot("sort_high_to_low")
end

def click_add_to_cart_backpack_btn
    expect($browser.find_element(:id,$add_to_cart_backpack_btn).text).to eql('Add to cart')
    $browser.find_element(:id,$add_to_cart_backpack_btn).click
end

def click_add_to_cart_tshirt_btn
    expect($browser.find_element(:id,$add_to_cart_tshirt_btn).text).to eql('Add to cart')
    $browser.find_element(:id,$add_to_cart_tshirt_btn).click
    screenshot("product")
end

def click_shopping_cart_btn
    $browser.find_element(:id,$shopping_cart_btn).click
end

• Crete cart_page.rb. Type code below & save

$title = '//span[contains(text(),"Your Cart")]'
$continue_shopping_btn = 'continue-shopping'
$remove_backpack_btn = 'remove-sauce-labs-backpack'
$checkout_btn = 'checkout'

def direct_to_cart
    $browser.find_element(:xpath,$title)
    expect($browser.find_element(:xpath,$title).text).to eql('Your Cart')
end

def click_continue_shopping_btn
    expect($browser.find_element(:id,$continue_shopping_btn).text).to eql('Continue Shopping')
    $browser.find_element(:id,$continue_shopping_btn).click
end

def click_remove_backpack_btn
    expect($browser.find_element(:id,$remove_backpack_btn).text).to eql('Remove')
    $browser.find_element(:id,$remove_backpack_btn).click
end

def click_checkout_btn
    screenshot('cart_page')
    expect($browser.find_element(:id,$checkout_btn).text).to eql('Checkout')
    $browser.find_element(:id,$checkout_btn).click
end

• Crete checkout_step_one_page.rb. Type code below & save

$title_checkout_step_one = '//span[contains(text(),"Checkout: Your Information")]'
$firstname_field = 'first-name'
$lastname_field = 'last-name'
$postalcode_field = 'postal-code'
$continue_btn = 'continue'
$fail_checkout_step_one_text = 'error-message-container error'

def direct_to_checkout_step_one
    $browser.find_element(:xpath,$title_checkout_step_one)
    expect($browser.find_element(:xpath,$title_checkout_step_one).text).to eql('Checkout: Your Information')
end

def input_checkout_step_one_field
    maximize_browser()
    $browser.find_element(:id,$firstname_field).send_keys('bela')
    $browser.find_element(:id,$lastname_field).send_keys('putri')
    $browser.find_element(:id,$postalcode_field).send_keys('1234')
    screenshot("checkout_valid_step_one")
end

def click_continue_btn
    sleep 3
    $browser.execute_script "window.scrollBy(200,400)"
    continue = $browser.find_element(:id,$continue_btn)
    $browser.execute_script 'arguments[0].scrollIntoView();',continue
    sleep 3
    screenshot("checkout_scroll_step_one")
    $browser.find_element(:id,$continue_btn).click
end

def empty_checkout_step_one_field
    $browser.find_element(:id,$firstname_field).send_keys('')
    $browser.find_element(:id,$lastname_field).send_keys('')
    $browser.find_element(:id,$postalcode_field).send_keys('')
    screenshot("checkout_empty_step_one")
end

def empty_firstname_checkout_step_one_field
    $browser.find_element(:id,$firstname_field).send_keys('')
    $browser.find_element(:id,$lastname_field).send_keys('putri')
    $browser.find_element(:id,$postalcode_field).send_keys('1234')
    screenshot("checkout_empty_first_name_step_one")
end

def empty_lastname_checkout_step_one_field
    $browser.find_element(:id,$firstname_field).send_keys('bela')
    $browser.find_element(:id,$lastname_field).send_keys('')
    $browser.find_element(:id,$postalcode_field).send_keys('1234')
    screenshot("checkout_empty_last_name_step_one")
end

def empty_postalcode_checkout_step_one_field
    $browser.find_element(:id,$firstname_field).send_keys('bela')
    $browser.find_element(:id,$lastname_field).send_keys('putri')
    $browser.find_element(:id,$postalcode_field).send_keys('')
    screenshot("checkout_empty_postal_code_step_one")
end

def error_checkout_step_one
    $browser.find_element(:class,$fail_checkout_step_one_text)
    screenshot("checkout_error_step_one")
end

• Crete checkout_step_two_page.rb. Type code below & save

$title_checkout_step_two = '//span[contains(text(),"Checkout: Overview")]'
$finish_btn = '//button[@id="finish"]'

def direct_to_checkout_step_two
    expect($browser.find_element(:xpath,$title_checkout_step_two).text).to eql('Checkout: Overview')
    $browser.find_element(:xpath,$title_checkout_step_two)
end

def click_finish_btn
    expect($browser.find_element(:xpath,$finish_btn).text).to eql('Finish')
    screenshot("checkout_step_two")
    $browser.find_element(:xpath,$finish_btn).click
end

• Crete checkout_complete_page.rb. Type code below & save

$title = '//span[contains(text(),"Checkout: Complete!")]'
$back_to_home_btn = 'back-to-products'

def direct_to_checkout_complete
    $browser.find_element(:xpath,$title)
    expect($browser.find_element(:xpath,$title).text).to eql('Checkout: Complete!')
end

def click_back_to_home_btn
    expect($browser.find_element(:id,$back_to_home_btn).text).to eql('Back Home')
    screenshot("checkout_complete")
    $browser.find_element(:id,$back_to_home_btn).click
end

• Run automation. ctrl + shift + ` to open terminal in vs code. type code below & enter

cucumber features/checkout.feature:4

It mean run checkout.feature line 4. And you will see in terminal like this

IV. Checkout (scenario 2 with positive test)

• Type code below in checkout.feature & save

@Checkout
Feature: Checkout

Scenario:  User should be able to checkout in saucedemo
Given User open saucedemo
When User try to login with "valid"
Then verify User "success" to login
When User sort "price_low_to_high" item 
And User add items to cart
And User check cart
And User continue shop
And User remove items from cart
And User checkout
And User try to input information with "input_checkout_step_one_field"
Then verify User "success" to input information

For the checkout_step.rb & all checkout page still the same with scenario outline 2. If there are no scenario outline before, type below in checkout.feature & adjust in checkout_step.rb

@Checkout
Feature: Checkout

Scenario:  User should be able to checkout in saucedemo
Given User open saucedemo
When User try to login with valid
Then verify User success to login
When User sort price_low_to_high item 
And User add items to cart
And User check cart
And User continue shop
And User remove items from cart
And User checkout
And User try to input information with input_checkout_step_one_field
Then verify User success to input information

• Run automation. ctrl + shift + ` to open terminal in vs code. type code below & enter

cucumber features/checkout.feature:24

It mean run checkout.feature line 24. And you will see in terminal like this

For all the screenshot, you can find in folder screenshoot

For the report, you can type code below & enter

cucumber -f pretty -f html -o report.html 

You will see automation run all scenario. For look report.html, right click in report.html, click copy path.

And than paste to browser. Here we go report.html for this tutorial

Here full source code of this tutorial https://github.com/fadhilara/selenium-ruby-login-checkout

That’s all from tutorial this section. Congratulations, you have learned about Selenium Ruby & reached the end of this tutorial. Let me know & discuss if you get error & have feedback from this.

For the next, we’ll learn about other programming language to create scenario of CRUD website with dynamis input value. Stay tune! Thankyou.

Refferences :

• https://pojokqa.wordpress.com/2021/02/05/web-automation-testing-menggunakan-ruby-selenium-dan-cucumber-dengan-design-pattern-pom/
• https://hy1984427.github.io/BDD-with-PageObject/HowToAdoptPageObjectPatternInBDD/GeneratePrettyReport.html
• https://roselynemakena.medium.com/selenium-ruby-automation-part-i-1801c312d22c