Skip to content

Commit f55a6a5

Browse files
committed
Update the docs
1 parent 4bf98f3 commit f55a6a5

File tree

4 files changed

+47
-20
lines changed

4 files changed

+47
-20
lines changed

README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta property="og:image" content="https://seleniumbase.io/cdn/img/mac_sb_logo_5.png" />
66
<link rel="icon" href="https://seleniumbase.io/img/logo6.png" />
77

8-
<h2 align="center"><a href="https://github.com/seleniumbase/SeleniumBase/"><img src="https://seleniumbase.io/cdn/img/sb_banner_t.png" alt="SeleniumBase" title="SeleniumBase" width="590" /></a></h2>
9-
<h4 align="center">Create web & mobile tests 10x faster.</h4>
8+
<h2 align="center"><a href="https://github.com/seleniumbase/SeleniumBase/"><img src="https://seleniumbase.io/cdn/img/sb_banner_t.png" alt="SeleniumBase" title="SeleniumBase" width="530" /></a></h2>
9+
<h4 align="center">Create web and mobile tests faster.</h4>
1010
<p align="center"><a href="https://github.com/seleniumbase/SeleniumBase/releases">
1111
<img src="https://img.shields.io/github/v/release/seleniumbase/SeleniumBase.svg?color=2277EE" alt="Latest Release on GitHub" /></a> <a href="https://pypi.org/project/seleniumbase/">
1212
<img src="https://img.shields.io/pypi/v/seleniumbase.svg?color=00a0e0" alt="Latest Release on PyPI" /></a> <a href="https://pepy.tech/project/seleniumbase">
@@ -18,7 +18,7 @@
1818
<img src="https://badges.gitter.im/seleniumbase/SeleniumBase.svg" alt="SeleniumBase" /></a> <a href="https://seleniumbase.io">
1919
<img src="https://img.shields.io/badge/docs-%20seleniumbase.io-22BBAA.svg" alt="SeleniumBase.io Docs" /></a></p>
2020

21-
<p align="center">SeleniumBase is a complete framework for web automation & end-to-end testing with <a href="https://docs.pytest.org/en/latest/index.html">pytest</a>.<br />The API simplifies <a href="https://www.selenium.dev/documentation/">Selenium</a>'s out-of-the-box API, which leads to more maintainable test code. <br />SeleniumBase includes advanced features such as a realtime <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/example_logs/ReadMe.md">Dashboard</a>, a <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md">Recorder</a>, & more.</p>
21+
<p align="center">SeleniumBase is a complete framework for browser automation and testing with <a href="https://docs.pytest.org/en/latest/index.html">pytest</a>.<br />The API simplifies <a href="https://www.selenium.dev/documentation/">Selenium</a>'s out-of-the-box API, which leads to more maintainable code. <br />Includes advanced features such as the <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/example_logs/ReadMe.md">Dashboard</a>, a <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md">Recorder</a>, and <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/js_package_manager.md">JS code generators</a>.</p>
2222

2323
<p align="center">
2424
<a href="#python_installation">🚀 Start</a> |

examples/dialog_boxes/ReadMe.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ SeleniumBase Dialog Boxes let your users provide input in the middle of automati
77
* This feature utilizes the [jquery-confirm](https://craftpip.github.io/jquery-confirm/) library.
88
* A Python API is used to call the JavaScript API.
99

10-
<img src="https://seleniumbase.io/cdn/img/emoji_sports_dialog.png" alt="SeleniumBase" width="440" />
10+
<img src="https://seleniumbase.io/cdn/img/emoji_sports_dialog.png" alt="SeleniumBase" width="400" />
1111

1212
<h4>↕️ (<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/dialog_boxes/dialog_box_tour.py">Example: dialog_box_tour.py</a>) ↕️</h4>
1313

14-
<img src="https://seleniumbase.io/cdn/gif/sports_dialog.gif" alt="SeleniumBase" width="440" />
14+
<img src="https://seleniumbase.io/cdn/gif/sports_dialog.gif" alt="SeleniumBase" width="400" />
1515

1616
<h4>Here's how to run that example:</h4>
1717

examples/tour_examples/ReadMe.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ SeleniumBase Tours utilize 5 JavaScript libraries for creating interactive walkt
66

77
<b>Example tour: (with autoplay)</b>
88

9-
<img src="https://seleniumbase.io/cdn/gif/driverjs_tour.gif" title="SeleniumBase Tour of Google"><br>
9+
<img src="https://seleniumbase.io/cdn/gif/introjs_tour.gif" title="SeleniumBase Tour of Google"><br>
1010

11-
[SeleniumBase driverjs_maps_tour.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/driverjs_maps_tour.py)
11+
[SeleniumBase maps_introjs_tour.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/maps_introjs_tour.py)
1212

1313
```bash
1414
cd examples/tour_examples
15-
pytest driverjs_maps_tour.py
15+
pytest maps_introjs_tour.py --interval=1
1616
```
1717

1818
<b>Here's a longer example:</b>

help_docs/js_package_manager.md

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
[<img src="https://seleniumbase.io/cdn/img/sb_logo_10t.png" title="SeleniumBase" width="220">](https://github.com/seleniumbase/SeleniumBase/)
22

3-
<h2><img src="https://seleniumbase.io/img/logo6.png" title="SeleniumBase" width="32" /> JS Package Manager</h2>
3+
<h2><img src="https://seleniumbase.io/img/logo6.png" title="SeleniumBase" width="32" /> JS Package Manager and Code Generators</h2>
44

55
<div>SeleniumBase lets you load JavaScript packages from any CDN link into any website.</div>
6-
<p><div>Here's an example of loading a website-tour library into the browser while visiting Google:</div></p>
76

8-
<img src="https://seleniumbase.io/cdn/gif/driverjs_tour.gif" title="SeleniumBase Tour of Google" /><br />
7+
<p><div>In addition to loading JS packages, SeleniumBase also lets you generate JS code from Python so that you can use these packages more easily.</div></p>
98

10-
This example, ([google_tour.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/google_tour.py) from the SeleniumBase ``examples/tour_examples/`` folder), can be run with ``pytest`` after you've cloned and installed [SeleniumBase from GitHub](https://github.com/seleniumbase/SeleniumBase):
9+
<p><div>Here's an example of loading a website-tour library into the browser for a Google Maps tour:</div></p>
10+
11+
<img src="https://seleniumbase.io/cdn/gif/introjs_tour.gif" title="SeleniumBase Tour of Google" /><br />
12+
13+
This example, ([maps_introjs_tour.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/maps_introjs_tour.py) from the SeleniumBase ``examples/tour_examples/`` folder), can be run with ``pytest`` after you've cloned and installed [SeleniumBase from GitHub](https://github.com/seleniumbase/SeleniumBase): (The ``--interval=1`` makes the tour go automatically to the next step after 1 second.)
1114

1215
```bash
13-
pytest google_tour.py
16+
cd examples/tour_examples
17+
pytest maps_introjs_tour.py --interval=1
18+
```
19+
20+
<p>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 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/maps_introjs_tour.py">maps_introjs_tour.py</a> that expands into a lot of JavaScript.)</p>
21+
22+
```python
23+
self.open("https://www.google.com/maps/@42.3591234,-71.0915634,15z")
24+
self.create_tour(theme="introjs")
25+
self.add_tour_step("Welcome to Google Maps!", title="SeleniumBase Tours")
26+
self.add_tour_step("Enter Location", "#searchboxinput", title="Search Box")
27+
self.add_tour_step("See it", "#searchbox-searchbutton", alignment="bottom")
28+
self.add_tour_step("Thanks for using Tours!", title="End of Guided Tour")
29+
self.export_tour(filename="maps_introjs_tour.js")
30+
self.play_tour()
1431
```
1532

16-
<div>Since a CDN is used for holding packages, you no longer need to use other package managers such as NPM, Bower, or Yarn.</div>
17-
<p><div>Here's the Python code for loading JS packages into the web browser with SeleniumBase:</div></p>
33+
<p><div>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:</div></p>
1834

1935
```python
2036
self.add_js_link(js_link)
@@ -28,7 +44,7 @@ self.add_js_link("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.mi
2844

2945
<div>You can load any JS package this way as long as you know the URL.</div>
3046

31-
If you're wondering how SeleniumBase does this, here's the full Python code, which uses WebDriver's ``execute_script()`` method for making JS calls after escaping quotes:
47+
If you're wondering how SeleniumBase does this, here's the full Python code from [js_utils.py](https://github.com/seleniumbase/SeleniumBase/blob/master/seleniumbase/fixtures/js_utils.py), which uses WebDriver's ``execute_script()`` method for making JS calls after escaping quotes with backslashes as needed:
3248

3349
```python
3450
def add_js_link(driver, js_link):
@@ -79,14 +95,25 @@ def add_css_link(driver, css_link):
7995
driver.execute_script(script_to_add_css % css_link)
8096
```
8197

82-
<div>Website tours are just one of the many ways of using the SeleniumBase JS Package Manager.</div>
98+
<div>Website tours are just one of the many uses of the JS Package Manager.</div>
8399
<p><div>The following example shows the <a href="https://github.com/craftpip/jquery-confirm">JqueryConfirm</a> package loaded into a website for creating fancy dialog boxes:</div></p>
84100

85-
<img src="https://seleniumbase.io/cdn/gif/masterqa6.gif" alt="MasterQA by SeleniumBase" title="MasterQA by SeleniumBase" /><br />
101+
<img src="https://seleniumbase.io/cdn/img/emoji_sports_dialog.png" alt="SeleniumBase" width="400" />
102+
103+
<h4>↕️ (<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/dialog_boxes/dialog_box_tour.py">Example: dialog_box_tour.py</a>) ↕️</h4>
104+
105+
<img src="https://seleniumbase.io/cdn/gif/sports_dialog.gif" alt="SeleniumBase" width="400" />
106+
107+
<h4>Here's how to run that example:</h4>
108+
109+
```bash
110+
cd examples/dialog_boxes
111+
pytest test_dialog_boxes.py
112+
```
86113

87-
<p><div>(Example from <a href="https://seleniumbase.io/examples/master_qa/ReadMe/">SeleniumBase's MasterQA ReadMe</a>)</div></p>
114+
<p><div>(Example from the <a href="https://seleniumbase.io/examples/dialog_boxes/ReadMe/">Dialog Boxes ReadMe</a>)</div></p>
88115

89-
<div>Since packages are loaded directly from a CDN, such as <a href="https://cdnjs.com/">CloudFlare's cdnjs</a>, there's no need to use NPM, Bower, Yarn, or other package managers to get the packages that you need into the websites that you want.</div>
116+
<div>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.</div>
90117

91118
--------
92119

0 commit comments

Comments
 (0)