Update website tour code

Author: mdmintz

seleniumbase/core/style_sheet.py

@@ -97,6 +97,25 @@
         }
         </style>'''
 
+# Bootstrap Tour Backdrop Style
+bt_backdrop_style = (
+    '''
+    .tour-tour-element {
+        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.20);
+        pointer-events:  none !important;
+        z-index: 9999;
+    }
+
+    :not(.tour-tour-element) .orphan.tour-tour {
+        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.20);
+    }
+
+    .tour-tour {
+        pointer-events:  auto;
+        z-index: 9999;
+    }
+    ''')
+
 sh_style_test = (
     '''
     let test_tour = new Shepherd.Tour({
@@ -107,16 +126,17 @@
     });
     ''')
 
+# Shepherd Backdrop Style
 sh_backdrop_style = (
     '''
     body.shepherd-active .shepherd-target.shepherd-enabled {
-        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.22);
+        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.20);
         pointer-events:  none !important;
         z-index: 9999;
     }
 
     body.shepherd-active .shepherd-orphan {
-        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.16);
+        box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.20);
         pointer-events:  auto;
         z-index: 9999;
     }

seleniumbase/fixtures/base_case.py

@@ -827,10 +827,13 @@ def __activate_bootstrap(self):
         bootstrap_tour_css = constants.BootstrapTour.MIN_CSS
         bootstrap_tour_js = constants.BootstrapTour.MIN_JS
 
-        verify_script = ("""// Instance the tour
+        verify_script = ("""// Verify Bootstrap Tour activated
                          var tour2 = new Tour({
                          });""")
 
+        backdrop_style = style_sheet.bt_backdrop_style
+        self.add_css_style(backdrop_style)
+        self.wait_for_ready_state_complete()
         for x in range(4):
             self.activate_jquery()
             self.add_css_link(bootstrap_tour_css)
@@ -852,7 +855,7 @@ def __activate_bootstrap(self):
             '''directive. ''' % self.driver.current_url)
 
     def __is_bootstrap_activated(self):
-        verify_script = ("""// Instance the tour
+        verify_script = ("""// Verify Bootstrap Tour activated
                          var tour2 = new Tour({
                          });""")
         try:
@@ -969,44 +972,75 @@ def __is_shepherd_activated(self):
             return False
 
     def create_tour(self, name=None, theme=None):
-        """ Creates a tour for a website.
+        """ Creates a tour for a website. By default, the Shepherd Javascript
+            Library is used with the Shepherd "Light" / "Arrows" theme.
             @Params
             name - If creating multiple tours, use this to select the
                    tour you wish to add steps to.
             theme - Sets the default theme for the tour.
                     Choose from "light"/"arrows", "dark", "default", "square",
                     and "square-dark". ("arrows" is used if None is selected.)
+                    Alternatively, you may use a different Javascript Library
+                    as the theme. Those include "IntroJS" & "Bootstrap".
         """
         if not name:
             name = "default"
 
-        shepherd_theme = "shepherd-theme-arrows"
         if theme:
             if theme.lower() == "bootstrap":
                 self.create_bootstrap_tour(name)
                 return
-            elif theme == "default":
+            elif theme.lower() == "intro":
+                self.create_introjs_tour(name)
+                return
+            elif theme.lower() == "introjs":
+                self.create_introjs_tour(name)
+                return
+            elif theme.lower() == "shepherd":
+                self.create_shepherd_tour(name, theme="light")
+                return
+            else:
+                self.create_shepherd_tour(name, theme)
+        else:
+            self.create_shepherd_tour(name, theme="light")
+
+    def create_shepherd_tour(self, name=None, theme=None):
+        """ Creates a Shepherd JS website tour.
+            @Params
+            name - If creating multiple tours, use this to select the
+                   tour you wish to add steps to.
+            theme - Sets the default theme for the tour.
+                    Choose from "light"/"arrows", "dark", "default", "square",
+                    and "square-dark". ("light" is used if None is selected.)
+        """
+
+        shepherd_theme = "shepherd-theme-arrows"
+        if theme:
+            if theme.lower() == "default":
                 shepherd_theme = "shepherd-theme-default"
-            elif theme == "dark":
+            elif theme.lower() == "dark":
                 shepherd_theme = "shepherd-theme-dark"
-            elif theme == "light":
+            elif theme.lower() == "light":
                 shepherd_theme = "shepherd-theme-arrows"
-            elif theme == "arrows":
+            elif theme.lower() == "arrows":
                 shepherd_theme = "shepherd-theme-arrows"
-            elif theme == "square":
+            elif theme.lower() == "square":
                 shepherd_theme = "shepherd-theme-square"
-            elif theme == "square-dark":
+            elif theme.lower() == "square-dark":
                 shepherd_theme = "shepherd-theme-square-dark"
 
-        new_tour = ("""
-                    // Shepherd Tour
-                    let tour = new Shepherd.Tour({
-                        defaults: {
-                            classes: '%s',
-                            scrollTo: true
-                        }
-                    });
-                    """ % shepherd_theme)
+        if not name:
+            name = "default"
+
+        new_tour = (
+            """
+            // Shepherd Tour
+            let tour = new Shepherd.Tour({
+                defaults: {
+                    classes: '%s',
+                    scrollTo: true
+                }
+            });""" % shepherd_theme)
 
         self._tour_steps[name] = []
         self._tour_steps[name].append(new_tour)
@@ -1071,22 +1105,19 @@ def add_tour_step(self, message, selector=None, name=None,
         """
         if not selector:
             selector = "html"
-        selector = re.escape(selector)
         selector = self.__escape_quotes_if_needed(selector)
 
         if not name:
             name = "default"
         if name not in self._tour_steps:
-            # By default, will create a Bootstrap tour if no tours exist
-            self.create_tour(name=name, theme="bootstrap")
+            # By default, will create an IntroJS tour if no tours exist
+            self.create_tour(name=name, theme="introjs")
 
         if not title:
             title = ""
-        title = re.escape(title)
         title = self.__escape_quotes_if_needed(title)
 
         if message:
-            message = re.escape(message)
             message = self.__escape_quotes_if_needed(message)
         else:
             message = ""
@@ -1171,6 +1202,7 @@ def __add_bootstrap_tour_step(self, message, selector=None, name=None,
                        before automatically advancing to the next tour step.
         """
         if selector != "html":
+            selector = self.__make_css_match_first_element_only(selector)
             element_row = "element: '%s'," % selector
         else:
             element_row = ""
@@ -1303,23 +1335,29 @@ def __play_shepherd_tour(self, name=None, interval=0):
                 if autoplay:
                     try:
                         element = self.execute_script(
-                            "Shepherd.activeTour.currentStep"
+                            "return Shepherd.activeTour.currentStep"
                             ".options.attachTo.element")
                         shep_text = self.execute_script(
-                            "Shepherd.activeTour.currentStep.options.text")
+                            "return Shepherd.activeTour.currentStep"
+                            ".options.text")
                     except Exception:
                         continue
+                    if element != latest_element or shep_text != latest_text:
+                        latest_element = element
+                        latest_text = shep_text
+                        start_ms = time.time() * 1000.0
+                        stop_ms = start_ms + (interval * 1000.0)
                     now_ms = time.time() * 1000.0
                     if now_ms >= stop_ms:
                         if ((element == latest_element) and
                                 (shep_text == latest_text)):
                             self.execute_script("Shepherd.activeTour.next()")
                             try:
                                 latest_element = self.execute_script(
-                                    "Shepherd.activeTour.currentStep"
+                                    "return Shepherd.activeTour.currentStep"
                                     ".options.attachTo.element")
                                 latest_text = self.execute_script(
-                                    "Shepherd.activeTour.currentStep"
+                                    "return Shepherd.activeTour.currentStep"
                                     ".options.text")
                                 start_ms = time.time() * 1000.0
                                 stop_ms = start_ms + (interval * 1000.0)
@@ -1335,7 +1373,7 @@ def __play_shepherd_tour(self, name=None, interval=0):
                         ".currentStep.options.attachTo.element")
                     try:
                         self.__wait_for_css_query_selector(
-                            selector, timeout=(settings.MINI_TIMEOUT))
+                            selector, timeout=(settings.SMALL_TIMEOUT))
                     except Exception:
                         self.remove_elements("div.shepherd-content")
                         self.__post_messenger_error_message(
@@ -1364,7 +1402,7 @@ def __play_bootstrap_tour(self, name=None, interval=0):
         for tour_step in self._tour_steps[name]:
             instructions += tour_step
         instructions += (
-            """]});
+            """]);
 
             // Initialize the tour
             tour.init();
@@ -1391,7 +1429,7 @@ def __play_bootstrap_tour(self, name=None, interval=0):
                     selector = re.search(
                         r"[\S\s]+element: '([\S\s]+)',[\S\s]+title: '",
                         self._tour_steps[name][1]).group(1)
-                    selector = selector.replace('\\', '')
+                    selector = selector.replace('\\', '').replace(':first', '')
                     self.wait_for_element_present(
                         selector, timeout=(settings.SMALL_TIMEOUT))
                 else:
@@ -1411,8 +1449,12 @@ def __play_bootstrap_tour(self, name=None, interval=0):
         while tour_on:
             try:
                 time.sleep(0.01)
-                result = self.execute_script(
-                    "return $tour.ended()")
+                if self.browser != "firefox":
+                    result = self.execute_script(
+                        "return $tour.ended()")
+                else:
+                    self.wait_for_element_present(".tour-tour", timeout=0.4)
+                    result = False
             except Exception:
                 tour_on = False
                 result = None
@@ -1421,8 +1463,13 @@ def __play_bootstrap_tour(self, name=None, interval=0):
             else:
                 try:
                     time.sleep(0.01)
-                    result = self.execute_script(
-                        "return $tour.ended()")
+                    if self.browser != "firefox":
+                        result = self.execute_script(
+                            "return $tour.ended()")
+                    else:
+                        self.wait_for_element_present(
+                            ".tour-tour", timeout=0.4)
+                        result = False
                     if result is False:
                         time.sleep(0.1)
                         continue