2

While coding an automation test in Selenium-Ruby when sendKeys / clear is used on a Autocomplete text field (Kendo UI) in Safari browser 11.0.1,

Test Code:

actions.push(is_element_enabled?(PROF_IN_CHARGE,'PROF_IN_CHARGE'))
actions.push(is_element_displayed?(PROF_IN_CHARGE,'PROF_IN_CHARGE'))
actions.push(type(PROF_IN_CHARGE,first_name, 'PROF_IN_CHARGE'))

Selenium methods:

def is_element_enabled?(locator, name, raise_exception = true)
$logger.info "Verify whether #{name} is enabled."
highlight(web_driver.find_element(locator))
web_driver.find_element(locator).enabled?
$logger.info "Element enabled: #{name}"

def is_element_displayed?(locator, name, raise_exception = true, log_error = true)
$logger.info(__method__) { "Verifying element #{name}" }
$logger.debug(__method__) { locator }
web_driver.find_element(locator).displayed?
highlight(web_driver.find_element(locator), 0, "red")
return true

def type(locator, text, name, raise_exception = true)
$logger.info(__method__) { "Typing #{text} to #{name}" }
$logger.debug(__method__) { locator }
highlight(web_driver.find_element(locator), 0, "red")
#Clear existing text before typing
web_driver.find_element(locator).clear
web_driver.find_element(locator).send_keys(text)

the following error is displayed:

 # --- Caused by: ---
 # Selenium::WebDriver::Error::ElementNotVisibleError:
 #   An element command could not be completed because the element is not visible on the page.
 #   /Users/admin/.rvm/gems/ruby-2.4.1/gems/selenium-webdriver-3.6.0/lib/selenium/webdriver/remote/response.rb:71:in `assert_ok'

Here's logs:

I, [2017-12-11T15:19:00.611929 #5324]  INFO -- : Verify whether PROF_IN_CHARGE is enabled.
I, [2017-12-11T15:19:00.635876 #5324]  INFO -- : Element enabled: PROF_IN_CHARGE
I, [2017-12-11T15:19:00.635940 #5324]  INFO -- is_element_displayed?: Verifying element PROF_IN_CHARGE
D, [2017-12-11T15:19:00.635964 #5324] DEBUG -- is_element_displayed?: {:id=>"fcCreateMainAssingee"}
I, [2017-12-11T15:19:00.647651 #5324]  INFO -- is_element_displayed?: true
I, [2017-12-11T15:19:00.660760 #5324]  INFO -- type: Typing Report to PROF_IN_CHARGE
D, [2017-12-11T15:19:00.660834 #5324] DEBUG -- type: {:id=>"fcCreateMainAssingee"}
E, [2017-12-11T15:19:00.685450 #5324] ERROR -- create_new_matter:  failed.
I, [2017-12-11T15:19:00.725482 #5324]  INFO -- screenshot: Screenshot saved in path: /Users/admin/PivotQA/screenshots/2017-12-11_1
5_18_15/MattersLib_create_new_matter_20171211_151900.png
E, [2017-12-11T15:19:00.725531 #5324] ERROR -- : An element command could not be completed because the element is not visible on t
he page.

This happens even after successfully checking whether that element is enabled and visible, using selenium's enabled? and displayed? methods.

BUT, this issue is not seen on the other browsers like chrome, IE and Edge.

I have used javascript("document.getElementById('fcCreateMainAssingee'.value='text')") to change the value of that text field and it worked fine, but the dynamic options dropdown is not displayed, which is the problem.

So, is there anybody who has had similar issue and resolved it ? Would be great to get your help.

Also, if there is any other way to accomplish this kindly suggest.

Here's the DOM of that autocomplete field:

<input formcontrolname="fcCreateMainAssingee" id="fcCreateMainAssingee" type="text" class="ng-untouched ng-pristine ng-valid k-input" data-role="autocomplete" placeholder="Username" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="fcCreateMainAssingee_listbox" aria-autocomplete="list" style="width: 100%;">

Thanks!

Bharath Nadukatla
  • 201
  • 1
  • 8
  • 1
    Possible duplicate of [ElementNotVisibleException : Selenium Python](https://stackoverflow.com/questions/47108512/elementnotvisibleexception-selenium-python) – undetected Selenium Dec 11 '17 at 14:53
  • Thanks much Deb for suggesting that. I have forgot to mention about visibility, infact if you look at the logs, I have indeed used both enabled? and displayed? methods. Both passed confirming the element's presence. But still, when type method started it threw the error. – Bharath Nadukatla Dec 11 '17 at 15:30
  • Well, apart from being **`enabled`** and **`displayed`**, the `webelement` needs to be **`intractable`** too, that's why we need to get granular with **element_to_be_clickable** – undetected Selenium Dec 11 '17 at 15:40
  • Element is Clickable = it is Displayed and Enabled. Ref.http://www.seleniumhq.org/docs/04_webdriver_advanced.jsp . There is no method in ruby which is equivalent to element_to_be_clickable. But, thank you very much for guiding me. Is there any other way to interact with Kendo UI autocomplete fields, with any JavaScript methods? – Bharath Nadukatla Dec 11 '17 at 15:48
  • Note: This issue is only seen in Safari browser. The test runs fine on Chrome, IE and Edge browsers. – Bharath Nadukatla Dec 11 '17 at 15:51
  • I am not well versed with `Ruby` and `Kendo UI`. I can provide a solution in `Java`. Will that be acceptable to you? – undetected Selenium Dec 11 '17 at 15:55
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160991/discussion-between-bharath-nadukatla-and-debanjanb). – Bharath Nadukatla Dec 12 '17 at 05:19
  • I have posted an alternative solution as an answer, please check that out if needed. – Bharath Nadukatla Dec 13 '17 at 11:43

1 Answers1

0

During my research on Kendo autocomplete fields, I stumbled upon JavaScript code that would help solve this problem.

The following is a credible alternative to the selenium functions and has been thoroughly tested on Safari, Chrome, IE and Edge browser and works fine.

Hope this helps someone who is in the same boat as I was for past few days!

Here's selenium equivalent of JS for send_keys - 

"document.getElementById('<ID>').value='<search_string>'"

(no need to clear the text as js types in the search_string removing existing placeholder string)

and then to trigger the search that happens after typing the , execute the below js:

"$( #{locator[:id]} ).data('kendoAutoComplete').search();"

the above js will trigger search and then the dynamic drop down opens up. Now, its just a matter of finding that element by xpath using selenium's find_element method and then clicking on it using js (given below)

js_script = 'arguments[0].click();'
element   = web_driver.find_element(locator)
web_driver.execute_script(js_script, element)

Here's the complete method:

def kendo_auto_complete(locator, loc_name, full_name, raise_exception = true)
    $logger.info(__method__) { 'begin' }
    # Split full name ( Last_name, first_name) and get first_name
    first_name = full_name.split(",").last.strip
    # Type in the name using JS
    $logger.info(__method__) { "Typing #{first_name} into #{loc_name}" }
    web_driver.execute_script("document.getElementById('#{locator[:id]}').value='#{first_name}'")
    short_delay
    #Trigger search using JS
    $logger.info(__method__) { "Starting search.." }
    if BROWSER.upcase == 'IE'
      web_driver.execute_script("$( '##{locator[:id]}' ).data('kendoAutoComplete').search();")
    else
      web_driver.execute_script("$( #{locator[:id]} ).data('kendoAutoComplete').search();")
    end
    # Select the name from results in dynamic dropdown
    wait_for_element(create_dynamic_xpath(AUTO_CMP_OPTION[:xpath],full_name), full_name)
    js_click(create_dynamic_xpath(AUTO_CMP_OPTION[:xpath],full_name), full_name)
    $logger.info(__method__) { 'end' }
rescue StandardError => e
    $logger.error "Value of Kendo autocomplete - #{name} could not be set."
    raise e if raise_exception
    false
end

But, still if someone has a better way of doing things, kindly comment here. Thanks!

Bharath Nadukatla
  • 201
  • 1
  • 8