How to write css/xpath selector for a specific icon in specific row in table that is built from div's?

Question

I'm trying to access "Edit" icon for a specific element in the dynamic table.

HTML -

        <div class="fixedDataTableLayout_rowsContainer" style="height: 323px; width: 1882px;">
            <div class="fixedDataTableColumnResizerLineLayout_main fixedDataTableColumnResizerLineLayout_hiddenElem public_fixedDataTableColumnResizerLine_main" style="width: 0px; height: 325px; left: 0px;">
                <div class="fixedDataTableColumnResizerLineLayout_mouseArea" style="height: 325px;"></div>
            </div>
            <div class="fixedDataTableRowLayout_rowWrapper" style="width: 1882px; height: 48px; z-index: 1; left: 0px; top: 0px;">
                <div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main fixedDataTableLayout_header public_fixedDataTable_header" style="width: 1882px; height: 48px;">
                    <div class="fixedDataTableRowLayout_body">
                        <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 48px; width: 0px; left: 0px;">
                            <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 48px; position: absolute; width: 0px; z-index: 2; left: 0px; top: 0px;"></div>
                        </div>
                        <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 48px; width: 1882px; left: 0px;">
                            <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 48px; position: absolute; width: 1882px; z-index: 0; left: 0px; top: 0px;">
                                <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 48px; width: 916px; left: 0px;">
                                    <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell cell-header text-center" style="height: 48px; width: 916px;">
                                        <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                            <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                <div class="public_fixedDataTableCell_cellContent">
                                                    <div class="sort-by ">Facility
                                                        <i class="fa fa-sort-undefined" style="margin-left: 3px; position: absolute; top: -3px;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 48px; width: 866px; left: 916px;">
                                    <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell cell-header text-center" style="height: 48px; width: 866px;">
                                        <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                            <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                <div class="public_fixedDataTableCell_cellContent">
                                                    <div class="sort-by "># of rooms
                                                        <i class="fa fa-sort-undefined" style="margin-left: 3px; position: absolute; top: -3px;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 48px; width: 100px; left: 1782px;">
                                    <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 48px; width: 100px;">
                                        <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                            <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                <div class="public_fixedDataTableCell_cellContent"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="" style="left: 0px; height: 48px;"></div>
                        <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 48px; width: 0px; left: 1882px;">
                            <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 48px; position: absolute; width: 0px; z-index: 2; left: 0px; top: 0px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="fixedDataTableRowLayout_rowWrapper" style="width: 1882px; height: 60px; z-index: 0; transform: translate3d(0px, 48px, 0px); backface-visibility: hidden;">
                    <div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main public_fixedDataTableRow_even public_fixedDataTable_bodyRow" style="width: 1882px; height: 60px;">
                        <div class="fixedDataTableRowLayout_body">
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 1882px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 1882px; z-index: 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;">
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 916px; left: 0px;">
                                        <div data="[object Object],[object Object],[object Object]" field="name" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell undefined" style="height: 60px; width: 916px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">uitestsfacility</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 866px; left: 916px;">
                                        <div data="[object Object],[object Object],[object Object]" field="roomCount" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 866px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 100px; left: 1782px;">
                                        <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 100px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">
                                                        <i class="fa fa-edit" data-tip="Edit Facility"></i>
                                                        <i class="fa fa-trash-o disabled" data-tip="Cannot be deleted due to rooms or devices belonged to this facility"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="" style="left: 0px; height: 60px;"></div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 1882px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fixedDataTableRowLayout_rowWrapper" style="width: 1882px; height: 60px; z-index: 0; transform: translate3d(0px, 108px, 0px); backface-visibility: hidden;">
                    <div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main public_fixedDataTableRow_highlighted public_fixedDataTableRow_odd public_fixedDataTable_bodyRow" style="width: 1882px; height: 60px;">
                        <div class="fixedDataTableRowLayout_body">
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 1882px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 1882px; z-index: 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;">
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 916px; left: 0px;">
                                        <div data="[object Object],[object Object],[object Object]" field="name" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell undefined" style="height: 60px; width: 916px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">testsearchfacility</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 866px; left: 916px;">
                                        <div data="[object Object],[object Object],[object Object]" field="roomCount" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 866px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 100px; left: 1782px;">
                                        <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 100px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">
                                                        <i class="fa fa-edit" data-tip="Edit Facility"></i>
                                                        <i class="fa fa-trash-o disabled" data-tip="Cannot be deleted due to rooms or devices belonged to this facility"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="" style="left: 0px; height: 60px;"></div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 1882px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fixedDataTableRowLayout_rowWrapper" style="width: 1882px; height: 60px; z-index: 0; transform: translate3d(0px, 168px, 0px); backface-visibility: hidden;">
                    <div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main public_fixedDataTableRow_even public_fixedDataTable_bodyRow fixedDataTableLayout_hasBottomBorder public_fixedDataTable_hasBottomBorder" style="width: 1882px; height: 60px;">
                        <div class="fixedDataTableRowLayout_body">
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 1882px; left: 0px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 1882px; z-index: 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;">
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 916px; left: 0px;">
                                        <div data="[object Object],[object Object],[object Object]" field="name" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell undefined" style="height: 60px; width: 916px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">AutomationFacility 1249.0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 866px; left: 916px;">
                                        <div data="[object Object],[object Object],[object Object]" field="roomCount" class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 866px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 60px; width: 100px; left: 1782px;">
                                        <div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 text-cell text-center" style="height: 60px; width: 100px;">
                                            <div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
                                                <div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
                                                    <div class="public_fixedDataTableCell_cellContent">
                                                        <i class="fa fa-edit" data-tip="Edit Facility"></i>
                                                        <i class="fa fa-trash-o " data-tip="Delete Facility"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="" style="left: 0px; height: 60px;"></div>
                            <div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 60px; width: 0px; left: 1882px;">
                                <div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 60px; position: absolute; width: 0px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

E.g. I need selector for edit icon in the row for AutomationFacility 9341.0. This element is being created in my test and then I need to click "Edit" icon for it. In this case, I never know the position of the element.

In provided HTML edit icon is in row 183 I was trying to find it by something like this:

 $(byXpath("//*[text()='"+facilityName+"']/i[@class='fa fa-edit']")).click();

But it doesn't work and I get error that selector is incorrect.

Please elaborate on "doesn't work". Do you get an error or an incorrect result? — jsheeran, Aug 22 '19 at 11:59
do not post an image of the html, post the html itself please — Lucas Wieloch, Aug 22 '19 at 12:01
By "doesn't work" I mean that I cannot click into this element and get error that my selector is incorrect. — Mikhail Siekhin, Aug 22 '19 at 12:10

score 0 · Accepted Answer · answered Aug 22 '19 at 15:09

To locate the Edit icon with respect to the text AutomationFacility 1249.0 you can use the following Locator Strategy:

Using XPATH:

//div[@class='public_fixedDataTableCell_cellContent' and contains(.,'AutomationFacility 1249')]//following::i[@class='fa fa-edit' and @data-tip='Edit Facility']

Note: You need to induce WebDriverWait for the desired elementToBeClickable.

frianH · Answer 2 · 2019-08-23T03:59:48.580

-1

Edit the icons and text that you mean are not in one div, this is your html pattern :

div
   div
      text
   div
   div
      text
   div
   div
      edit icon you mean
    div
div

I tried using contains and preceding-sibling, like this :

facilityName = "AutomationFacility 1249.0";

$(byXpath("//*[contains(@class,'fixedDataTableCell') and ./preceding-sibling::*[contains(@class,'fixedDataTableCell')]//div[contains(text(),'"+facilityName+"')]]//i[@class='fa fa-edit']")).click();

Try change value the facilityName with you expected.

edited Aug 23 '19 at 03:59

answered Aug 22 '19 at 12:06

frianH

7,295
6
20
45

I never know which number my element is going to have because I might have at some point 10 or 15 rows and if I always click on [3] I will click into wrong element – Mikhail Siekhin Aug 22 '19 at 12:09
please provide the `HTML`. – frianH Aug 22 '19 at 12:11
added HTML to the description – Mikhail Siekhin Aug 22 '19 at 13:21
@MikhailSiekhin i've updated the code, please try again. – frianH Aug 23 '19 at 04:11

score -1 · Answer 3 · answered Aug 22 '19 at 12:16

-1

You could use descendant XPath axis and contains() function combination like:

//*[contains(text(), 'AutomationFacility')]/descendant::i[@data-tip='Edit Facility']

References:

Going forward consider including HTML code of the page, not the image, the chance of getting comprehensive answer will be much higher

answered Aug 22 '19 at 12:16

Dmitri T

159,985
5
83
133

trying to use ur xpath but still get Element not found error. – Mikhail Siekhin Aug 22 '19 at 13:22

score -1 · Answer 4 · answered Aug 22 '19 at 16:21

Try using below given xpath

//div[@class='fixedDataTableLayout_rowsContainer']//child::div[3]//child::div[1]//child::div[1]//child::div[1]//child::div[2]//child::div[1]//child::div[3]//child::div[1]//child::div[1]//child::div[1]//child::div[1]//child::i[@class='fa fa-edit']

How to write css/xpath selector for a specific icon in specific row in table that is built from div's?

4 Answers4