Handling Calendar

Hi All,

Problem statement : getting date input from user for a ticket booking flow, checking the availability on that date,and selecting that date in the calendar.

Anyone have a suggestion in this about the approach.

Hi,

Really hard to give you precise infos as this really depends of the user/interface flow, the way you have user input and how availability check is done/presented. And libraries used
First I would rather expect that infos (destination and dates) are filled prior to check availability.

Anyway I would imagine this, with the different challenges to manage:

  • The date info is a fixed or random evaluated date (ex today + 1 month) in your test
  • You access the site, input destination info:
    • Input Text //input[@data-from=‘from’]
    • Input Text //input[@data-to=‘to’]
      => Here you have to manage dropdown lists to choose precisely, so would expect defined/deterministic values
      => Can be tricky if the list is not a “select” item, but a custom list with input, radio and pseudo-elements
  • Then set the travel dates(s) :
    • You need to manage One way, Return trip selector…
    • Here usually prices/availability are shown on calendar dates, so a first check can be done
    • Depending on this, click on the date(s)
      • You need to manage the display if target date/month is not displayed yet (click next)
      • Click Element //span[@data-date=‘${datex}’] (for each date)
      • Manage the date format (for exemple 20/10/2024, 1-11-2024…)
  • Validate the search and go to results pages

Assuming that this is made on a “test base”, where the results do not change over time, and you have a set/combination of case, I would use a keywords that accepts a list of the above infos.

Here a quick example with SeleniumLibrary on a travel website with hints:

*** Test Cases ***
Check Availability
    Open Browser    https://www.wellknownwebsite.com    chrome
    Maximize Browser Window
    VAR    @{fromCity}     from           CityOne       Airport1ID    
    VAR    @{toCity}       to             CityTwo       Airport2ID     
    Travel Destination     ${fromCity}    ${toCity}
    Travel Dates           ${False}       30-10-2024    12-11-2024    

*** Keywords ***
Travel Destination
    [Arguments]    ${fromCity}    ${toCity}        
    # Setting "From" et "To"
    FOR    ${data}    IN    ${fromCity}    ${toCity}       
        Wait Until Element Is Visible    id=${data}[0]
        Input Text        id=${data}[0]    ${data}[1]
        Wait Until Element Is Visible    //li[@data-testid='${data}[2]']    
        Click Element    //li[@data-testid='${data}[2]']
    END

Travel Dates
    [Arguments]    ${oneway}    ${dateFrom}    ${dateTo}=${EMPTY}     
    # Date panel access
    Click Element    //input[@name='when']
    Wait Until Element Is Visible    //button[@data-testid='toggle']

    # Getting Toggle Return/One way state
    ${toggleState}    Get Element Attribute    //label[text()='Return trip']    class
    ${toggleStatus}    Evaluate    'disabled' in '${toggleState}'
    IF    not ${toggleStatus} and ${oneway}
        Click Element    //button[@data-testid='toggle']
    END

    # Setting the dates
    Search And Select Date    ${dateFrom}    
    IF    '${dateTo}' != '${EMPTY}' and not ${oneway}    Search And Select Date    ${dateTo}

Search And Select Date
    [Arguments]    ${date}   
    VAR    ${i}    0
    VAR    ${dateSelected}    ${False}
    # Search/Clicks the date and go in future until 6 months are reached
    WHILE    not ${dateSelected} and ${i} < 7
        ${dateSelected}    Run Keyword And Return Status    Click Element    //button[@data-testid='${date}']
        IF    not ${dateSelected}    Click Element    //button[@data-testid='next-nav-button']
        IF    ${i} == 6    Log    Target date not found after ${i} months
        ${i}    Evaluate    ${i} + 1
    END

Regards
Charlie