[RUBY] Je veux cliquer sur une broche GoogleMap dans RSpec

introduction

Je voulais écrire un test pour cliquer sur une épingle sur GoogleMap dans RSpec, mais j'en étais accro, donc c'est un rappel. Veuillez noter que les sources et les codes d'erreur répertoriés sont ceux de sortie, en omettant les inutiles.

environnement

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

URL de référence

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/

Cible

Je souhaite tester si l'infowindow s'affiche en cliquant sur une épingle dans GoogleMap

problème

• La broche n'a pas pu être cliquée avec capybara
• En cliquant sur la balise img Selenium :: WebDriver :: Error :: ElementClickInterceptedError:
• Cliquez sur la balise de la carte Selenium :: WebDriver :: Error :: ElementNotInteractableError:

Cause

• Si l'élément que vous souhaitez rechercher est display: none, disabled, hidden, vous ne pouvez pas rechercher avec capybara.
• La hauteur de l'élément que vous souhaitez rechercher est 0px, donc il ne peut pas être reconnu par capybara.

Solution

Peut être cliqué en trouvant la balise de zone avec l'option visible: false

googlemap.html

<div id="map"> //Carte entière
  <img src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png " usemap="#gmimap0"> //Épingler l'image
  <map name="gmimap0" id="gmimap0">
    <area> //Cliquez sur ce gars et c'est ok
  </map>
</div>

googlemap_spec.rb

require 'rails_helper'

RSpec.describe "GoogleMap", type: :system do
  describe "La page sur laquelle GoogleMap est affiché" do
    context "Vérification du fonctionnement de GoogleMap", js: true do
      it "Cliquez sur l'épingle pour afficher l'infowindow" do
        pin = find("map#gmimap0 area", visible: false)
        pin.click
        expect(page).to have_css "div.infowindow" #Tester la présence de la classe infowindow
      end
    end
  end
end

Mauvais modèle partie 1

Trouvez et cliquez sur la balise img de l'épingle

• Vous ne pouvez pas cliquer sur la balise img en premier lieu
• Selenium::WebDriver::Error::ElementClickInterceptedError:
• Un indice indiquant que la balise de zone est cliquable s'affiche

googlemap_spec.rb

#Trouvez et cliquez sur la balise img de l'épingle
  describe "La page sur laquelle GoogleMap est affiché" do
    context "Vérification du fonctionnement de GoogleMap", js: true do
      it "Cliquez sur l'épingle pour afficher l'infowindow" do
        pin = find("img[src$='spotlight-poi2_hdpi.png']") #Rechercher des images d'épingle
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#Je ne peux pas cliquer sur l'erreur de balise img
#Vous pouvez cliquer sur l'étiquette de zone
Failures:

  1)Page sur laquelle GoogleMap est affiché GoogleMap Afficher le contenu Lorsque vous cliquez sur l'épingle, une infowindow s'affiche.
     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]:Chemin vers le répertoire dans lequel les captures d'écran sont stockées


     # 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:

Mauvais modèle partie 2

Recherchez et cliquez sur l'étiquette de la carte

• Balise de carte introuvable
• Aucun indice dans le code d'erreur

googlemap_spec.rb

#Recherchez et cliquez sur l'étiquette de la carte
  describe "La page sur laquelle GoogleMap est affiché" do
    context "Vérification du fonctionnement de GoogleMap", js: true do
      it "Vérifiez que l'infowindow est affiché" do
        pin = find("map#gmimap0").click #Rechercher une balise cartographique
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#erreur de balise de carte introuvable
Failures

  1)Page sur laquelle GoogleMap est affiché GoogleMap Afficher le contenu Lorsque vous cliquez sur l'épingle, une infowindow s'affiche.
     Failure/Error: pin = find("map#gmimap0").click

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

     [Screenshot]:Chemin vers le répertoire dans lequel les captures d'écran sont stockées


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

Failed examples:

Mauvais modèle partie 3

Trouvez la balise de la carte avec visible: false et cliquez sur

• La balise de la carte est de taille zéro et ne peut pas être cliquée
• Selenium::WebDriver::Error::ElementNotInteractableError:

googlemap_spec.rb

#visible dans la balise de la carte:trouver avec faux
  describe "La page sur laquelle GoogleMap est affiché" do
    context "Contenu d'affichage GoogleMap", js: true do
      it "Vérifiez que l'infowindow est affiché" do
        pin = find("map#gmimap0", visible: false).click #Rechercher des étiquettes de carte avec des options de recherche d'éléments masqués
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#Erreur selon laquelle la balise de carte ne peut pas être cliquée car sa taille est nulle
Failures:

  1)La page sur laquelle GoogleMap est affiché dans la fenêtre d'affichage du contenu de GoogleMap s'affiche
     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]:Chemin vers le répertoire dans lequel les captures d'écran sont stockées


     # 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

Apprendre

• Si vous souhaitez rechercher des éléments cachés avec capybara, vous pouvez cliquer sur rechercher avec l'option visible: false.
• Ne manquez pas l'indice caché dans le code d'erreur