Skip to content

Commit 18ec568

Browse files
committed
Update the SeleniumBase Website Tours ReadMe
1 parent bb3422f commit 18ec568

File tree

1 file changed

+32
-20
lines changed

1 file changed

+32
-20
lines changed

examples/tour_examples/ReadMe.md

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1-
## Creating SeleniumBase Tours
1+
## SeleniumBase Website Tours
22

3-
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.
3+
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)**.
44

5-
Example tour utilizing the Shepherd Javascript Library:
5+
Example tour:
66

7-
<img src="https://cdn2.hubspot.net/hubfs/100006/images/google_tour.gif" title="Shepherd Tour" height="348"><br>
7+
<img src="https://cdn2.hubspot.net/hubfs/100006/google_tour_3.gif" title="SeleniumBase Tour of Google" height="318"><br>
88

9-
Example tour utilizing the Bootstrap Javascript Library:
109

11-
<img src="https://cdn2.hubspot.net/hubfs/100006/images/google_tour_2b.gif" title="Bootstrap Tour" height="340"><br>
10+
### Creating a new tour:
1211

13-
By default, the Shepherd Javascript Library is used when creating a tour with:
12+
By default, Shepherd JS is used when creating a tour with:
1413

1514
``self.create_tour()``
1615

17-
To create a tour utilizing the Bootstrap Javascript Library, you can use either of the following:
16+
You can also do:
17+
18+
``self.create_shepherd_tour()``
19+
20+
With the ``create_tour()`` and ``create_shepherd_tour()`` methods, you can pass a default theme to change the look & feel of the tour steps. Valid themes for Shepherd Tours are ``dark``, ``light`` / ``arrows``, ``default``, ``square``, and ``square-dark``.
21+
22+
To create a tour utilizing the Bootstrap Tour Library, you can use either of the following:
1823

1924
``self.create_bootstrap_tour()``
2025

2126
OR
2227

2328
``self.create_tour(theme="bootstrap")``
2429

30+
To create a tour utilizing the Intro JS Library, you can use either of the following:
31+
32+
``self.create_introjs_tour()``
33+
34+
OR
35+
36+
``self.create_tour(theme="introjs")``
37+
38+
39+
### Adding a step to a tour:
40+
2541
To add a tour step, use the following: (Only ``message`` is required. The other args are optional.)
2642

2743
``self.add_tour_step(message, css_selector, title, alignment, theme)``
2844

29-
Here's how you play a tour:
45+
With the ``self.add_tour_step()`` method, you must first pass a message to display. You can then specify a web element to attach to (by using [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp)). If no element is specified, the tour step will tether to the top of the screen by default. You can also add an optional title above the message to display with the tour step, as well as change the theme for that step (Shepherd tours only), and even specify the alignment (which is the side of the element that you want the tour message to tether to).
3046

31-
``self.play_tour(interval)``
3247

33-
With the ``create_tour()`` method, you can pass a default theme to change the look & feel of the tour steps. Valid themes for Shepherd Tours are ``dark``, ``light`` / ``arrows``, ``default``, ``square``, and ``square-dark``.
48+
### Playing a tour:
49+
50+
You can play a tour by calling:
51+
52+
``self.play_tour(interval)``
3453

35-
With the ``self.add_tour_step()`` method, you must first pass a message to display. You can then specify a web element to attach to (by using [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp)). If no element is specified, the tour step will tether to the top of the screen by default. You can also add an optional title above the message to display with the tour step, as well as change the theme for that step, and even specify the alignment (which is the side of the element that you want the tour message to tether to).
54+
If you specify an interval (optional), the tour will automatically walk through each step after that many seconds have passed.
3655

37-
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.
3856

3957
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.
4058

@@ -63,7 +81,7 @@ class MyTourClass(BaseCase):
6381
self.add_tour_step(
6482
"Then click here to search.", 'input[value="Google Search"]')
6583
self.add_tour_step(
66-
"Or press [ENTER] after typing.", '[title="Search"]', theme="dark")
84+
"Or press [ENTER] after typing a query here.", '[title="Search"]')
6785
self.play_tour()
6886
```
6987

@@ -72,9 +90,3 @@ class MyTourClass(BaseCase):
7290
```bash
7391
pytest google_tour.py
7492
```
75-
76-
#### There's also the Bootstrap Google Tour, which you can play with the following command:
77-
78-
```bash
79-
pytest bootstrap_google_tour.py
80-
```

0 commit comments

Comments
 (0)