Selecting date in calendars on Nightwatch

Question

I'm trying to select a date on my calendar and Nightwatch can't seem to select it properly.

What I'm trying to do is:

document.querySelector("#calendario_inline > div > div > div > select.ui-datepicker-month")
    .click()
    .pause(100)
    .setValue('//*[@id="calendario_inline"]/div/div/div/select[1]', 'OUT')

document.querySelector("#calendario_inline > div > div > div > select.ui-datepicker-year")
    .click()
    .pause(100)
    .setValue('//*[@id="calendario_inline"]/div/div/div/select[2]', '2019')
    .pause(100)
    .click('//*[@id="calendario_inline"]/div/table/tbody/tr[3]/td[4]/a')
    .pause(1000)

Here's the fiddle for my calendar:

https://jsfiddle.net/dnj0zqa4/

Need more detail. Please comment your code with what you are trying to do at each step. What results are you getting on the commend line from Nightwatch? — QualiT, Oct 26 '19 at 05:16
For starters, selectors like the ones you used are extremely brittle and to be avoided. Try a *targetedContainer*-*targetedElement* duo (_if possible, and it is cause I've checked the HTML you provided_). Secondly, when having such issues, always add the stack trace error from the console, else we have no idea what is causing the issue. — iamdanchiv, Oct 26 '19 at 12:47
Lastly, sorry to point it out, but it's not Nightwatch that can't seem to select it properly, it's your code that fails to do so. — iamdanchiv, Oct 26 '19 at 12:50

score 0 · Accepted Answer · answered Nov 05 '19 at 11:07

EDIT:

It seems the calendar lies within an iframe. You need to access it first. Use this::

client.element("css selector", "#editor > div.panel-v.right > div.panel-h.panel.resultsPanel > iframe", function(response) {
            client.frame({ELEMENT: response.value.ELEMENT});
        });

And after you're done with the calendar, exit the iframe with .frame(null)

Try this:

For MONTH, to select October (value 9):

client.useXpath().click('//select[@class="ui-datepicker-month"]/option[@value="9"]').useCss();

For YEAR, to select 2019:

client.useXpath().click('//select[@class="ui-datepicker-year"]/option[@value="2019"]').useCss();

Selecting date in calendars on Nightwatch

1 Answers1