Add ability to create & run Hopscotch JS website tours

Author: mdmintz

examples/tour_examples/ReadMe.md

@@ -1,6 +1,6 @@
 ## SeleniumBase Website Tours
 
-SeleniumBase Tours utilize the following three Javascript libraries for creating and running tours, demos, and walkthroughs on any website: **[Shepherd JS](https://cdnjs.com/libraries/shepherd/1.8.1)**, **[Bootstrap Tour JS](https://cdnjs.com/libraries/bootstrap-tour)**, and **[Intro JS](https://cdnjs.com/libraries/intro.js)**.
+SeleniumBase Tours utilize your choice of 4 different Javascript libraries for creating & running tours, demos, and walkthroughs on any website: **[Shepherd](https://shipshapecode.github.io/shepherd/docs/welcome/)**, **[Bootstrap Tour](http://bootstraptour.com/)**, **[IntroJS](https://introjs.com/)**, and **[Hopscotch](http://linkedin.github.io/hopscotch/)**. Choose your favorite one to use!
 
 Example tour:
 
@@ -35,6 +35,13 @@ OR
 
 ``self.create_tour(theme="introjs")``
 
+To create a tour utilizing the Hopscotch JS Library, you can use either of the following:
+
+``self.create_hopscotch_tour()``
+
+OR
+
+``self.create_tour(theme="hopscotch")``
 
 ### Adding a step to a tour:
 

examples/tour_examples/hopscotch_google_tour.py

@@ -0,0 +1,65 @@
+from seleniumbase import BaseCase
+
+
+class MyTourClass(BaseCase):
+
+    def test_google_tour(self):
+        self.open('https://google.com')
+        self.wait_for_element('input[title="Search"]')
+
+        self.create_hopscotch_tour()  # OR self.create_tour(theme="hopscotch")
+        self.add_tour_step(
+            "Click to begin the Google Tour!", title="SeleniumBase Tours")
+        self.add_tour_step(
+            "Type in your search query here.", 'input[title="Search"]')
+        self.play_tour()
+
+        self.highlight_update_text('input[title="Search"]', "Google")
+        self.wait_for_element('[role="listbox"]')  # Wait for autocomplete
+
+        self.create_hopscotch_tour()
+        self.add_tour_step(
+            "Then click here to search.", 'input[value="Google Search"]')
+        self.add_tour_step(
+            "Or press [ENTER] after typing a query here.", '[title="Search"]')
+        self.play_tour()
+
+        self.highlight_update_text('input[title="Search"]', "GitHub\n")
+        self.wait_for_element("#search")
+
+        self.create_hopscotch_tour()
+        self.add_tour_step(
+            "Search results appear here!", title="(5-second autoplay on)")
+        self.add_tour_step("Let's take another tour:")
+        self.play_tour(interval=5)  # Tour automatically continues after 5 sec
+
+        self.open("https://www.google.com/maps/@42.3598616,-71.0912631,15z")
+        self.wait_for_element('input#searchboxinput')
+
+        self.create_hopscotch_tour()
+        self.add_tour_step("Welcome to Google Maps!")
+        self.add_tour_step(
+            "Type in a location here.", "#searchboxinput", title="Search Box")
+        self.add_tour_step(
+            "Then click here to show it on the map.",
+            "#searchbox-searchbutton", alignment="bottom")
+        self.add_tour_step(
+            "Or click here to get driving directions.",
+            "#searchbox-directions", alignment="bottom")
+        self.add_tour_step(
+            "Use this button to switch to Satellite view.",
+            "div.widget-minimap", alignment="right")
+        self.add_tour_step(
+            "Click here to zoom in.", "#widget-zoom-in", alignment="left")
+        self.add_tour_step(
+            "Or click here to zoom out.", "#widget-zoom-out", alignment="left")
+        self.add_tour_step(
+            "Use the Menu button to see more options.",
+            ".searchbox-hamburger-container", alignment="right")
+        self.add_tour_step(
+            "Or click here to see more Google apps.", '[title="Google apps"]',
+            alignment="left")
+        self.add_tour_step(
+            "Thanks for trying out SeleniumBase Tours!",
+            title="End of Guided Tour")
+        self.play_tour()

help_docs/method_summary.md

@@ -97,8 +97,14 @@ self.activate_jquery()
 
 self.create_tour(name=None, theme=None)
 
+self.create_shepherd_tour(name=None, theme=None)
+
 self.create_bootstrap_tour(name=None)
 
+self.create_hopscotch_tour(name=None)
+
+self.create_introjs_tour(name=None)
+
 self.add_tour_step(message, selector=None, name=None,
     title=None, theme=None, alignment=None)
 

seleniumbase/core/style_sheet.py

@@ -126,6 +126,14 @@
     });
     ''')
 
+# Hopscotch Backdrop Style
+hops_backdrop_style = (
+    '''
+    .hopscotch-bubble-container {
+        font-size: 110%;
+    }
+    ''')
+
 # Shepherd Backdrop Style
 sh_backdrop_style = (
     '''