Accessing HTML elements inside a grid cell

[freightgateone]

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.

<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

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.

[daniel.gallo]

Try this element locator:

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

[freightgateone]

Hmm, neither

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

nor

.down('div[data-qtip="Delete"]')

seem to work.

[daniel.gallo]

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".

[freightgateone]

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.

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?

[daniel.gallo]

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

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.

[freightgateone]

Yep, that works aswell, Thanks!