Results 1 to 7 of 7

Thread: Accessing HTML elements inside a grid cell

  1. #1

    Default Answered: Accessing HTML elements inside a grid cell

    So I've got a grid cell that contains 3 small icons which when clicked perform specific operations.

    I am able to locate the grid cell via the regular ST.grid API but can not get the condition right to access the nested HTML elements.

    HTML Code:
    <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1766  x-action-col-cell x-grid-cell-last x-unselectable" style="width:70px;" role="gridcell" tabindex="-1" data-columnid="actioncolumn-1766">
        <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;">
             <div tabindex="-1" role="button" class="x-action-col-icon x-action-col-0  x-fa fa-info-circle" data-qtip="View" data-tabindex-value="0" data-tabindex-counter="1"></div>
             <div tabindex="-1" role="button" class="x-action-col-icon x-action-col-1  x-fa fa-pencil-square-o" data-qtip="Edit" data-tabindex-value="0" data-tabindex-counter="1"></div>
             <div tabindex="-1" role="button" class="x-action-col-icon x-action-col-2  x-fa fa-trash-o" data-qtip="Delete" data-tabindex-value="0" data-tabindex-counter="1"></div>
        </div>
    </td>
    This is the code I am currently using

    Code:
    stpo.contractMaintenance.searchGridElementsGrid()
                .rowWith("contract_id", "ST_ConID")
                .cellAt(16) //works
                .down('>> div[data-qtip="Delete"]')
                .click();
    I assume that the error is in the .down()-method, but I can't seem to figure it out.
    Replacing the .down() and .click() with the .visible()-method results in a completed test.

  2. I think I figured it out, the locator was not the problem. In fact, every one of the ones mentioned above works.
    I noticed that my browser (when it's size is set to only half the size of my screen) horizontally scrolls to the 16th row, therefore the locator could not be the problem.

    I simply added another .focus()-method and now it works.

    Code:
    stpo.contractMaintenance.searchGridElementsGrid()
                .rowWith("contract_id", "ST_ConID")
                .cellAt(16)
                .down('div[data-qtip="Delete"]')
                .focus()
                .click();




    But can you tell me the difference between the above mentioned locator syntaxes?

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

    Default

    Try this element locator:

    Code:
    .down('[data-qtip="Delete"]')
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  4. #3

    Default

    Hmm, neither

    Code:
    .down('[data-qtip="Delete"]')
    
    nor

    Code:
    .down('div[data-qtip="Delete"]')
    
    seem to work.

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

    Default

    Maybe double-check you're referencing the correct cell in the row - the "cellAt" method accepts an index that is zero-based, so the first cell would be "0".
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  6. #5

    Default

    I think I figured it out, the locator was not the problem. In fact, every one of the ones mentioned above works.
    I noticed that my browser (when it's size is set to only half the size of my screen) horizontally scrolls to the 16th row, therefore the locator could not be the problem.

    I simply added another .focus()-method and now it works.

    Code:
    stpo.contractMaintenance.searchGridElementsGrid()
                .rowWith("contract_id", "ST_ConID")
                .cellAt(16)
                .down('div[data-qtip="Delete"]')
                .focus()
                .click();




    But can you tell me the difference between the above mentioned locator syntaxes?

  7. #6
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    You could try bringing the cell in to view using the "reveal" method, before working with the elements within the cell.

    Code:
    stpo.contractMaintenance.searchGridElementsGrid()
        .rowWith("contract_id", "ST_ConID")
        .cellAt(16)
        .reveal()
        .down('div[data-qtip="Delete"]')
        .click();
    This will scroll the cell in to view.
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  8. #7

    Default

    Yep, that works aswell, Thanks!

Tags for this Thread

Posting Permissions

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