ElementClickInterceptedErrorについて

前提

Selenium利用時のトラブルシューティングのごく一部について書きます。

本題

フラッシュメッセージのテストを行うとエラーが発生

エラー内容

1) Dishes 料理詳細ページ 料理の削除 削除成功のフラッシュが表示されること
     Failure/Error: click_on '削除'

     Selenium::WebDriver::Error::ElementClickInterceptedError:
       element click intercepted: Element <a class="delete-dish" data-confirm="本当に...しますか？" rel="nofollow" data-method="delete" href="/dishes/1232">削除</a> is not clickable at point (393, 91). Other element would receive the click: <div class="container">...</div>
         (Session info: headless chrome=81.0.4044.138)

     [Screenshot]: tmp/screenshots/failures_r_spec_example_groups_dishes_nested_2_nested_2_削除成功のフラッシュが表示されること_759.png


     # 0   chromedriver                        0x000000010f4e9269 chromedriver + 4674153
     # 1   chromedriver                        0x000000010f483593 chromedriver + 4257171
     # 2   chromedriver                        0x000000010f12cfcf chromedriver + 757711
     # 3   chromedriver                        0x000000010f09df9c chromedriver + 171932
     # 4   chromedriver                        0x000000010f09c9c8 chromedriver + 166344
     # 5   chromedriver                        0x000000010f09ac73 chromedriver + 158835
     # 6   chromedriver                        0x000000010f099ed4 chromedriver + 155348
     # 7   chromedriver                        0x000000010f0916f6 chromedriver + 120566
     # 8   chromedriver                        0x000000010f0b54b2 chromedriver + 267442
     # 9   chromedriver                        0x000000010f091476 chromedriver + 119926
     # 10  chromedriver                        0x000000010f0b572e chromedriver + 268078
     # 11  chromedriver                        0x000000010f0c2288 chromedriver + 320136
     # 12  chromedriver                        0x000000010f0b56d3 chromedriver + 267987
     # 13  chromedriver                        0x000000010f08f1dd chromedriver + 111069
     # 14  chromedriver                        0x000000010f090185 chromedriver + 115077
     # 15  chromedriver                        0x000000010f4aafff chromedriver + 4419583
     # 16  chromedriver                        0x000000010f4b87ba chromedriver + 4474810
     # 17  chromedriver                        0x000000010f4b8557 chromedriver + 4474199
     # 18  chromedriver                        0x000000010f48f149 chromedriver + 4305225
     # 19  chromedriver                        0x000000010f4b9067 chromedriver + 4477031
     # 20  chromedriver                        0x000000010f4a0d87 chromedriver + 4377991
     # 21  chromedriver                        0x000000010f4cf2d4 chromedriver + 4567764
     # 22  chromedriver                        0x000000010f4ef1f7 chromedriver + 4698615
     # 23  libsystem_pthread.dylib             0x00007fff684e52eb _pthread_body + 126
     # 24  libsystem_pthread.dylib             0x00007fff684e8249 _pthread_start + 66
     # 25  libsystem_pthread.dylib             0x00007fff684e440d thread_start + 13
     # ./spec/system/dishes_spec.rb:88:in `block (5 levels) in <top (required)>'
     # ./spec/system/dishes_spec.rb:87:in `block (4 levels) in <top (required)>'
     # -e:1:in `<main>'

原因

１、クリックしようとしている要素が表示されれいる領域に表示されていない
２、クリックしようとしている要素のSeleniumがクリックするポイントが他の要素に隠れている

解決

自分は２が原因でしたので被らないようにHTMLを修正すると解決しました