Skip to content

Commit 6ae43d1

Browse files
authored
Merge pull request #214 from seleniumbase/hopscotch-tours
Add ability to create & run Hopscotch JS tours with SeleniumBase
2 parents 529dbfc + 92f6dac commit 6ae43d1

File tree

11 files changed

+358
-4
lines changed

11 files changed

+358
-4
lines changed

examples/tour_examples/ReadMe.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## SeleniumBase Website Tours
22

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

55
Example tour:
66

@@ -35,6 +35,13 @@ OR
3535

3636
``self.create_tour(theme="introjs")``
3737

38+
To create a tour utilizing the Hopscotch JS Library, you can use either of the following:
39+
40+
``self.create_hopscotch_tour()``
41+
42+
OR
43+
44+
``self.create_tour(theme="hopscotch")``
3845

3946
### Adding a step to a tour:
4047

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
from seleniumbase import BaseCase
2+
3+
4+
class MyTourClass(BaseCase):
5+
6+
def test_google_tour(self):
7+
self.open('https://google.com')
8+
self.wait_for_element('input[title="Search"]')
9+
10+
self.create_hopscotch_tour() # OR self.create_tour(theme="hopscotch")
11+
self.add_tour_step(
12+
"Click to begin the Google Tour!", title="SeleniumBase Tours")
13+
self.add_tour_step(
14+
"Type in your search query here.", 'input[title="Search"]')
15+
self.play_tour()
16+
17+
self.highlight_update_text('input[title="Search"]', "Google")
18+
self.wait_for_element('[role="listbox"]') # Wait for autocomplete
19+
20+
self.create_hopscotch_tour()
21+
self.add_tour_step(
22+
"Then click here to search.", 'input[value="Google Search"]')
23+
self.add_tour_step(
24+
"Or press [ENTER] after typing a query here.", '[title="Search"]')
25+
self.play_tour()
26+
27+
self.highlight_update_text('input[title="Search"]', "GitHub\n")
28+
self.wait_for_element("#search")
29+
30+
self.create_hopscotch_tour()
31+
self.add_tour_step(
32+
"Search results appear here!", title="(5-second autoplay on)")
33+
self.add_tour_step("Let's take another tour:")
34+
self.play_tour(interval=5) # Tour automatically continues after 5 sec
35+
36+
self.open("https://www.google.com/maps/@42.3598616,-71.0912631,15z")
37+
self.wait_for_element('input#searchboxinput')
38+
39+
self.create_hopscotch_tour()
40+
self.add_tour_step("Welcome to Google Maps!")
41+
self.add_tour_step(
42+
"Type in a location here.", "#searchboxinput", title="Search Box")
43+
self.add_tour_step(
44+
"Then click here to show it on the map.",
45+
"#searchbox-searchbutton", alignment="bottom")
46+
self.add_tour_step(
47+
"Or click here to get driving directions.",
48+
"#searchbox-directions", alignment="bottom")
49+
self.add_tour_step(
50+
"Use this button to switch to Satellite view.",
51+
"div.widget-minimap", alignment="right")
52+
self.add_tour_step(
53+
"Click here to zoom in.", "#widget-zoom-in", alignment="left")
54+
self.add_tour_step(
55+
"Or click here to zoom out.", "#widget-zoom-out", alignment="left")
56+
self.add_tour_step(
57+
"Use the Menu button to see more options.",
58+
".searchbox-hamburger-container", alignment="right")
59+
self.add_tour_step(
60+
"Or click here to see more Google apps.", '[title="Google apps"]',
61+
alignment="left")
62+
self.add_tour_step(
63+
"Thanks for trying out SeleniumBase Tours!",
64+
title="End of Guided Tour")
65+
self.play_tour()

help_docs/method_summary.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,14 @@ self.activate_jquery()
9797

9898
self.create_tour(name=None, theme=None)
9999

100+
self.create_shepherd_tour(name=None, theme=None)
101+
100102
self.create_bootstrap_tour(name=None)
101103

104+
self.create_hopscotch_tour(name=None)
105+
106+
self.create_introjs_tour(name=None)
107+
102108
self.add_tour_step(message, selector=None, name=None,
103109
title=None, theme=None, alignment=None)
104110

seleniumbase/core/browser_launcher.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ def _set_chrome_options(downloads_path, proxy_string):
7979

8080
def _create_firefox_profile(downloads_path, proxy_string):
8181
profile = webdriver.FirefoxProfile()
82+
profile.accept_untrusted_certs = True
8283
profile.set_preference("reader.parse-on-load.enabled", False)
8384
profile.set_preference("pdfjs.disabled", True)
8485
profile.set_preference("app.update.auto", False)

seleniumbase/core/style_sheet.py

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@
126126
});
127127
''')
128128

129+
# Hopscotch Backdrop Style
130+
hops_backdrop_style = (
131+
'''
132+
.hopscotch-bubble-container {
133+
font-size: 110%;
134+
}
135+
''')
136+
129137
# Shepherd Backdrop Style
130138
sh_backdrop_style = (
131139
'''

0 commit comments

Comments
 (0)