The Web application I am currently working on has changed the calendar widget. They are now using the datepicker from the material-ui library.

The problem with this widget is that it does not have any IDs or CSS class on the HTML that is generated. So there is no reliable way to interact with it.

And as the HTML of the datepicker is inserted at the bottom of the DOM during its activation, there is no way to access it via XPATH (xpath would always be changing). Has anyone ever managed to interact with this widget using the Robot Framework / Selenium Library?

With the help of DateTime robotframework library you can select date from date-picker of material-ui library. I have written a sample test to run on a sample date-picker form material-ui.com.

Here's the sample keyword, this keyword takes year, month, date which you want to select in date-picker as arguments :

Select Date  [Arguments]  ${year}  ${month}  ${date}            
   ### This keyword evaluates the difference from current date and moves ahead/backward to select the month ###

   ${currentDate} =     Get Current Date    result_format=datetime
   Convert To Integer  ${year}
   Convert To Integer  ${month}
   Convert To Integer  ${date}
   ${month-diff}=  Evaluate  ${month}-${currentDate.month}
   ${year-diff}=  Evaluate  ${year}-${currentDate.year}
   ${move}=  Evaluate  ${year-diff}*12+${month-diff}

   ${shiftForward}=  Set Variable If  
   ...   ${move}>0  1
   ...   ${move}<0  0

   ${move}=  Set Variable If  
   ...   ${move}>0  ${move}
   ...   ${move}<0  ${move}*-1

   :FOR     ${var}  IN RANGE    ${move}
       \  Run Keyword If  ${shiftForward}==0  Click Element  css=svg path[d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"]
       \  Run Keyword If  ${shiftForward}==1  Click Element  css=svg path[d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"]

   Wait Until Element Is Enabled  xpath=//span[text()="${date}"]
   Click Element  xpath=//span[text()="${date}"]

I tested this keyword with this following test case:

Select a date from datepicker of material-ui library
    ### Open a sample date picker from material-ui.com###
    Open Browser  http://www.material-ui.com/#/components/date-picker

    ### Wait for the date picker to be available and click that to select date ###
    Wait Until Page Contains Element  xpath=//input[contains(@id, "undefined-undefined-RangedDatePicker")]
    Click Element   xpath=//input[contains(@id, "undefined-undefined-RangedDatePicker")]
    Wait Until Page Contains Element  xpath=//div[@style="display: flex; flex-direction: column;"]

    #Select Date  2019  5  15
    Select Date  2019  3  15
    #Select Date  2017  5  15
    #Select Date  2017  4  15

Please remember to add DateTime library along with Selenium2library.

Library  Selenium2Library
Library  DateTime

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.