SeleniumBase/help_docs/js_package_manager.md

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)

🎞️ (Presentation Maker)

📊 (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:

↕️ (Example: dialog_box_tour.py) ↕️

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:

All the code is on GitHub: