Results 1 to 7 of 7

Thread: Expanding a datepicker component

  1. #1
    Sencha User
    Join Date
    Mar 2017
    Posts
    45

    Default Answered: Expanding a datepicker component

    ST version: 2.2.1.13
    Webdriver scenario

    I need to expand a datepicker and select the Today button. I found an example located here: https://www.sencha.com/forum/showthread.php?469727 but that doesn't seem to be working for me.

    The date field has a reference property set on it by my development team and I can locate it. The issue is that the .down('.x-form-trigger') is not triggering the down action on the class.


    Code:
    it('Should then expand the datepicker and select today', function(){            
            ST.component('datefield[reference="StartDateField"]')
                .down('.x-form-trigger')
                .click();
            ST.component('datepicker button[text=Today]')
                .click();

    datepicker.jpg

  2. Please try one of the following:

    Code:
    ST.component('datefield[reference="StartDateField"]]')
        .down('>> .x-form-trigger')
        .click();
    or

    Code:
    ST.element('datefield[reference="StartDateField"] => .x-form-trigger')
        .click();

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    326
    Answers
    49

    Default

    Please try one of the following:

    Code:
    ST.component('datefield[reference="StartDateField"]]')
        .down('>> .x-form-trigger')
        .click();
    or

    Code:
    ST.element('datefield[reference="StartDateField"] => .x-form-trigger')
        .click();
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  4. #3
    Sencha User
    Join Date
    Mar 2017
    Posts
    45

    Default

    Thanks for the follow-up, Daniel. The first option does work for expanding the datepicker and selecting the Today button for the first date field but I'm running into an error with the component query matching multiple items for the "datepicker button[text=Today]" because I have two datepickers. Do you know of a way to select the second datepicker?


    Refactored into a reusable function:

    Code:
    selectDate: function(spec) {    
    var target = spec.locatorFn();
        target.click()
            .down('>> .x-form-trigger')
            .click();
        ST.component('datepicker button[text=Today]')
            .click();
        }
    I have two spec definitions that contain my Start & End date locators that are passed in to that function.

    Code:
    {                name: 'Start Date',
                    testName: 'is a required field',
                    locatorFn: stpo.assignmentRequestLocators.arStartDate,
                    type: 'datepicker'
                },
                {
                    name: 'End Date',
                    testName: 'is a required field',
                    locatorFn: stpo.assignmentRequestLocators.arEndDate,
                    type: 'datepicker'
                }

  5. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    326
    Answers
    49

    Default

    Try referencing the visible date picker (because only one should be visible at a time):

    Code:
    ST.component('datepicker:visible button[text="Today"]');
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  6. #5
    Sencha User
    Join Date
    Mar 2017
    Posts
    45

    Default

    Yay for simple solutions! That worked perfect.

    Thanks,
    Shawn

  7. #6
    Sencha User
    Join Date
    Mar 2017
    Posts
    45

    Default

    Hey Daniel,

    I had a follow up question for some clarification on the approach you provided above.

    I was working with another combobox selection that loads a data store once the user clicks the x-form-trigger. I found out that the .expand() method will not trigger the store to load the data (we don't auto-load due to large number of results) so I ended up using the same .down('>> .x-form-arrow-trigger') as you suggested above which simulates the user clicking the combobox and the store is loaded.

    My question is do you know why this approach would not work verses the one below that does work?

    This code can locate the combo using the page object locator below but cannot click the .x-form-arrow-trigger
    Code:
    ST.comboBox(stpo.assignmentRequestLocators.arProviderRequesting()).click()
                .down('>> .x-form-arrow-trigger')
                .click();
    ST.dataView('boundlist:visible')
                .itemWith('DisplayValue', 'Automation Provider').click().wait(3000);
    This code can locate the combo and then click the .x-form-arrow-trigger just fine
    Code:
    var target = stpo.assignmentRequestLocators.arProviderRequesting();
            target.click()
                .down('>> .x-form-arrow-trigger')
                .click();
            ST.dataView('boundlist:visible')
                .itemWith('DisplayValue', 'Automation Provider').click().wait(3000);

  8. #7
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    326
    Answers
    49

    Default

    In the first code sample above, you need to use the page object and APIs like this:

    Code:
    stpo.assignmentRequestLocators.arProviderRequesting()
        .click()
        .down('>> .x-form-arrow-trigger')
    In terms of why the combo isn't loading the data on expand - are you listening for a particular event before calling ".load()" on the Store? Can you share some code showing how the combobox is configured in the app?
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

Similar Threads

  1. Component xdatetime with one field datepicker and one listbox for time
    By marcelo.cavalini in forum Sencha Architect 3.x: Q&A
    Replies: 0
    Last Post: 3 Nov 2015, 2:38 AM
  2. [CLOSED] Can see datePicker component, it's covered by soft keyboard.
    By aaronchen2k in forum Sencha Touch 2.x: Bugs
    Replies: 3
    Last Post: 24 Oct 2012, 5:51 AM
  3. Replies: 4
    Last Post: 12 Sep 2012, 1:13 PM
  4. New DatePicker component
    By Animal in forum Community Discussion
    Replies: 12
    Last Post: 17 Oct 2009, 1:47 AM
  5. expand outer component with expanding inner content
    By ultrus in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 31 Dec 2007, 2:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •