Update the docs

Author: mdmintz

README.md

@@ -31,11 +31,11 @@
 <br />
 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/method_summary.md">📚 API</a> |
 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/examples/example_logs/ReadMe.md">📊 Reports</a> |
-<a href="https://github.com/seleniumbase/SeleniumBase/tree/master/examples/boilerplates">♻️ Boilerplates</a> |
+<a href="https://github.com/seleniumbase/SeleniumBase/tree/master/examples/boilerplates">♻️ Boilerplate</a> |
 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/syntax_formats.md">🔠 Syntaxes</a> |
-<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/locale_codes.md">🗾 Locales</a> |
-<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/seleniumbase/utilities/selenium_grid/ReadMe.md">🌐 Grid</a> |
-<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/seleniumbase/utilities/selenium_ide/ReadMe.md">⏺️ Record</a>
+<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md">⏺️ Recorder</a> |
+<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/locale_codes.md">🗾 Locale</a> |
+<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/seleniumbase/utilities/selenium_grid/ReadMe.md">🌐 Grid</a>
 <br />
 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/integrations/github/workflows/ReadMe.md">🤖 CI</a> |
 <a href="https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/translations.md">🌏 Translate</a> |
@@ -108,7 +108,7 @@ pip install -e .  # Editable install
 
 > (When using a virtual env, the Editable install is faster.)
 
-🔵 You can also install ``seleniumbase`` from [pypi](https://pypi.python.org/pypi/seleniumbase):
+🔵 You can also install ``seleniumbase`` from [pypi](https://pypi.org/project/seleniumbase/):
 
 ```bash
 pip install seleniumbase
@@ -379,6 +379,7 @@ The code above will leave your browser window open in case there's a failure. (i
 --ad-block  # (Block some types of display ads after page loads.)
 --block-images  # (Block images from loading during tests.)
 --verify-delay=SECONDS  # (The delay before MasterQA verification checks.)
+--recorder  # (Enables the Recorder for turning browser actions into code.)
 --disable-csp  # (Disable the Content Security Policy of websites.)
 --disable-ws  # (Disable Web Security on Chromium-based browsers.)
 --enable-ws  # (Enable Web Security on Chromium-based browsers.)

help_docs/ReadMe.md

@@ -29,7 +29,7 @@
 <a href="https://seleniumbase.io/help_docs/translations/">🌏 Translate</a> |
 <a href="https://seleniumbase.io/examples/dialog_boxes/ReadMe/">🛂 DialogBoxes</a>
 <br />
-<a href="https://seleniumbase.io/seleniumbase/utilities/selenium_ide/ReadMe/">⏺️ Recorder</a> |
+<a href="https://seleniumbase.io/help_docs/recorder_mode.md">⏺️ Recorder</a> |
 <a href="https://github.com/seleniumbase/SeleniumBase/tree/master/integrations/node_js">🏃 NodeRunner</a>
 <br />
 <a href="https://seleniumbase.io/examples/presenter/ReadMe/">📰 Presenter</a> |
@@ -75,6 +75,7 @@
 <div><a href="https://seleniumbase.io/tinymce/"><b>TinyMCE Demo Page</b></a></div>
 <div><a href="https://seleniumbase.io/devices/"><b>Virtual Device Farm</b></a></div>
 <div><a href="https://seleniumbase.io/error_page/"><b>Error Page for Tests</b></a></div>
+<div><a href="https://seleniumbase.io/other/drag_and_drop"><b>Drag-&-Drop Test Page</b></a></div>
 <div><a href="https://seleniumbase.io/other/presenter.html"><b>Presenter Demo</b></a></div>
 <div><a href="https://seleniumbase.io/other/core_presentation.html"><b>Core Presentation</b></a></div>
 <div><a href="https://seleniumbase.io/other/chart_presentation.html"><b>Chart Maker Demo</b></a></div>

help_docs/customizing_test_runs.md

@@ -140,6 +140,7 @@ SeleniumBase provides additional ``pytest`` command-line options for tests:
 --ad-block  # (Block some types of display ads after page loads.)
 --block-images  # (Block images from loading during tests.)
 --verify-delay=SECONDS  # (The delay before MasterQA verification checks.)
+--recorder  # (Enables the Recorder for turning browser actions into code.)
 --disable-csp  # (Disable the Content Security Policy of websites.)
 --disable-ws  # (Disable Web Security on Chromium-based browsers.)
 --enable-ws  # (Enable Web Security on Chromium-based browsers.)

help_docs/features_list.md

@@ -20,6 +20,7 @@
 * Can run tests through an authenticated proxy server. (``--proxy=USER:PASS@HOST:PORT``)
 * Can run tests with a customized browser user agent. (``--agent=USER_AGENT_STRING``)
 * Can set a Chromium User Data Directory/Profile to load. (``--user_data_dir=DIR``)
+* Has [Recorder Mode](https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md) for generating scripts from recorded actions. (``--recorder``)
 * Can load Chrome Extension ZIP files. (``--extension_zip=ZIP``)
 * Can load Chrome Extension folders. (``--extension_dir=DIR``)
 * Powerful [console scripts](https://github.com/seleniumbase/SeleniumBase/blob/master/seleniumbase/console_scripts/ReadMe.md). (Type **``seleniumbase``** or **``sbase``** to use.)

help_docs/install.md

@@ -1,37 +1,39 @@
-[<img src="https://seleniumbase.io/cdn/img/sb_logo_b.png" title="SeleniumBase" width="360">](https://github.com/seleniumbase/SeleniumBase/blob/master/README.md)
+<a href="https://github.com/seleniumbase/SeleniumBase/blob/master/README.md"><img src="https://seleniumbase.io/cdn/img/sb_logo_b.png" alt="SeleniumBase" title="SeleniumBase" width="360" /></a>
 
 <h2><img src="https://seleniumbase.io/img/logo6.png" title="SeleniumBase" width="32" /> Installation</h2>
 
-#### If installing SeleniumBase directly from [PyPI](https://pypi.python.org/pypi/seleniumbase), (the Python Package Index), use:
+<h4>If installing SeleniumBase directly from <a href="https://pypi.python.org/pypi/seleniumbase">PyPI</a>, (the Python Package Index), use:
 
 ```bash
 pip install seleniumbase
 ```
 
-#### If installing SeleniumBase from a Git clone, use:
+<h4>If installing SeleniumBase from a Git clone, use:</h4>
 
 ```bash
 git clone https://github.com/seleniumbase/SeleniumBase.git
 cd SeleniumBase/
 pip install .
 ```
 
-#### For a development mode install in editable mode, use:
+<h4>For a development mode install in editable mode, use:</h4>
 
 ```bash
 git clone https://github.com/seleniumbase/SeleniumBase.git
 cd SeleniumBase/
 pip install -e .
 ```
 
-#### If installing SeleniumBase from a [GitHub branch](https://github.com/seleniumbase/SeleniumBase), use:
+<h4>If installing SeleniumBase from a <a href="https://github.com/seleniumbase/SeleniumBase">GitHub branch</a>, use:</h4>
 
 ```bash
 pip install git+https://github.com/seleniumbase/SeleniumBase.git@master#egg=seleniumbase
 ```
 
-#### Useful ``pip`` options include:
-* Add ``--upgrade`` OR ``-U`` to upgrade an installation.
-* Add ``--force-reinstall`` for a clean install.
+<h3><code>pip install</code> can be customized:</h3>
 
-(If you're not using a virtual environment, you may need to add ``--user`` to your ``pip`` command if you're seeing errors during installation.)
+> (Add ``--upgrade`` OR ``-U`` to upgrade an installation.)
+> (Add ``--force-reinstall`` to upgrade dependencies.)
+> (Use ``pip3`` if multiple versions of Python are installed.)
+
+(If you're not using a virtual environment, you may need to add <code>--user</code> to your <code>pip</code> command if you're seeing errors during installation.)

help_docs/locale_codes.md

@@ -3,7 +3,7 @@
 You can specify a Language Locale Code to customize web pages on supported websites. With SeleniumBase you can change the web browser's Locale on the command line by adding:
 
 ```bash
---locale=CODE  # Example: --locale=ru
+pytest --locale=CODE  # Example: --locale=ru
 ```
 
 <h3><img src="https://seleniumbase.io/img/logo6.png" title="SeleniumBase" width="25" /> List of Language Locale Codes:</h3>

help_docs/method_summary.md

@@ -46,6 +46,8 @@ self.refresh_page()
 
 self.get_current_url()
 
+self.get_origin()
+
 self.get_page_source()
 
 self.get_title()
@@ -61,6 +63,8 @@ self.go_forward()
 
 self.open_start_page()
 
+self.open_if_not_url(url)
+
 self.is_element_present(selector, by=By.CSS_SELECTOR)
 
 self.is_element_visible(selector, by=By.CSS_SELECTOR)
@@ -120,6 +124,8 @@ self.click_nth_visible_element(selector, number, by=By.CSS_SELECTOR, timeout=Non
 
 self.click_if_visible(selector, by=By.CSS_SELECTOR)
 
+self.click_active_element()
+
 self.is_selected(selector, by=By.CSS_SELECTOR, timeout=None)
 # Duplicates: self.is_checked(selector, by=By.CSS_SELECTOR, timeout=None)
 
@@ -241,6 +247,8 @@ self.activate_design_mode()
 
 self.deactivate_design_mode()
 
+self.activate_recorder()
+
 self.activate_jquery()
 
 self.bring_to_front(selector, by=By.CSS_SELECTOR)

help_docs/mobile_testing.md

@@ -1,4 +1,4 @@
-<p align="center"><a href="https://github.com/seleniumbase/SeleniumBase/blob/master/README.md"><img src="https://seleniumbase.io/cdn/img/sb_text_f.png" alt="SeleniumBase" title="SeleniumBase" width="290" /></a></p>
+<p align="center"><a href="https://github.com/seleniumbase/SeleniumBase/"><img src="https://seleniumbase.io/cdn/img/sb_text_f.png" alt="SeleniumBase" title="SeleniumBase" width="290" /></a></p>
 
 <h2><img src="https://seleniumbase.io/img/sb_icon.png" title="SeleniumBase" width="30" /> Mobile Testing</h2>
 

help_docs/recorder_mode.md

@@ -0,0 +1,58 @@
+[<img src="https://seleniumbase.io/cdn/img/super_logo_sb.png" title="SeleniumBase" width="296">](https://github.com/seleniumbase/SeleniumBase/blob/master/README.md)
+
+<h2><img src="https://seleniumbase.io/img/logo6.png" title="SeleniumBase" width="32" /> Recorder Mode</h2>
+
+SeleniumBase <b>Recorder Mode</b> gives you the power to create automation scripts from manual browser actions.<br>(<i>Only Chromium browsers such as Chrome and Edge are supported.</i>)
+
+<img src="https://seleniumbase.io/cdn/img/sb_recorder_notification.png" title="SeleniumBase" width="380">
+
+To activate Recorder Mode, add ``--recorder`` to your ``pytest`` run command when running an existing test:
+
+```bash
+pytest TEST_NAME.py --recorder
+```
+
+In order to add actions to the test being run, you'll need to create a breakpoint somewhere inside your test:
+
+```python
+import ipdb; ipdb.set_trace()
+```
+
+Once you've reached the breakpoint, you can take control of the browser and add in any actions that you want recorded. When you are finished recording, type "``c``" on the command-line and press ``[Enter]`` to let the test continue from the breakpoint. After the test completes, a file called ``TEST_NAME_rec.py`` will be automatically created in the ``./recordings`` folder, which will include the actions performed by the test, and the manual actions that you added in. Below is a command-line notification:
+
+```bash
+>>> RECORDING saved to: recordings/my_first_test_rec.py
+*******************************************************
+```
+
+While a recording is in progress, you can hit the ``[ESC]`` key to pause the recording. To resume the recording, you can hit the ``[~`]`` key, which is located directly below the ``[ESC]`` key on most keyboards.
+
+<p>If you want to create a recording from scratch, just run:<br><code>pytest --recorder</code> on a Python file such as this one:
+
+```python
+from seleniumbase import BaseCase
+
+class RecorderTest(BaseCase):
+    def test_recorder(self):
+        import ipdb; ipdb.set_trace()
+```
+
+The above file gives you a basic SeleniumBase file with a breakpoint in it so that you can immediately start recording after you've opened a new web page in the browser.
+
+Recorder Mode works by saving your recorded actions into the browser's ``sessionStorage``. SeleniumBase then reads from the browser's ``sessionStorage`` to take the raw data and generate a full test from it. Keep in mind that ``sessionStorage`` is only present for a website while the browser tab remains on a web page of the same domain/origin. If you leave that domain/origin, the ``sessionStorage`` of that tab will no longer have the raw data that SeleniumBase needs to create a full recording. To compensate for this, all links to web pages of a different domain/origin will automatically open a new tab for you while in Recorder Mode. Additionally, the SeleniumBase ``self.open(URL)`` method will also open a new tab for you in Recorder Mode if the domain/origin is different from the current URL. When the recorded test completes, SeleniumBase will scan the ``sessionStorage`` of all open browser tabs for the data it needs to generate the complete SeleniumBase automation script.
+
+If you just want to record actions on a single URL of a multi-URL test, you can call ``self.activate_recorder()`` from the test instead of using ``pytest --recorder`` from the command-line. When doing so, make sure that the browser tab is still on the same domain/origin at the end of the test, or else SeleniumBase will not have access to the ``sessionStorage`` data that it needs for generating a complete test.
+
+(Note that **same domain/origin** is not the same as **same URL**. Example: ``https://xkcd.com/353/`` and ``https://xkcd.com/1537/`` are two different URLs with the **same domain/origin**. That means that both URLs will share the same ``sessionStorage`` data, and that any changes to ``sessionStorage`` from one URL will carry on to the ``sessionStorage`` of a different URL when the domain/origin is the same. If you want to find out a website's origin during a test, just call: ``self.get_origin()``, which returns the value of ``window.location.origin`` from the browser's console.)
+
+The launch of Recorder Mode has brought a new SeleniumBase method along with it: ``self.open_if_not_url(URL)``. This method will open the URL given if the browser is not currently on that page. This is used as a method in recorded scripts when SeleniumBase detects that a click action has already brought the test to the given page. This method not only prevents an extra page load if not needed, but it also lets people know the current page of the browser at that point in the test.
+
+--------
+
+<div>To learn more about SeleniumBase, check out the Docs Site:</div>
+<a href="https://seleniumbase.io">
+<img src="https://img.shields.io/badge/docs-%20%20SeleniumBase.io-11BBDD.svg" alt="SeleniumBase.io Docs" /></a>
+
+<div>All the code is on GitHub:</div>
+<a href="https://github.com/seleniumbase/SeleniumBase">
+<img src="https://img.shields.io/badge/✅%20💛%20View%20Code-on%20GitHub%20🌎%20🚀-02A79E.svg" alt="SeleniumBase on GitHub" /></a>

integrations/katalon/ReadMe.md

@@ -1,6 +1,10 @@
-## Converting Katalon/Selenium IDE recordings into SeleniumBase test scripts
+### Converting Katalon recordings into SeleniumBase test scripts
 
-[Katalon Recorder / Selenium IDE](https://www.katalon.com/resources-center/blog/katalon-automation-recorder/) is a tool that allows you to record and playback actions performed inside a web browser. It's available as a [downloadable Chrome extension](https://chrome.google.com/webstore/detail/katalon-recorder-selenium/ljdobmomdgdljniojadhoplhkpialdid) and a [downloadable Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/katalon-automation-record/). The Katalon Recorder comes with an option to export recordings as various WebDriver test scripts, one of which is ``Python 2 (WebDriver + unittest)``. Unfortunately, these natively-exported scripts can be very messy and don't always run reliably. The purpose of this converter is to clean up and improve the scripts so that they can be used in production-level environments.
+### (NOTE: **[SeleniumBase now has Recorder Mode](https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md)**, which is recommended over other record & playback tools.)
+
+--------
+
+Katalon Recorder (Selenium IDE) is a tool that allows you to record and playback actions performed inside a web browser. It's available as a [downloadable Chrome extension](https://chrome.google.com/webstore/detail/katalon-recorder-selenium/ljdobmomdgdljniojadhoplhkpialdid) and a [downloadable Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/katalon-automation-record/). The Katalon Recorder comes with an option to export recordings as various WebDriver test scripts, one of which is ``Python 2 (WebDriver + unittest)``. Unfortunately, these natively-exported scripts can be very messy and don't always run reliably. The purpose of this converter is to clean up and improve the scripts so that they can be used in production-level environments.
 
 #### Step 1: Make a recording with the Katalon Recorder
 
@@ -12,8 +16,8 @@
 
 #### Step 3: Run ``seleniumbase convert`` on your exported Python file
 
-```
-seleniumbase convert [MY_TEST.py]
+```bash
+seleniumbase convert MY_TEST.py
 ```
 
 * You should see a [MY_TEST_SB.py] file appear in the folder. (``_SB`` is added to the file name so that the original file stays intact in case you still need it.) This new clean & reliable SeleniumBase test script is ready to be added into your test suite for running.

integrations/selenium_ide/ReadMe.md

@@ -1,19 +1,23 @@
-## Converting Katalon recordings into SeleniumBase test scripts
+### Converting Katalon recordings into SeleniumBase test scripts
+
+### (NOTE: **[SeleniumBase now has Recorder Mode](https://github.com/seleniumbase/SeleniumBase/blob/master/help_docs/recorder_mode.md)**, which is recommended over other record & playback tools.)
+
+--------
 
 Katalon Recorder (Selenium IDE) is a tool that allows you to record and playback actions performed inside a web browser. It's available as a [downloadable Chrome extension](https://chrome.google.com/webstore/detail/katalon-recorder-selenium/ljdobmomdgdljniojadhoplhkpialdid) and a [downloadable Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/katalon-automation-record/). The Katalon Recorder comes with an option to export recordings as various WebDriver test scripts, one of which is ``Python 2 (WebDriver + unittest)``. Unfortunately, these natively-exported scripts can be very messy and don't always run reliably. The purpose of this converter is to clean up and improve the scripts so that they can be used in production-level environments.
 
-### Step 1: Make a recording with the Katalon Recorder
+#### Step 1: Make a recording with the Katalon Recorder
 
 ![](https://seleniumbase.io/cdn/img/katalon_recorder_2.png "Katalon Recorder example")
 
-### Step 2: Export your recording as a Python 2 Webdriver script
+#### Step 2: Export your recording as a Python 2 Webdriver script
 
 * ``{} Export`` => ``Python 2 (WebDriver + unittest)`` => ``Save As File``
 
-### Step 3: Run ``seleniumbase convert`` on your exported Python file
+#### Step 3: Run ``seleniumbase convert`` on your exported Python file
 
-```
-seleniumbase convert [MY_TEST.py]
+```bash
+seleniumbase convert MY_TEST.py
 ```
 
 * You should see a [MY_TEST_SB.py] file appear in the folder. (``_SB`` is added to the file name so that the original file stays intact in case you still need it.) This new clean & reliable SeleniumBase test script is ready to be added into your test suite for running.