使用RobotFramework编写前端测试脚本：如何操作Datepicker选择日期

Hey there! I’ve dealt with this exact challenge countless times while writing frontend tests with Robot Framework. The approach you’ll use depends entirely on the type of datepicker you’re working with—let’s break down the most common scenarios and how to tackle them.

1. Direct Input (The Easiest Case) #

Many datepickers are just styled HTML <input> elements under the hood, even if they show a fancy calendar popup. If this is your case, you can skip interacting with the calendar entirely and just set the date directly using standard SeleniumLibrary keywords.

Just make sure to use the date format the input expects (usually YYYY-MM-DD, but double-check your app’s requirements):

*** Test Cases ***
Set Date Via Direct Input
    # Locate the date input element (use id, name, xpath, etc.)
    Input Text    id=booking-date    2024-10-15
    # Alternatively, use Set Text for the same effect
    Set Text    xpath=//input[@data-testid='date-picker-input']    2024-10-15

If direct input is blocked (e.g., the input is disabled), use JavaScript to force-set the value:

Set Date Via JavaScript
    Execute JavaScript    document.getElementById('booking-date').value = '2024-10-15';

2. Popup Calendar (Step-by-Step Selection) #

For datepickers that force you to use the popup calendar (no direct input allowed), you’ll need to simulate user actions: click the input to open the calendar, navigate to the correct year/month, then select the day.

Here’s a practical example using a typical Bootstrap-style datepicker:

*** Test Cases ***
Select Date From Popup Calendar
    # 1. Open the calendar popup by clicking the input
    Click Element    id=booking-date
    # Wait for the calendar to load to avoid race conditions
    Wait Until Element Is Visible    xpath=//div[@class='datepicker-days']    timeout=10s

    # 2. Navigate to the target year (e.g., 2025)
    ${current_year}=    Get Text    xpath=//div[@class='datepicker-years']//span[@class='active']
    WHILE    ${current_year} != '2025'
        # Click the "next year" arrow
        Click Element    xpath=//div[@class='datepicker-header']//button[contains(@class, 'next')]
        ${current_year}=    Get Text    xpath=//div[@class='datepicker-years']//span[@class='active']
    END

    # 3. Select the target month (e.g., October, abbreviated as "Oct")
    Click Element    xpath=//div[@class='datepicker-months']//span[text()='Oct']

    # 4. Select the target day (e.g., 15th)
    Click Element    xpath=//div[@class='datepicker-days']//td[@class='day' and text()='15']

Pro Tips for Reliable Tests #

• Handle dynamic elements: Always use Wait Until Element Is Visible or Wait Until Element Is Clickable before interacting with calendar elements—they often load dynamically.
• Reuse logic with custom keywords: Wrap the date selection logic into a reusable keyword so you don’t repeat code across tests. For example:

  *** Keywords ***
  Select Target Date
      [Arguments]    ${target_date}    ${input_locator}
      # Parse the date into year, month name, and day using Python
      ${year}=    Execute Python    from datetime import datetime; print(datetime.strptime('${target_date}', '%Y-%m-%d').year)
      ${month}=    Execute Python    from datetime import datetime; print(datetime.strptime('${target_date}', '%Y-%m-%d').strftime('%b'))
      ${day}=    Execute Python    from datetime import datetime; print(datetime.strptime('${target_date}', '%Y-%m-%d').day)
      
      # Reuse the popup selection steps here...
  

• Adjust locators: The XPath/CSS selectors in the examples are generic—you’ll need to update them to match your app’s actual HTML structure (use browser dev tools to inspect the datepicker elements).

内容的提问来源于stack exchange，提问作者Edin DzeJoe'