3

I have customized UI calendar attached in screenshot having date and time slots to book some test drive. actually the booked slot div contains some class and available slot contains some class name.
Please give suggestion to click next available slot containing div.

enter image description here

Unavailable slots are marked as grey and booked slot are mentioned with comment and available are white.

Attached code also for locator.enter image description here

Improve this question

1 Answer 1

Reset to default
0

I'd actually need a negative example to be completely sure but as I see it there must be either a CSS class to make the cells blue or to make them white. Either way, you can actually do something along the lines of

public static WebElement getFreeSlot(String colorCode)
List<WebElement> slots = driver.findElement(By.cssSelector(".day-body .hour-wrapper"));
for(WebElement slot : slots){
    String color = slot.getCssValue("background-color");
    if(color.equals(colorCode))
        return slot;
}
return null;
}

Just pass it the color code for your background (should be just white but look it up to be safe) and you should get the first, white time slot.

Improve this answer
6
  • Thank you for the first response.. Meanwhile can you help me how we can give this inside stepdefinition of cucumber scenarios for example:
    – user36987
    Feb 8, 2019 at 8:53
  • @Test public void click_date_and_time() throws Throwable { public static WebElement getFreeSlot(String colorCode) List<WebElement> slots = driver.findElement(By.cssSelector(".day-body .hour-wrapper")); for(WebElement slot : slots){ String color = slot.getCssValue("background-color"); if(color.equals(colorCode)) return slot; } return null; } in this
    – user36987
    Feb 8, 2019 at 8:54
  • Are you trying to declare a method within another method? You need to declare the method somewhere, ideally in your methods library, and call it from your test. This will only return the matching WebElement, what you do with it depends on your business logic.
    – Daniel
    Feb 8, 2019 at 9:26
  • hi can you tell me how to use if else condition with following logic: main class is "calendar-grid-wrapper slds-size_11-of-12 slds-grid" It contains "hour-wrapper" class inside where time slots in hour are displayed and it also contains class "calendar-event-container" here it has booked slots. I am trying to click available slot in main class where it should not contain calendar event container slots. please help
    – user36987
    Feb 11, 2019 at 10:26
  • You actually shouldn't even need conditionals for that. you can just go with a css selector like ".calendar-grid-wrapper.slds-size_11-of-12.slds-grid div.hour-wrapper:not(.calendar-event-container)" this would select all divs with class hour-wrapper which do NOT have the class calendar-event-container. If that isn't what you need you could possibly provide some more information.
    – Daniel
    Feb 11, 2019 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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