[RUBY] Ich möchte in RSpec auf einen GoogleMap-Pin klicken

Einführung

Ich wollte einen Test schreiben, um auf einen Pin in GoogleMap in RSpec zu klicken, aber ich war süchtig danach, also ist es eine Erinnerung. Bitte beachten Sie, dass die aufgeführten Quellen und Fehlercodes die ausgegebenen sind und unnötige weggelassen werden.

Umgebung

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

Referenz-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/

Ziel

Ich möchte testen, ob das Infofenster angezeigt wird, indem ich in GoogleMap auf eine Stecknadel klicke

Problem

• Pin konnte nicht mit Capybara angeklickt werden
• Klicken Sie auf das img-Tag "Selenium :: WebDriver :: Error :: ElementClickInterceptedError:"
• Klicken Sie auf das Map-Tag "Selenium :: WebDriver :: Error :: ElementNotInteractableError:"

Ursache

• Wenn das Element, nach dem Sie suchen möchten, "display: none", "disabled", "hidden" ist, können Sie nicht mit Capybara suchen.
• Die Höhe des Elements, das Sie suchen möchten, beträgt 0 Pixel, sodass es von Capybara nicht erkannt werden kann.

Lösung

Kann angeklickt werden, indem das Bereichstag mit der Option "sichtbar: falsch" gefunden wird

googlemap.html

<div id="map"> //Ganze Karte
  <img src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png " usemap="#gmimap0"> //Pin Bild
  <map name="gmimap0" id="gmimap0">
    <area> //Klicken Sie auf diesen Kerl und es ist in Ordnung
  </map>
</div>

googlemap_spec.rb

require 'rails_helper'

RSpec.describe "GoogleMap", type: :system do
  describe "Die Seite, auf der GoogleMap angezeigt wird" do
    context "Überprüfen der Funktion von GoogleMap", js: true do
      it "Klicken Sie auf den Pin, um das Infofenster anzuzeigen" do
        pin = find("map#gmimap0 area", visible: false)
        pin.click
        expect(page).to have_css "div.infowindow" #Test auf Vorhandensein der Infowindow-Klasse
      end
    end
  end
end

Schlechtes Muster Teil 1

Suchen Sie das img-Tag des Pins und klicken Sie darauf

• Sie können nicht zuerst auf das img-Tag klicken
• Selenium::WebDriver::Error::ElementClickInterceptedError:
• Ein Hinweis darauf, dass das Bereichstag anklickbar ist, wird angezeigt

googlemap_spec.rb

#Suchen Sie das img-Tag des Pins und klicken Sie darauf
  describe "Die Seite, auf der GoogleMap angezeigt wird" do
    context "Überprüfen der Funktion von GoogleMap", js: true do
      it "Klicken Sie auf den Pin, um das Infofenster anzuzeigen" do
        pin = find("img[src$='spotlight-poi2_hdpi.png']") #Suche nach Pin-Bildern
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#Ich kann nicht auf das IMG-Tag Fehler klicken
#Sie können auf das Bereichstag klicken
Failures:

  1)Seite, auf der GoogleMap angezeigt wird GoogleMap Inhalt anzeigen Wenn Sie auf die Stecknadel klicken, wird das Infofenster angezeigt.
     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]:Pfad zu dem Verzeichnis, in dem die Screenshots gespeichert sind


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

Schlechtes Muster Teil 2

Suchen Sie das Karten-Tag und klicken Sie darauf

• Map-Tag nicht gefunden
• Kein Hinweis im Fehlercode

googlemap_spec.rb

#Suchen Sie das Karten-Tag und klicken Sie darauf
  describe "Die Seite, auf der GoogleMap angezeigt wird" do
    context "Überprüfen der Funktion von GoogleMap", js: true do
      it "Testen Sie, ob das Infofenster angezeigt wird" do
        pin = find("map#gmimap0").click #Karten-Tag suchen
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#Map Tag nicht gefunden Fehler
Failures

  1)Seite, auf der GoogleMap angezeigt wird GoogleMap Inhalt anzeigen Wenn Sie auf die Stecknadel klicken, wird das Infofenster angezeigt.
     Failure/Error: pin = find("map#gmimap0").click

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

     [Screenshot]:Pfad zu dem Verzeichnis, in dem die Screenshots gespeichert sind


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

Failed examples:

Schlechtes Muster Teil 3

Suchen Sie das Karten-Tag mit "sichtbar: falsch" und klicken Sie auf

• Das Karten-Tag hat die Größe Null und kann nicht angeklickt werden
• Selenium::WebDriver::Error::ElementNotInteractableError:

googlemap_spec.rb

#sichtbar im Map-Tag:finde mit falsch
  describe "Die Seite, auf der GoogleMap angezeigt wird" do
    context "GoogleMap zeigt Inhalte an", js: true do
      it "Testen Sie, ob das Infofenster angezeigt wird" do
        pin = find("map#gmimap0", visible: false).click #Suchen Sie nach Karten-Tags mit Suchoptionen für versteckte Elemente
        pin.click
        expect(page).to have_css "div.infowindow"
      end
    end
  end

#Fehler, dass auf das Map-Tag nicht geklickt werden kann, da es die Größe Null hat
Failures:

  1)Die Seite, auf der GoogleMap angezeigt wird, sollte angezeigt werden
     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]:Pfad zu dem Verzeichnis, in dem die Screenshots gespeichert sind


     # 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

Lernen

• Wenn Sie mit Capybara nach versteckten Elementen suchen möchten, können Sie mit der Option "sichtbar: falsch" auf "Suchen" klicken.
• Verpassen Sie nicht den im Fehlercode versteckten Hinweis