Not able to select date from the dropdown box

Hi Team,

We have date selector in the dropdown box which is build on angular JS.

We are not able to pick the date event from the dropdown box.

Thanks
Arun

Please read this and take note of what’s required from you…

hi,

is it like this?
https://material.angularjs.org/latest/demo/datepicker

hello,

something like this way

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')

WebUI.navigateToUrl('https://material.angularjs.org/latest/demo/datepicker')

myNewObject = new TestObject("myNewObject")
myNewObject1 = new TestObject("myNewObject1")
myNewObject2 = new TestObject("myNewObject2")
myNewObject3 = new TestObject("myNewObject3")

'Change xpath property to new value'
def css = "body > main > md-content > div.docs-ng-view.layout-padding.ng-scope.flex-noshrink > docs-demo:nth-child(1) > div > div > section > demo-include > div > md-content > div:nth-child(1) > div:nth-child(1) > md-datepicker > div > button"

def xpath_20 = "//td[@id='md-2-month-2020-1-20']/span"

def css_inputBox = "body > main > md-content > div.docs-ng-view.layout-padding.ng-scope.flex-noshrink > docs-demo:nth-child(1) > div > div > section > demo-include > div > md-content > div:nth-child(1) > div:nth-child(1) > md-datepicker > div > input"

myNewObject.addProperty("css", ConditionType.EQUALS, css, true)
WebUI.click(myNewObject)

WebUI.delay(2)

myNewObject1.addProperty("xpath", ConditionType.EQUALS, xpath_20, true)
WebUI.click(myNewObject1)

WebUI.delay(2)

myNewObject3.addProperty("css", ConditionType.EQUALS, css_inputBox, true)
def text = WebUI.getAttribute(myNewObject3, 'value')
println text

WebUI.closeBrowser()


hel,

also this will work

def day = 22
def month = 2
def xpath_20 = "//td[@id='md-2-month-2020-1-20']/span"
def xpath_day = "//td[@id='md-"+month+"-month-2020-1-"+day+"']/span"

def css_inputBox = "body > main > md-content > div.docs-ng-view.layout-padding.ng-scope.flex-noshrink > docs-demo:nth-child(1) > div > div > section > demo-include > div > md-content > div:nth-child(1) > div:nth-child(1) > md-datepicker > div > input"

myNewObject.addProperty("css", ConditionType.EQUALS, css, true)
WebUI.click(myNewObject)

WebUI.delay(2)

myNewObject1.addProperty("xpath", ConditionType.EQUALS, xpath_day, true)
WebUI.click(myNewObject1)

WebUI.delay(2)

myNewObject3.addProperty("css", ConditionType.EQUALS, css_inputBox, true)
def text = WebUI.getAttribute(myNewObject3, 'value')
println text

WebUI.closeBrowser()

Hi Team,

This is regarding the “Select Effective Date “ dropdown list date selection, as we are not able to select specify date through our automation script(Katalon Studio)

Please find the detail information of “Select Effective Date” drop down Challenges we are facing in the Katalon Studio.

We are trying to automate “Select Effective Date” drop down. We have to select a specific date(For Eg:- 01/01/2016) from the dropdown list.

Analysis:

  1. The data’s are loaded with the dynamic id’s in the descending order in the DOM and when we are trying to select the specific date from the dropdown list.
  2. We are facing the issue to inspect the date value which we are passing from the script.
  3. Actually when we try to look into the DOM, we observed the records are loaded “On Demand(By Scrolling the scroll bar) ” and we see only 13 records loaded in the DOM with the current date as the default selection.
  4. When we inspect the Xpath for the selected date, we see the dynamic id generated based each data.
  5. When we are trying to get the value we see are four above and remaining eight record below with current date.

Facing Challenges:

As the control is dynamic, we are unable to find the total count of the records run it through Conditional statement loop(it’s an unfortunate that Count() is not fetching the correct result as only when we scroll down/up, the items are loaded in DOM)

Reference: Load on Demand Sample - Load on Demand with Combo Box Control - Ignite UI for jQuery™

PFA

Thanks
Arun

@arun_vijayarengan
The Point here is that the element has only x amount of items at a time displayed.
So you get the correct childitem count. looping over them is the correct way.

As from Your Example Page it is (JS Selectors as i just love them :stuck_out_tongue: so you have to map them to css selectors on Russ suggestion :wink: ):

Click on the Expander to get the list to open

document.querySelector("#sampleContainer > div.igsb-running-sample.sb-min-phone-portrait > 
div:nth-child(2) > div > div > div.ui-igcombo-button.ui-state-default.ui-unselectable.ui-igcombo-button-ltr.ui-corner-right").click()

Check your childs with

document.querySelector("body > div.ui-igcombo-dropdown.ui-widget.ui-widget-content.ui-corner-all.ui-igcombo-no-border > div.ui-igcombo-list.ui-igcombo-list-overflow > ul").children[x].innerText

Than feed the scrollbar with scroll() new values (0,1000) You can try around with that value what fits your needs

document.querySelector("body > div.ui-igcombo-dropdown.ui-widget.ui-widget-content.ui-corner-all.ui-igcombo-orientation-bottom > div.ui-igcombo-list.ui-igcombo-list-overflow > div").scroll(0,1000)

Than you loop over the items again to check if the date is included (As again only 15 are included in the child and the old values are gone ) And you do that till you have found it or if child items do not change anymore.

No you don’t. No browser uses xpath to locate elements. No web developer uses xpath as a means to locate elements and/or their children.

Learn CSS selectors. Learn to love them. Along with HTML and JavaScript, they’re what the web (i.e. “the world”) is built with.

4 Likes

Webcomponents, CSS Selectors will break your world. But anyway that was not the question here. so CSS when Russ suggest that.