Skip to content

JS Package Manager

JS Package Manager and Code Generators

πŸ•ΉοΈ SeleniumBase lets you load JavaScript packages from any CDN link into any website via Python.

🎨 The following SeleniumBase solutions utilize this feature:

🎦 (Demo Mode) - 🚎 (Website Tours) - 🎞️ (Presenter) - πŸ“Š (Chart Maker / Dashboard) - πŸ›‚ (Dialog Boxes / MasterQA)


πŸ—ΊοΈ Here's an example of loading a website-tour library into the browser for a Google Maps tour:


πŸ—ΊοΈ This example is from maps_introjs_tour.py. (The --interval=1 makes the tour go automatically to the next step after 1 second.)

cd examples/tour_examples
pytest maps_introjs_tour.py --interval=1

πŸ•ΉοΈ SeleniumBase includes powerful JS code generators for converting Python into JavaScript for using the supported JS packages. A few lines of Python in your tests might generate hundreds of lines of JavaScript.

πŸ—ΊοΈ Here is some tour code in Python from maps_introjs_tour.py that expands into a lot of JavaScript.

self.open("https://www.google.com/maps/@42.3591234,-71.0915634,15z")
self.create_tour(theme="introjs")
self.add_tour_step("Welcome to Google Maps!", title="SeleniumBase Tours")
self.add_tour_step("Enter Location", "#searchboxinput", title="Search Box")
self.add_tour_step("See it", "#searchbox-searchbutton", alignment="bottom")
self.add_tour_step("Thanks for using Tours!", title="End of Guided Tour")
self.export_tour(filename="maps_introjs_tour.js")
self.play_tour()

πŸ•ΉοΈ For existing features, SeleniumBase already takes care of loading all the necessary JS and CSS files into the web browser. To load other packages, here are a few useful methods that you should know about:

self.add_js_link(js_link)

πŸ•ΉοΈ This example loads the IntroJS JavaScript library:

self.add_js_link("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js")
πŸ•ΉοΈ You can load any JS package this way as long as you know the URL.

πŸ•ΉοΈ If you're wondering how SeleniumBase does this, here's the full Python code from js_utils.py, which uses WebDriver's execute_script() method for making JS calls after escaping quotes with backslashes as needed:

def add_js_link(driver, js_link):
    script_to_add_js = (
        """function injectJS(link) {
              var body = document.getElementsByTagName("body")[0];
              var script = document.createElement("script");
              script.src = link;
              script.defer;
              script.type="text/javascript";
              script.crossorigin = "anonymous";
              script.onload = function() { null };
              body.appendChild(script);
           }
           injectJS("%s");""")
    js_link = escape_quotes_if_needed(js_link)
    driver.execute_script(script_to_add_js % js_link)

πŸ•ΉοΈ Now that you've loaded JavaScript into the browser, you may also want to load some CSS to go along with it:

self.add_css_link(css_link)

πŸ•ΉοΈ Here's code that loads the IntroJS CSS:

self.add_css_link("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css")

πŸ•ΉοΈ And here's the Python WebDriver code that makes this possible:

def add_css_link(driver, css_link):
    script_to_add_css = (
        """function injectCSS(css) {
              var head = document.getElementsByTagName("head")[0];
              var link = document.createElement("link");
              link.rel = "stylesheet";
              link.type = "text/css";
              link.href = css;
              link.crossorigin = "anonymous";
              head.appendChild(link);
           }
           injectCSS("%s");""")
    css_link = escape_quotes_if_needed(css_link)
    driver.execute_script(script_to_add_css % css_link)
πŸ•ΉοΈ Website tours are just one of the many uses of the JS Package Manager.

πŸ›‚ The following example shows the JqueryConfirm package loaded into a website for creating fancy dialog boxes:

SeleniumBase

↕️ (Example: dialog_box_tour.py) ↕️

SeleniumBase

Here's how to run that example:

cd examples/dialog_boxes
pytest test_dialog_boxes.py

(Example from the Dialog Boxes ReadMe)

πŸ•ΉοΈ Since packages are loaded directly from a CDN link, you won't need other package managers like NPM, Bower, or Yarn to get the packages that you need into the websites that you want.

To learn more about SeleniumBase, check out the Docs Site:

SeleniumBase.io Docs

All the code is on GitHub:

SeleniumBase on GitHub

🚎 If you're only interested in creating website tours with SeleniumBase, here's the link to the Website Tours ReadMe.