[RUBY] I want to click a GoogleMap pin in RSpec

Introduction

I wanted to write a test that clicks a pin on GoogleMap in RSpec, but I'm addicted to it, so it's a memorandum. Please note that the sources and error codes listed are the output ones, omitting unnecessary ones.

environment

• macOS 10.15.6
• Ruby 2.5.7
• Rails 5.2.3
• gem capybara
• gem selenium-webdriver

Reference URL

https://qiita.com/jnchito/items/607f956263c38a5fec24

https://qiita.com/kon_yu/items/52a0f5f0016564486061

https://stackoverflow.com/questions/31479958/capybara-rspec-not-finding-and-clicking-css-element

https://code-kitchen.dev/html/map-area/

Target

I want to test if infowindow is displayed by clicking a pin in GoogleMap

problem

• Pin could not be clicked in capybara
• Clicking on the img tag Selenium :: WebDriver :: Error :: ElementClickInterceptedError:
• Click the map tag Selenium :: WebDriver :: Error :: ElementNotInteractableError:

Cause

• If the element you want to search is display: none, disabled, hidden, you cannot search with capybara.
• The height of the element you want to search is 0px, so it cannot be recognized by capybara.

solution

Can be clicked by finding the area tag with the visible: false option

googlemap.html

<div id="map"> //Whole map
  <img src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png " usemap="#gmimap0"> //Pin image
  <map name="gmimap0" id="gmimap0">
    <area> //Click this guy and it's ok
  </map>
</div>

googlemap_spec.rb

require 'rails_helper'

RSpec.describe "GoogleMap", type: :system do
  describe "The page where GoogleMap is displayed" do
    context "Checking the operation of GoogleMap", js: true do
      it "Click the pin to display infowindow" do
        pin = find("map#gmimap0 area", visible: false)
        pin.click
        expect(page).to have_css "div.infowindow" #Test for the presence of the infowindow class
      end
    end
  end
end

Bad pattern part 1

Find and click on the pin's img tag

• You cannot click the img tag in the first place
• Selenium::WebDriver::Error::ElementClickInterceptedError:
• A hint that the area tag is clickable is displayed

googlemap_spec.rb

#Find and click on the pin's img tag
  describe "The page where GoogleMap is displayed" do
    context "Checking the operation of GoogleMap", js: true do
      it "Click the pin to display infowindow" do
        pin = find("img[src$='spotlight-poi2_hdpi.png']") #Search for pin images
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#I can't click the img tag Error
#You can click the area tag
Failures:

  1)Page where GoogleMap is displayed GoogleMap Display contents When you click the pin, infowindow is displayed.
     Failure/Error: find("img[src$='spotlight-poi2_hdpi.png']").click

     Selenium::WebDriver::Error::ElementClickInterceptedError:
       element click intercepted: Element <img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png " draggable="false" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"> is not clickable at point (699, 750). Other element would receive the click: <area log="miw" coords="13.5,0,4,3.75,0,13.5,13.5,43,27,13.5,23,3.75" shape="poly" title="" style="cursor: pointer; touch-action: none;">
         (Session info: headless chrome=85.0.4183.121)

     [Screenshot]:Path to the directory where the screenshots are stored


     # 0   chromedriver                        0x00000001083091b9 chromedriver + 4911545
     .
     .
     .
     # 24  libsystem_pthread.dylib             0x00007fff6c49bb8b thread_start + 15

Finished in 9.05 seconds (files took 0.55005 seconds to load)
1 example, 1 failure

Failed examples:

Bad pattern part 2

Find and click on the map tag

• Map tag not found
• No hint in error code

googlemap_spec.rb

#Find and click the map tag
  describe "The page where GoogleMap is displayed" do
    context "Checking the operation of GoogleMap", js: true do
      it "Test that infowindow is displayed" do
        pin = find("map#gmimap0").click #Search map tag
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#map tag not found error
Failures

  1)Page where GoogleMap is displayed GoogleMap Display contents When you click the pin, infowindow is displayed.
     Failure/Error: pin = find("map#gmimap0").click

     Capybara::ElementNotFound:
       Unable to find visible css "map#gmimap0"

     [Screenshot]:Path to the directory where the screenshots are stored


Finished in 7.84 seconds (files took 0.54001 seconds to load)
1 example, 1 failure

Failed examples:

Bad pattern part 3

Find the map tag with visible: false and click

• The map tag is zero size and cannot be clicked
• Selenium::WebDriver::Error::ElementNotInteractableError:

googlemap_spec.rb

#visible in map tag:find with false
  describe "The page where GoogleMap is displayed" do
    context "GoogleMap display contents", js: true do
      it "Test that infowindow is displayed" do
        pin = find("map#gmimap0", visible: false).click #Search for map tags with hidden element search options
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#I can't click because the map tag is zero size error
Failures:

  1)The page where GoogleMap is displayed GoogleMap Display contents infowindow is displayed
     Failure/Error: pin = find("map#gmimap0", visible: false).click

     Selenium::WebDriver::Error::ElementNotInteractableError:
       element not interactable: element has zero size
         (Session info: headless chrome=85.0.4183.121)

     [Screenshot]:Path to the directory where the screenshots are stored


     # 0   chromedriver                        0x0000000107a8c1b9 chromedriver + 4911545
     .
     .
     # 21  libsystem_pthread.dylib             0x00007fff7034eb8b thread_start + 15

Finished in 8.19 seconds (files took 0.52799 seconds to load)
1 example, 1 failure

Learn

• If you want to search for hidden elements with capybara, you can click with find with visible: false option
• Don't miss the hint hidden in the error code