LoginSignup
motoya0118
@motoya0118 (MOTONAO ADO)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Drag & Drop(clone)をRspecでテストする方法

解決したいこと

Vue2 + Rails(6.1)で実装したvuedraggabeを使用したcloneによる要素追加機能を
Rspecでテストしたいのですが、Drag&Dropの動作をテストコードで表現できません。

恐らく、seleniumの'drag_and_drop_by'を使用すれば良いことまでは当てがつきましたが、
参照がマウス位置になってしまいうまく動作しません。

上記の参照をマウスから要素にする方法をご教授頂きたいです

※テストで再現したいのは下記の動作です
clone_move.gif

発生している問題

・system_test.rbを走らせた際の動作(gif)
test_move.gif

・問題動作のキャプチャ
Screen Shot 2022-09-27 at 10.43.42.png

目的の動作としては、黒丸・及び黒矢印のドラック&ドロップを実施したいが
実際は、赤丸のようにLargeGroupがドラックはされるが、マウスポインタの位置にドロップされてしまう。

該当するソースコード

system_test.rb
require 'rails_helper'
RSpec.describe 'KJ_method', type: :system do
  describe 'KJ_method' do
    it 'large' do
    target = find('.large-group')
    page.driver.browser.action.drag_and_drop_by(target.native, 10, 100).perform
    #=> ※This part not reference '.large-group' but mouse cursor 
    sleep(3)
    end
  end
end
rails_helper.rb
require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'
require_relative '../config/environment'
abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'rspec/rails'
begin
  ActiveRecord::Migration.maintain_test_schema!
rescue ActiveRecord::PendingMigrationError => e
  puts e.to_s.strip
  exit 1
end
RSpec.configure do |config|
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
  config.use_transactional_fixtures = true
  config.infer_spec_type_from_file_location!
  config.filter_rails_from_backtrace!
end

spec_helper.rb
RSpec.configure do |config|
  config.before(:all) do
    FactoryBot.reload
  end
  config.expect_with :rspec do |expectations|
    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
  end
  config.mock_with :rspec do |mocks|
    mocks.verify_partial_doubles = true
  end
  config.shared_context_metadata_behavior = :apply_to_host_groups
end
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.4'

gem 'rails', '~> 6.1.7'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'rexml'
gem 'cocoon'
gem 'acts_as_list'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'spring'
  gem 'rspec-rails'
  gem 'spring-commands-rspec'
  gem 'factory_bot_rails'
  gem 'faker'
  gem 'launchy'
  gem 'pry-rails'
end

group :development do
  gem 'web-console', '>= 4.1.0'
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
end

group :test do
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver', '>= 4.0.0.rc1'
  gem 'webdrivers'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

自分で試したこと

Capybaraの'drag_to'メソッドは検討してみましたが、
要素=>要素への移動のためcloneによる要素追加は実現不可と見切っております。

※要素(.large-group)から特定の位置にドラッグ&ドロップするという形で記述できればうまく動作すると見込んでおります。

0

1Answer

「発生している問題」の動画がよく分からなかったのですが何が起きているんでしょう

1

Comments

  1. @motoya0118

    Questioner
    ご質問ありがとうございます!!
    「発生している問題」へ【問題動作のキャプチャ】を1枚追記致しました!

    発生してる問題としては、

    『黒丸・及び黒矢印のドラック&ドロップさせたいのに
    実際は、赤丸のようにLargeGroupがドラックはされるが、マウスポインタの位置にドロップされてしまう』

    という点になります。
  2. @motoya0118

    Questioner
    ご提案ありがとうございます^^

    下記のテストコードに変更してみましたが、
    【問題動作のキャプチャ】と同じ動作になりました...

    ※Capybaraの'drag_to'では発生しなかったので、状況的にSeleniumでDrag&Dropしようとすると指定要素Dragして、マウスポインタ位置にDropするという動作になっているようです。。。
    (drag_and_drop_by,drag_and_drop共に同様の動作になっている)

    ```
    el1 = page.driver.browser.find_element(class_name: "large_group")
    el2 = page.driver.browser.find_element(class_name: "MyString")
    page.driver.browser.action.drag_and_drop(el1, el2).perform
    ```
  3. 自分の環境でも Mac + Ruby + Chrome で実行してみましたが確かに同じ現象が起きました
    ヘッドレスならうまくいくかと思いきやうまくいかず

    何でしょうね

Your answer might help someone💌