Adding UI automation test to our CI pipeline
We have a Ruby on Rails web server that renders a bunch of web pages. Since we did not have any automation around our UI, testing was very painful. Every change would involve manually testing all the flows. We had to make sure that along with our changes everything else was also working as expected.
So we decide to add some UI tests to our CI pipeline using selenium and cucumber. This is what the setup looks like
All you need is —
- Ruby image to run the test cases (this may vary depending on the language your automation tests are written in)
- Official selenium image present on docker hub as a service. We use GitLab CI so syntax might be different for you
- Install cucumber. (Gemfile contains all the required dependencies)
That’s it! we are done with the setup. Here is a sample feature along with the scenario.
Feature: Withdrawal
Scenario: Should show incorrect pin error
Given I initiate a new withdrawal
When I enter incorrect pin
Then I am shown incorrect pin errorA sample test case when you enter an incorrect pin would look like this
driver = Selenium::WebDriver.for :remote, url: "http://selenium:4444/wd/hub", desired_capabilities: :chromeThen("I am shown incorrect pin error") do
submit_button = driver.find_element(:id => "submit")
submit_button.send_keys :enter
sleep 2 #wait for api response
error_element = driver.find_element(:xpath => "/html/body/div/div/div/div/div[2]/form/div/div[2]/span") expect(error_element.attribute("innerHTML").strip).to eq("PIN yang kamu masukkan salah. Silakan coba lagi.")
end
We verify that the error attribute is shown with the expected content every time the user enters an incorrect pin.
To run the test all you need to do is run cucumber -f pretty -f html -o report.html
In case of failures, it is important for a dev to know what went wrong. So every job run creates an artifact that can be downloaded.
That’s about it! Thank you for reading, and I hope you enjoyed the article.
