f00ca7f Oct 8, 2018
1 contributor

Users who have contributed to this file

executable file 112 lines (63 sloc) 4.46 KB

SeleniumBase Website Tours

SeleniumBase Tours utilize your choice of 4 different Javascript libraries for creating & running tours, demos, and walkthroughs on any website: Shepherd, Bootstrap Tour, IntroJS, and Hopscotch. Choose your favorite one to use!

Example tour:

Creating a new tour:

By default, Shepherd JS is used when creating a tour with:


You can also do:


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.

To create a tour utilizing the Bootstrap Tour Library, you can use either of the following:




To create a tour utilizing the Intro JS Library, you can use either of the following:




To create a tour utilizing the Hopscotch JS Library, you can use either of the following:




Adding a step to a tour:

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)

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). 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).

Playing a tour:

You can play a tour by calling:


If you specify an interval (optional), 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:

from seleniumbase import BaseCase

class MyTourClass(BaseCase):

    def test_google_tour(self):'')

            "Click to begin the Google Tour!", title="SeleniumBase Tours")
            "Type in your search query here.", 'input[title="Search"]')

        self.highlight_update_text('input[title="Search"]', "Google")
        self.wait_for_element('[role="listbox"]')  # Wait for autocomplete

            "Then click here to search.", 'input[value="Google Search"]')
            "Or press [ENTER] after typing a query here.", '[title="Search"]')

This example was taken from, which you can run from the examples/tour_examples folder with the following command:


Exporting a Tour:

If you want to save the tour you created as a Javascript file, use:



self.export_tour(name=None, filename="my_tour.js")

(name is optional, needed only if you were creating multiple tours at once. filename is the name of the file to save the Javascript to.) Once you've exported your tour, you can use it outside of SeleniumBase. You can even copy the tour's Javascript code to the Console of your web browser to play the tour from there (you need to be on the correct web page for it to work).