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:

defadd_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:

defadd_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: