Merge pull request #397 from seleniumbase/advanced-javascript-clicking

Advanced JavaScript Clicking

Author: mdmintz

README.md

@@ -6,19 +6,16 @@ All-in-one framework for fast & simple browser automation and end-to-end testing
 
 SeleniumBase uses [pytest](https://github.com/pytest-dev/pytest) for running tests, while using [Selenium WebDriver](https://www.seleniumhq.org/) for controlling web browsers.<br />
 
-Watch [my_first_test.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/my_first_test.py) from [examples/](https://github.com/seleniumbase/SeleniumBase/tree/master/examples) running in demo mode:<br />
-
-<img src="https://cdn2.hubspot.net/hubfs/100006/images/my_first_test_mov4.gif" title="SeleniumBase" />
-
+Run [my_first_test.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/my_first_test.py) in Demo Mode to see test assertions:
 ```bash
-pytest my_first_test.py --demo_mode
+pytest my_first_test.py --demo
 ```
 
-Here's the code of [my_first_test.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/my_first_test.py):
+<img src="https://cdn2.hubspot.net/hubfs/100006/images/my_first_test_mov4.gif" title="SeleniumBase" />
 
-<img src="https://cdn2.hubspot.net/hubfs/100006/images/my_first_test_4.png" title="SeleniumBase" />
+<img src="https://cdn2.hubspot.net/hubfs/100006/images/my_first_test_7.png" title="SeleniumBase" />
 
-SeleniumBase includes additional tools for automated [visual testing](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/visual_testing/ReadMe.md), assisted-QA with [MasterQA](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/master_qa/ReadMe.md), and creating [website tours](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/ReadMe.md).
+SeleniumBase includes tools for automated [visual testing](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/visual_testing/ReadMe.md), assisted-QA with [MasterQA](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/master_qa/ReadMe.md), and creating [website tours](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/tour_examples/ReadMe.md).
 
 ## <img src="https://cdn2.hubspot.net/hubfs/100006/images/super_square_logo_3a.png" title="SeleniumBase" height="32"> Get Started:
 
@@ -162,10 +159,10 @@ With Pytest, a green dot means a test passed. An "F" means a test failed.
 
 <a id="seleniumbase_demo_mode"></a> **Use Demo Mode to help you see what tests are asserting.**
 
-If the example test is moving too fast for your eyes, you can run it in **Demo Mode** by adding ``--demo_mode`` on the command-line, which pauses the browser briefly between actions, highlights page elements being acted on, and lets you know what test assertions are happening in real time:
+If the example test is moving too fast for your eyes, you can run it in **Demo Mode** by adding ``--demo`` on the command-line, which pauses the browser briefly between actions, highlights page elements being acted on, and lets you know what test assertions are happening in real time:
 
 ```bash
-pytest my_first_test.py --demo_mode
+pytest my_first_test.py --demo
 ```
 
 **Pytest** includes test discovery. If you don't specify a specific file or folder to run from, ``pytest`` will search all subdirectories automatically for tests to run based on the following matching criteria:
@@ -221,7 +218,7 @@ SeleniumBase provides additional Pytest command-line options for tests:
 --start_page=URL  # (The starting URL for the web browser when tests begin.)
 --log_path=LOG_PATH  # (The directory where log files get saved to.)
 --archive_logs  # (Archive old log files instead of deleting them.)
---demo_mode  # (The option to visually see test actions as they occur.)
+--demo  # (The option to visually see test actions as they occur.)
 --demo_sleep=SECONDS  # (The option to wait longer after Demo Mode actions.)
 --highlights=NUM  # (Number of highlight animations for Demo Mode actions.)
 --message_duration=SECONDS  # (The time length for Messenger alerts.)

examples/my_first_test.py

@@ -49,7 +49,15 @@ def test_basic(self):
         #    If you don't specify a `timeout`, a default timeout is used.
         #    Default timeouts are configured in seleniumbase/config/settings.py
         #
-        # 3. There's usually more than one way to do the same thing. Ex:
+        # 3. SeleniumBase methods are very versatile. For example,
+        #    self.update_text(SELECTOR, TEXT) does the following:
+        #    * Waits for the element to be visible
+        #    * Waits for the element to be interactive
+        #    * Clears the text field
+        #    * Types in the new text
+        #    * Hits Enter/Submit (if the text ends in "\n")
+        #
+        # 4. There's usually more than one way to do the same thing. Ex:
         #    [
         #        self.assert_text("xkcd: volume 0", "h3")
         #    ]
@@ -74,17 +82,17 @@ def test_basic(self):
         #        title = element.get_attribute("title")
         #    ]
         #
-        # 4. self.assert_exact_text(TEXT) ignores leading and trailing
+        # 5. self.assert_exact_text(TEXT) ignores leading and trailing
         #    whitespace in the TEXT assertion.
         #    So, self.assert_exact_text("Some Text") will find [" Some Text "].
         #
-        # 5. For backwards-compatibilty, some SeleniumBase methods that do the
+        # 6. For backwards-compatibilty, some SeleniumBase methods that do the
         #    same thing have multiple names, kept on from previous versions.
         #    Ex: wait_for_element_visible() is the same as find_element().
         #    Both search for and return the element, and raise an exception if
         #    the element does not appear on the page within the timeout limit.
         #    And assert_element() also does this (minus returning the element).
         #
-        # 6. For the full method list, see one of the following:
+        # 7. For the full method list, see one of the following:
         #    * SeleniumBase/seleniumbase/fixtures/base_case.py
         #    * SeleniumBase/help_docs/method_summary.md

help_docs/method_summary.md

@@ -184,10 +184,14 @@ self.slow_scroll_to(selector, by=By.CSS_SELECTOR)
 
 self.click_xpath(xpath)
 
-self.js_click(selector, by=By.CSS_SELECTOR)
+self.js_click(selector, by=By.CSS_SELECTOR, all_matches=False)
+
+self.js_click_all(selector, by=By.CSS_SELECTOR)
 
 self.jquery_click(selector, by=By.CSS_SELECTOR)
 
+self.jquery_click_all(selector, by=By.CSS_SELECTOR)
+
 self.hide_element(selector, by=By.CSS_SELECTOR)
 
 self.hide_elements(selector, by=By.CSS_SELECTOR)

requirements.txt

@@ -33,7 +33,7 @@ colorama>=0.4.1
 pymysql>=0.9.3
 pyotp>=2.3.0
 boto>=2.49.0
-cffi>=1.13.0
+cffi>=1.13.1
 tqdm>=4.36.1
 flake8>=3.7.8
 certifi>=2019.9.11

seleniumbase/fixtures/base_case.py

@@ -1545,8 +1545,9 @@ def click_xpath(self, xpath):
         # so self.click_xpath() is just a longer name for the same action.
         self.click(xpath, by=By.XPATH)
 
-    def js_click(self, selector, by=By.CSS_SELECTOR):
-        """ Clicks an element using pure JS. Does not use jQuery. """
+    def js_click(self, selector, by=By.CSS_SELECTOR, all_matches=False):
+        """ Clicks an element using pure JS. Does not use jQuery.
+            If "all_matches" is False, only the first match is clicked. """
         selector, by = self.__recalculate_selector(selector, by)
         if by == By.LINK_TEXT:
             message = (
@@ -1566,9 +1567,16 @@ def js_click(self, selector, by=By.CSS_SELECTOR):
         css_selector = self.convert_to_css_selector(selector, by=by)
         css_selector = re.escape(css_selector)
         css_selector = self.__escape_quotes_if_needed(css_selector)
-        self.__js_click(selector, by=by)  # The real "magic" happens here
+        if not all_matches:
+            self.__js_click(selector, by=by)  # The real "magic" happens
+        else:
+            self.__js_click_all(selector, by=by)  # The real "magic" happens
         self.__demo_mode_pause_if_active()
 
+    def js_click_all(self, selector, by=By.CSS_SELECTOR):
+        """ Clicks all matching elements using pure JS. (No jQuery) """
+        self.js_click(selector, by=By.CSS_SELECTOR, all_matches=True)
+
     def jquery_click(self, selector, by=By.CSS_SELECTOR):
         """ Clicks an element using jQuery. Different from using pure JS. """
         selector, by = self.__recalculate_selector(selector, by)
@@ -1582,6 +1590,18 @@ def jquery_click(self, selector, by=By.CSS_SELECTOR):
         self.safe_execute_script(click_script)
         self.__demo_mode_pause_if_active()
 
+    def jquery_click_all(self, selector, by=By.CSS_SELECTOR):
+        """ Clicks all matching elements using jQuery. """
+        selector, by = self.__recalculate_selector(selector, by)
+        self.wait_for_element_present(
+            selector, by=by, timeout=settings.SMALL_TIMEOUT)
+        if self.is_element_visible(selector, by=by):
+            self.__demo_mode_highlight_if_active(selector, by)
+        selector = self.convert_to_css_selector(selector, by=by)
+        click_script = """jQuery('%s').click()""" % selector
+        self.safe_execute_script(click_script)
+        self.__demo_mode_pause_if_active()
+
     def hide_element(self, selector, by=By.CSS_SELECTOR):
         """ Hide the first element on the page that matches the selector. """
         selector, by = self.__recalculate_selector(selector, by)
@@ -1728,7 +1748,7 @@ def choose_file(self, selector, file_path, by=By.CSS_SELECTOR,
             A relative file_path will get converted into an absolute file_path.
 
             Example usage:
-                self.choose_file('input[type="file"], "my_dir/my_file.txt")
+                self.choose_file('input[type="file"]', "my_dir/my_file.txt")
         """
         if self.timeout_multiplier and timeout == settings.LARGE_TIMEOUT:
             timeout = self.__get_new_timeout(timeout)
@@ -3273,6 +3293,27 @@ def __js_click(self, selector, by=By.CSS_SELECTOR):
                   % css_selector)
         self.execute_script(script)
 
+    def __js_click_all(self, selector, by=By.CSS_SELECTOR):
+        """ Clicks all matching elements using pure JS. (No jQuery) """
+        selector, by = self.__recalculate_selector(selector, by)
+        css_selector = self.convert_to_css_selector(selector, by=by)
+        css_selector = re.escape(css_selector)
+        css_selector = self.__escape_quotes_if_needed(css_selector)
+        script = ("""var simulateClick = function (elem) {
+                         var evt = new MouseEvent('click', {
+                             bubbles: true,
+                             cancelable: true,
+                             view: window
+                         });
+                         var canceled = !elem.dispatchEvent(evt);
+                     };
+                     var $elements = document.querySelectorAll('%s');
+                     var index = 0, length = $elements.length;
+                     for(; index < length; index++){
+                     simulateClick($elements[index]);}"""
+                  % css_selector)
+        self.execute_script(script)
+
     def __jquery_click(self, selector, by=By.CSS_SELECTOR):
         """ Clicks an element using jQuery. Different from using pure JS. """
         selector, by = self.__recalculate_selector(selector, by)

setup.py

@@ -45,7 +45,7 @@
 
 setup(
     name='seleniumbase',
-    version='1.32.14',
+    version='1.32.15',
     description='Fast, Easy, and Reliable Browser Automation & Testing.',
     long_description=long_description,
     long_description_content_type='text/markdown',
@@ -116,7 +116,7 @@
         'pymysql>=0.9.3',
         'pyotp>=2.3.0',
         'boto>=2.49.0',
-        'cffi>=1.13.0',
+        'cffi>=1.13.1',
         'tqdm>=4.36.1',
         'flake8>=3.7.8',
         'certifi>=2019.9.11',