Rails Minitest / Capybara - adding system integration test for a JS interface element - capybara

Question

I have a Rails app that uses this Ion Slider:
https://github.com/IonDen/ion.rangeSlider
I can test the JS calls that this generates but I figured I would add a system integration test that confirms when the user slides the slider.
To date I have stuck to basic controller tests and very new to Capybara and system integration tests. I think I can do this but honestly no clue where to start when it comes to a JS interface element like this.
Looking for either an example of a test that would do this or a pointer to the docs that I must have missed in my searching.

Answer 1

Currently Capybara doesn't have a driver independent method to drag an element by a specific amount, but does have a driver independent method for dragging one element onto another (drag_to). If that will work for your use case then it would just be something like
slider.drag_to(target)
If instead you need to just drag by some number of pixels then you will need to use driver dependent code (generally a bad idea, but not really any other option here). If using the Selenium driver it would be something like
action_builder = page.driver.browser.action
action.drag_and_drop_by(slider.native, 100, 0)
which should drag the slider element 100 pixels to the right
Below is an example ruby script that demos this behavior, using Chrome, on the ion range slider demo page
require 'bundler/inline'
gemfile do
source 'https://rubygems.org'
gem 'capybara'
gem 'rexml'
gem 'selenium-webdriver'
gem 'webdrivers'
gem 'byebug'
end
require 'selenium-webdriver'
require "capybara/dsl"
require 'byebug'
%i[selenium_chrome selenium_chrome_headless].each do |driver|
puts "Using #{driver}"
sess = Capybara::Session.new(driver)
sess.visit('http://ionden.com/a/plugins/ion.rangeSlider/demo.html')
first_demo = sess.first('.demo__item')
# Capybara driver independent code
puts "Driver independent:"
sess.within(first_demo) do
slider = sess.find('.irs .irs-single')
slider_max = sess.find('.irs .irs-max')
initial_text = slider.text
puts "initial slider text is #{initial_text}"
slider.drag_to(slider_max) # drag and drop the slider onto the max marker - won't actually be the max value since it drops on the center of the marker
sess.assert_selector('.irs .irs-single') do |el|
# example to show one possible way to synchronize with browser
# will ensure the sliders text has changed
el.text != initial_text
end
puts "new slider text is #{slider.text}"
end
# Selenium driver specific code
puts "Driver specific:"
sess.within(first_demo) do
slider = sess.find('.irs .irs-single')
puts "Current slider text is #{slider.text}"
action = sess.driver.browser.action # get selenium specific action builder
action.drag_and_drop_by(slider.native, -100, 0).perform
puts "Updated slider text is #{slider.text}"
end
end