Support dropdown keywords (#40)

* Init dropdown keyword and demo

* Add Select dropdown by label

Author: atthaboon

Examples/form-demo.robot

@@ -0,0 +1,30 @@
+*** Settings ***
+Library    Dialogs    
+Library    PuppeteerLibrary
+Test Setup    Open browser to test page    
+Test Teardown    Close Browser
+
+
+*** Variables ***
+${HOME_PAGE_URL}    http://127.0.0.1:7272/form.html
+
+
+*** Test Cases ***
+Select dropdown list by values with id
+    Select From List By Value    id=cars    audi
+    
+Select dropdown list by values with xpath
+    Select From List By Value    xpath=//select[@id="cars"]    audi
+    
+Select dropdown list by labels with id
+    Select From List By Label    id=cars    Audi
+    
+Select dropdown list by labels with xpath
+    Select From List By Label    xpath=//select[@id="cars"]    Audi
+
+*** Keywords ***
+Open browser to test page
+    ${HEADLESS}     Get variable value    ${HEADLESS}    ${False}
+    &{options} =    create dictionary   headless=${HEADLESS}
+    Open browser    ${HOME_PAGE_URL}   options=${options}
+

PuppeteerLibrary/__init__.py

@@ -10,6 +10,8 @@
     AlertKeywordsAsync,
     BrowserManagementKeywords,
     BrowserManagementKeywordsAsync,
+    DropdownKeywords,
+    DropdownKeywordsAsync,
     ElementKeywords,
     ElementKeywordsAsync,
     FormElementKeywords,
@@ -102,6 +104,7 @@ def __init__(self):
         libraries = [
             AlertKeywords(self),
             BrowserManagementKeywords(self),
+            DropdownKeywords(self),
             ElementKeywords(self),
             FormElementKeywords(self),
             JavascriptKeywords(self),
@@ -117,6 +120,7 @@ def __init__(self):
         self.async_libraries = [
             AlertKeywordsAsync(self),
             BrowserManagementKeywordsAsync(self),
+            DropdownKeywordsAsync(self),
             ElementKeywordsAsync(self),
             FormElementKeywordsAsync(self),
             JavascriptKeywordsAsync(self),

PuppeteerLibrary/keywords/__init__.py

@@ -2,6 +2,8 @@
 from .alert_async import AlertKeywordsAsync
 from .browsermanagement import BrowserManagementKeywords
 from .browsermanagement_async import BrowserManagementKeywordsAsync
+from .dropdown import DropdownKeywords
+from .dropdown_async import DropdownKeywordsAsync
 from .element import ElementKeywords
 from .element_async import ElementKeywordsAsync
 from .formelement import FormElementKeywords

PuppeteerLibrary/keywords/dropdown.py

@@ -0,0 +1,18 @@
+from PuppeteerLibrary.base.librarycomponent import LibraryComponent
+from PuppeteerLibrary.base.robotlibcore import keyword
+from PuppeteerLibrary.keywords.dropdown_async import DropdownKeywordsAsync
+
+
+class DropdownKeywords(LibraryComponent):
+
+    def __init__(self, ctx):
+        super().__init__(ctx)
+        self.async_func = DropdownKeywordsAsync(self.ctx)
+
+    @keyword
+    def select_from_list_by_value(self, locator, values):
+        return self.loop.run_until_complete(self.async_func.select_from_list_by_value_async(locator, values))
+
+    @keyword
+    def select_from_list_by_label(self, locator, labels):
+        return self.loop.run_until_complete(self.async_func.select_from_list_by_label_async(locator, labels))

PuppeteerLibrary/keywords/dropdown_async.py

@@ -0,0 +1,32 @@
+from PuppeteerLibrary.base.robotlibcore import keyword
+from PuppeteerLibrary.base.librarycomponent import LibraryComponent
+from PuppeteerLibrary.locators import SelectorAbstraction
+
+
+class DropdownKeywordsAsync(LibraryComponent):
+
+    @keyword
+    async def select_from_list_by_value_async(self, selenium_locator, values):
+        selector_value = SelectorAbstraction.get_selector(selenium_locator)
+        if SelectorAbstraction.is_xpath(selenium_locator):
+            await self.ctx.get_current_page().evaluate('''
+                element = document.evaluate('{selector_value}//option[contains(@value, "{values}")]', document, null, XPathResult.ANY_TYPE, null).iterateNext();
+                element.selected = true;
+            '''.format(selector_value=selector_value, values=values))
+        else:
+            await self.ctx.get_current_page().select(selector_value, values)
+
+    @keyword
+    async def select_from_list_by_label_async(self, selenium_locator, labels):
+        selector_value = SelectorAbstraction.get_selector(selenium_locator)
+        if SelectorAbstraction.is_xpath(selenium_locator):
+            await self.ctx.get_current_page().evaluate('''
+                element = document.evaluate('{selector_value}//option[text()=\"{label}\"]', document, null, XPathResult.ANY_TYPE, null).iterateNext();
+                element.selected = true;
+            '''.format(selector_value=selector_value, label=labels))
+        else:
+            await self.ctx.get_current_page().evaluate('''
+                selector_element = document.querySelector('{selector_value}');
+                element = document.evaluate('//option[text()=\"{label}\"]', selector_element, null, XPathResult.ANY_TYPE, null).iterateNext();
+                element.selected = true;
+            '''.format(selector_value=selector_value, label=labels))

demoapp/html/form.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <div style="margin-top: 30px; margin-bottom: 30px;">
+        <label for="cars">Choose a car:</label>
+        <select name="cars" id="cars">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="opel">Opel</option>
+          <option value="audi">Audi</option>
+        </select>
+      </div>
+</body>
+</html>

demoapp/html/index.html

@@ -39,7 +39,7 @@
     </div>
   </div>
 
-  <div id="container" class="container">
+  <div id="container" class="container" style="margin-bottom: 30px;">
     <h1>Login Page</h1>
       <p>Please input your user name and password and click the login button.</p>
       <form name="login_form" onsubmit="login(this.username_field.value, this.password_field.value); return false;">
@@ -72,5 +72,6 @@ <h3>Element property</h3>
         <button id="not-visible-button" style="display:None;">in visible button</button>
       </div>
   </div>
+
 </body>
 </html>