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

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

googlemap.png

problem

Cause

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

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

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

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

Recommended Posts

I want to click a GoogleMap pin in RSpec
I want to use a little icon in Rails
I want to define a function in Rails Console
I want to find a relative path in a situation using Path
Even in Java, I want to output true with a == 1 && a == 2 && a == 3
I want to create a Parquet file even in Ruby
I want to develop a web application!
[Ruby] I want to put an array in a variable. I want to convert to an array
I want to RSpec even at Jest!
I want to write a unit test!
I want to use @Autowired in Servlet
[Rails] I want to send data of different models in a form
I want to select multiple items with a custom layout in Dialog
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (PowerMockito edition)
I want to display a PDF in Chinese (Korean) with thin reports
I want to ForEach an array with a Lambda expression in Java
"Teacher, I want to implement a login function in Spring" ① Hello World
I want to test Action Cable with RSpec test
I want to send an email in Java.
I want to use arrow notation in Ruby
[Ruby] I want to do a method jump!
I want to pass APP_HOME to logback in Gradle
I wanted to make (a == 1 && a == 2 && a == 3) true in Java
I want to design a structured exception handling
[Xcode] I want to manage images in folders
I want to be eventually even in kotlin
I want to get the value in Ruby
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (Javassist second decoction)
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (black magic edition)
I want to use Combine in UIKit as well.
I want to use Clojure's convenient functions in Kotlin
I want to do something like "cls" in Java
I want to embed any TraceId in the log
I want to use fish shell in Laradock too! !!
I want to use ES2015 in Java too! → (´ ・ ω ・ `)
I tried to create a Clova skill in Java
I tried to make a login function in Java
I want to stop snake case in table definition
I want to add a reference type column later
I want to connect to Heroku MySQL from a client
I want to create a generic annotation for a type
I want to add a delete function to the comment function
Rspec: I want to test the post-execution state when I set a method on subject
I want to convert characters ...
[Java] I want to convert a byte array to a hexadecimal number
I want to set the conditions to be displayed in collection_check_boxes
[Beginner] I made a program to sell cakes in Java
I want to perform high-speed prime factorization in Ruby (ABC177E)
I want to make a specific model of ActiveRecord ReadOnly
I want to make a list with kotlin and java!
I want to call a method and count the number
I just wanted to make a Reactive Property in Java
I want to make a function with kotlin and java!
I want to create a form to select the [Rails] category
A story I was addicted to in Rails validation settings
I tried to convert a string to a LocalDate type in Java
I want to give a class name to the select attribute
I tried to implement a buggy web application in Kotlin
I tried to make a client of RESAS-API in Java
I want to transition to the same screen in the saved state
I want to use FireBase to display a timeline like Twitter