Merge pull request #196 from seleniumbase/bootstrap-tour

Add the ability to create Bootstrap Tours

Author: mdmintz

README.md

@@ -60,7 +60,7 @@ cd tour_examples
 pytest google_tour.py
 ```
 
-![](https://cdn2.hubspot.net/hubfs/100006/images/google_tour.gif "SeleniumBase Tours")<br />
+<img src="https://cdn2.hubspot.net/hubfs/100006/images/google_tour.gif" title="SeleniumBase Tours" height="348"><br>
 (Above: Actual demo of [google_tour.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/google_tour.py) running on [google.com](https://google.com))
 
 For more detailed steps on getting started, see the [**Detailed Instructions**](#seleniumbase_installation) section.

examples/tour_examples/ReadMe.md

@@ -1,15 +1,33 @@
 ## Creating SeleniumBase Tours
 
-![](https://cdn2.hubspot.net/hubfs/100006/images/google_tour.gif "SeleniumBase Tours")<br>
+SeleniumBase Tours utilize the **[Shepherd Javascript Library](https://cdnjs.com/libraries/shepherd/1.8.1)** and the **[Bootstrap Tour Library](https://cdnjs.com/libraries/bootstrap-tour)** for creating and running tours, demos, and walkthroughs on any website.
 
-SeleniumBase Tours utilize the [Shepherd Javascript Library](https://cdnjs.com/libraries/shepherd/1.8.1) for creating and running tours, demos, and walkthroughs on any website.
+Example tour utilizing the Shepherd Javascript Library:
 
-To utilize tours, there are three methods that you need to know at the basic level (which contain optional arguments):
+<img src="https://cdn2.hubspot.net/hubfs/100006/images/google_tour.gif" title="Shepherd Tour" height="348"><br>
 
-``self.create_tour(theme)``
+Example tour utilizing the Bootstrap Javascript Library:
+
+<img src="https://cdn2.hubspot.net/hubfs/100006/images/google_tour_2b.gif" title="Bootstrap Tour" height="340"><br>
+
+By default, the Shepherd Javascript Library is used when creating a tour with:
+
+``self.create_tour()``
+
+To create a tour utilizing the Bootstrap Javascript Library, you can use either of the following:
+
+``self.create_bootstrap_tour()``
+
+OR
+
+``self.create_tour(theme="bootstrap")``
+
+To add a tour step, use the following: (Only ``message`` is required. The other args are optional.)
 
 ``self.add_tour_step(message, css_selector, title, alignment, theme)``
 
+Here's how you play a tour:
+
 ``self.play_tour(interval)``
 
 With the ``create_tour()`` method, you can pass a default theme to change the look & feel of the tour steps. Valid themes are ``dark``, ``default``, ``arrows``, ``square``, and ``square-dark``.
@@ -18,6 +36,8 @@ With the ``self.add_tour_step()`` method, you must first pass a message to displ
 
 Finally, you can play a tour you created by calling the ``self.play_tour()`` method. If you specify an interval, the tour will automatically walk through each step after that many seconds have passed.
 
+All methods have the optional ``name`` argument, which is only needed if you're creating multiple tours at once. Then, when you're adding a step or playing a tour, SeleniumBase knows which tour you're referring too. You can avoid using the ``name`` arg for multiple tours if you play a tour before creating a new one.
+
 ### Here's an example of using SeleniumBase Tours:
 
 ```python
@@ -44,3 +64,9 @@ class MyTourClass(BaseCase):
 ```bash
 pytest google_tour.py
 ```
+
+#### There's also the Bootstrap Google Tour, which you can play with the following command:
+
+```bash
+pytest bootstrap_google_tour.py
+```

examples/tour_examples/bootstrap_google_tour.py

@@ -0,0 +1,63 @@
+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_bootstrap_tour()  # OR self.create_tour(theme="bootstrap")
+        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.add_tour_step(
+            "Then click here to search!", 'input[value="Google Search"]',
+            alignment="bottom")
+        self.add_tour_step(
+            "Or click here to see the top result.",
+            '''[value="I'm Feeling Lucky"]''',
+            alignment="bottom")
+        self.add_tour_step("Here's an example Google search:")
+        self.play_tour()
+
+        self.highlight_update_text('input[title="Search"]', "GitHub")
+        self.highlight_click('input[value="Google Search"]')
+
+        self.create_bootstrap_tour()  # OR self.create_tour(theme="bootstrap")
+        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_bootstrap_tour()  # OR self.create_tour(theme="bootstrap")
+        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()

examples/tour_examples/google_tour.py

@@ -28,10 +28,8 @@ def test_google_tour(self):
         self.create_tour(theme="dark")
         self.add_tour_step(
             "Search results appear here!", title="(5-second autoplay on)")
-        self.add_tour_step(
-            "Let's take another tour...",
-            title="Ready for more?", theme="arrows")
-        self.play_tour(interval=5)  # tour automatically continues after 3s
+        self.add_tour_step("Let's take another tour:", theme="arrows")
+        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')

help_docs/method_summary.md

@@ -91,12 +91,14 @@ self.add_css_style(css_style)
 
 self.add_js_code_from_link(js_link)
 
-self.add_meta_tag(http_equiv=None, content=None):
+self.add_meta_tag(http_equiv=None, content=None)
 
 self.activate_jquery()
 
 self.create_tour(name=None, theme=None)
 
+self.create_bootstrap_tour(name=None)
+
 self.add_tour_step(message, selector=None, name=None,
     title=None, theme=None, alignment=None)
 

requirements.txt

@@ -3,9 +3,9 @@ setuptools
 ipython==5.6.0
 selenium==3.14.0
 nose==1.3.7
-pytest==3.7.2
+pytest==3.7.3
 pytest-html==1.19.0
-pytest-xdist==1.22.5
+pytest-xdist==1.23.0
 six==1.11.0
 flake8==3.5.0
 requests==2.19.1