Improve the Python APIs for IntroJS website tours

Author: mdmintz

help_docs/method_summary.md

@@ -507,6 +507,8 @@ self.create_hopscotch_tour(name=None)
 
 self.create_introjs_tour(name=None)
 
+self.set_introjs_colors(theme_color=None, hover_color=None)
+
 self.add_tour_step(message, selector=None, name=None,
                    title=None, theme=None, alignment=None)
 

seleniumbase/core/style_sheet.py

@@ -117,6 +117,9 @@
     #driver-popover-item, .popover-class {
         pointer-events: auto !important;
     }
+    button.driver-prev-btn.driver-disabled {
+        visibility: hidden;
+    }
     """
 
 messenger_style = """
@@ -146,6 +149,35 @@
     }
     """
 
+# IntroJS Style
+introjs_style = """
+    .introjs-button.introjs-nextbutton,
+    .introjs-button.introjs-donebutton {
+        color: #fff !important;
+        background-color: %s !important;
+        border: 1px solid %s !important;
+        text-shadow: none;
+        box-shadow: none;
+    }
+    .introjs-button.introjs-nextbutton:hover,
+    .introjs-button.introjs-donebutton:hover {
+        color: #fff !important;
+        background-color: %s !important;
+        border: 1px solid %s !important;
+    }
+    .introjs-button {
+        box-sizing: content-box;
+        text-decoration: none;
+    }
+    .introjs-button.introjs-skipbutton {
+        color: %s;
+    }
+    .introjs-tooltip, .introjs-floating {
+        box-sizing: content-box;
+        position: absolute;
+    }
+"""
+
 # Shepherd Backdrop Style
 sh_backdrop_style = """
     body.shepherd-active .shepherd-target.shepherd-enabled {

seleniumbase/core/tour_helper.py

@@ -6,6 +6,7 @@
 import re
 import time
 from selenium.webdriver.common.by import By
+from seleniumbase import config as sb_config
 from seleniumbase.config import settings
 from seleniumbase.core import style_sheet
 from seleniumbase.fixtures import constants
@@ -154,13 +155,24 @@ def activate_introjs(driver):
     intro_css = constants.IntroJS.MIN_CSS
     intro_js = constants.IntroJS.MIN_JS
 
+    theme_color = sb_config.introjs_theme_color
+    hover_color = sb_config.introjs_hover_color
+    backdrop_style = style_sheet.introjs_style % (
+        theme_color,
+        hover_color,
+        hover_color,
+        hover_color,
+        theme_color,
+    )
+
     verify_script = """// Verify IntroJS activated
                      var intro2 = introJs();
                      """
 
     activate_bootstrap(driver)
     js_utils.wait_for_ready_state_complete(driver)
     js_utils.wait_for_angularjs(driver)
+    js_utils.add_css_style(driver, backdrop_style)
     for x in range(4):
         js_utils.activate_jquery(driver)
         js_utils.add_css_link(driver, intro_css)
@@ -727,7 +739,9 @@ def play_introjs_tour(
         intro.setOption("overlayOpacity", .29);
         intro.setOption("scrollToElement", true);
         intro.setOption("keyboardNavigation", true);
-        intro.setOption("exitOnEsc", false);
+        intro.setOption("exitOnEsc", true);
+        intro.setOption("hidePrev", true);
+        intro.setOption("nextToDone", true);
         intro.setOption("exitOnOverlayClick", false);
         intro.setOption("showStepNumbers", false);
         intro.setOption("showProgress", false);
@@ -946,7 +960,19 @@ def export_tour(tour_steps, name=None, filename="my_tour.js", url=None):
     elif tour_type == "introjs":
         intro_css = constants.IntroJS.MIN_CSS
         intro_js = constants.IntroJS.MIN_JS
+        theme_color = sb_config.introjs_theme_color
+        hover_color = sb_config.introjs_hover_color
+        backdrop_style = style_sheet.introjs_style % (
+            theme_color,
+            hover_color,
+            hover_color,
+            hover_color,
+            theme_color,
+        )
+        backdrop_style = backdrop_style.replace("\n", "")
+        backdrop_style = js_utils.escape_quotes_if_needed(backdrop_style)
         instructions += 'injectCSS("%s");\n' % intro_css
+        instructions += 'injectStyle("%s");\n' % backdrop_style
         instructions += 'injectJS("%s");' % intro_js
 
     elif tour_type == "shepherd":
@@ -1028,7 +1054,9 @@ def export_tour(tour_steps, name=None, filename="my_tour.js", url=None):
             intro.setOption("overlayOpacity", .29);
             intro.setOption("scrollToElement", true);
             intro.setOption("keyboardNavigation", true);
-            intro.setOption("exitOnEsc", false);
+            intro.setOption("exitOnEsc", true);
+            intro.setOption("hidePrev", true);
+            intro.setOption("nextToDone", true);
             intro.setOption("exitOnOverlayClick", false);
             intro.setOption("showStepNumbers", false);
             intro.setOption("showProgress", false);

seleniumbase/fixtures/base_case.py

@@ -6228,6 +6228,10 @@ def create_introjs_tour(self, name=None):
         name - If creating multiple tours at the same time,
                use this to select the tour you wish to add steps to.
         """
+        if not hasattr(sb_config, "introjs_theme_color"):
+            sb_config.introjs_theme_color = constants.TourColor.theme_color
+        if not hasattr(sb_config, "introjs_hover_color"):
+            sb_config.introjs_hover_color = constants.TourColor.hover_color
         if not name:
             name = "default"
 
@@ -6242,6 +6246,36 @@ def create_introjs_tour(self, name=None):
         self._tour_steps[name] = []
         self._tour_steps[name].append(new_tour)
 
+    def set_introjs_colors(self, theme_color=None, hover_color=None):
+        """Use this method to set the theme colors for IntroJS tours.
+        Args must be hex color values that start with a "#" sign.
+        If a color isn't specified, the color will reset to the default.
+        The border color of buttons is set to the hover color.
+        @Params
+        theme_color - The color of buttons.
+        hover_color - The color of buttons after hovering over them.
+        """
+        if not hasattr(sb_config, "introjs_theme_color"):
+            sb_config.introjs_theme_color = constants.TourColor.theme_color
+        if not hasattr(sb_config, "introjs_hover_color"):
+            sb_config.introjs_hover_color = constants.TourColor.hover_color
+        if theme_color:
+            match = re.search(r'^#(?:[0-9a-fA-F]{3}){1,2}$', theme_color)
+            if not match:
+                raise Exception(
+                    'Expecting a hex value color that starts with "#"!')
+            sb_config.introjs_theme_color = theme_color
+        else:
+            sb_config.introjs_theme_color = constants.TourColor.theme_color
+        if hover_color:
+            match = re.search(r'^#(?:[0-9a-fA-F]{3}){1,2}$', hover_color)
+            if not match:
+                raise Exception(
+                    'Expecting a hex value color that starts with "#"!')
+            sb_config.introjs_hover_color = hover_color
+        else:
+            sb_config.introjs_hover_color = constants.TourColor.hover_color
+
     def add_tour_step(
         self,
         message,

seleniumbase/fixtures/constants.py

@@ -232,6 +232,13 @@ class HighCharts:
     )
 
 
+class TourColor:
+    # theme_color = "#f26721"  # Orange
+    # hover_color = "#db5409"  # Darker Orange
+    theme_color = "#2167e2"  # Blue
+    hover_color = "#0954cb"  # Darker Blue
+
+
 class BootstrapTour:
     VER = "0.12.0"
     MIN_CSS = (
@@ -269,15 +276,9 @@ class Hopscotch:
 
 
 class IntroJS:
-    VER = "2.9.3"
-    MIN_CSS = (
-        "https://cdnjs.cloudflare.com/ajax/libs/"
-        "intro.js/%s/introjs.css" % VER
-    )
-    MIN_JS = (
-        "https://cdnjs.cloudflare.com/ajax/libs/"
-        "intro.js/%s/intro.min.js" % VER
-    )
+    VER = "4.2.2"
+    MIN_CSS = "https://unpkg.com/intro.js@%s/minified/introjs.min.css" % VER
+    MIN_JS = "https://unpkg.com/intro.js@%s/minified/intro.min.js" % VER
 
 
 class JqueryConfirm: