如何解决Rails Minitest / Capybara - 为 JS 界面元素添加系统集成测试
我有一个使用这个 Ion Slider 的 Rails 应用:
https://github.com/IonDen/ion.rangeSlider
我可以测试由此生成的 JS 调用,但我想我会添加一个系统集成测试来确认用户何时滑动滑块。
迄今为止,我一直坚持使用基本的控制器测试,并且对 Capybara 和系统集成测试非常陌生。我想我可以做到这一点,但老实说,当涉及到这样的 JS 界面元素时,我不知道从哪里开始。
寻找可以执行此操作的测试示例或指向我在搜索中必须遗漏的文档的指针。
解决方法
目前 Capybara 没有独立于驱动程序的方法来将元素拖动特定量,但有独立于驱动程序的方法将一个元素拖到另一个元素上 (drag_to
)。如果这适用于您的用例,那么它就像
slider.drag_to(target)
如果您只需要拖动一定数量的像素,那么您将需要使用驱动程序相关代码(通常是一个坏主意,但这里并不是真正的任何其他选项)。如果使用 Selenium 驱动程序,它将类似于
action_builder = page.driver.browser.action
action.drag_and_drop_by(slider.native,100,0)
应该将滑块元素向右拖动 100 像素
以下是使用 Chrome 在离子范围滑块演示页面上演示此行为的示例 ruby 脚本
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。