Reputation: 57

Click on an element in a row value by identifying another cell value within the same row

I have to click on an element which is common across all the rows in a table. But the catch is ,I want to click on that element only for 1 particular row. The row i need can be anywhere in the table. So all i need is identify the row i need and then clicking on the element.

Added my code which i have already tried and it failed.

var ClickEdit = element
    .all(by.cssContainingText('.table-element-row'))
    .filter(function(rowElement){
        return rowElement.element(by.css("td h5")).getText().then(function(text){
            return text.trim() == "Company Created by Test Automation"
        });
    })
    .first()
    .element(by.name('action-menu-trigger')).click();

What i need is : Identify the row which has 'Created by Test Automation' and click on the element by name=action-menu-trigger within the same row.

The element by name=action-menu-trigger is present in all the rows of the table.

<tr _ngcontent-c44="" class="table-element-row mat-row ng-tns-c44-63 ng-star-inserted" mat-row="" role="row">

  <td _ngcontent-c44=""
class="custom-t-user mat-cell cdk-column-responsible mat-column-responsible ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<app-user-profile-logo _ngcontent-c44="" class="ng-tns-c44-63" shape="circle" size="small" _nghost-c18="">
  <div _ngcontent-c18="" aria-describedby="cdk-describedby-message-20" cdk-describedby-host=""
    class="logo logo-size--small logo-shape--circle d-inline-block m-0 mt-2"
    style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <div _ngcontent-c18="">
      <div _ngcontent-c18="" class="logo-initial ng-star-inserted">RS</div>
      <img _ngcontent-c18="" class="custom-lg-img-pos ng-star-inserted" data-img-type="no-user"
        data-max-retry="4" data-retry="0"
        src="http://studio.images/demo-designer/images/d374d7560002a04eb20878005a53c1d0df18_4.jpg">
    </div>
  </div>
</app-user-profile-logo>
  </td>

  <td _ngcontent-c44="" class="custom-t-act mat-cell cdk-column-name mat-column-name ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h5 _ngcontent-c44="" class="mb-0 pointer" tabindex="0"><b _ngcontent-c44="" class="ng-tns-c44-63">Company
  Created by Test Automation</b>
</h5>
  </td>

  <td _ngcontent-c44="" class="custom-t-act mat-cell cdk-column-owner mat-column-owner ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h5 _ngcontent-c44="" class="mb-0 pointer"><b _ngcontent-c44="" class="ng-tns-c44-63">Robert</b></h5>
  </td>

  <td _ngcontent-c44="" class="custom-t-cat mat-cell cdk-column-type mat-column-type ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">
  <span _ngcontent-c44="" class="ng-tns-c44-63 ng-star-inserted">
  <span _ngcontent-c44="" class="ng-tns-c44-63 ng-star-inserted"> Owner/Operator </span>
  </span>
</h6>
  </td>

  <td _ngcontent-c44="" class="custom-t-cat mat-cell cdk-column-city mat-column-city ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">Dubai</h6>
  </td>

  <td _ngcontent-c44=""
class="custom-t-cat mat-cell cdk-column-country mat-column-country ng-tns-c44-63 ng-star-inserted" mat-cell=""
role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">United Arab Emirates</h6>
  </td>

  <td _ngcontent-c44=""
class="custom-t-actions mat-cell cdk-column-actions mat-column-actions ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<button _ngcontent-c44="" class="ng-tns-c44-63 mat-icon-button" aria-haspopup="true" mat-icon-button=""
  name="action-menu-trigger">
  <span class="mat-button-wrapper">
    <mat-icon _ngcontent-c44="" class="inv-icon-size--small mat-icon ng-tns-c44-63 mat-icon-no-color"
      role="img" svgicon="inv-ellipsis-h" aria-hidden="true">
      <svg width="100%" height="100%" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet"
        focusable="false">
        <!-- Generator: sketchtool 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
        <title>E1FE60C0-EF43-4EE7-AF32-E28F60D7C746@1,5x</title>
        <desc>Created with sketchtool.</desc>
        <defs></defs>
        <g id="UX-DESIGNER" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="ui-03list_02--spec--product-type" transform="translate(-1493.000000, -589.000000)"
            fill="#333333">
            <g id="list/product-type-copy-2" transform="translate(255.000000, 547.000000)">
              <g id="Group-10" transform="translate(185.000000, 18.000000)">
                <g id="package/list">
                  <g id="ico/options" transform="translate(1053.000000, 24.000000)">
                    <g id="Group-4">
                      <circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
                      <circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
                      <circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </mat-icon>
  </span>
  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
  <div class="mat-button-focus-overlay"></div>
</button>
<mat-menu _ngcontent-c44="" class="ng-tns-c44-63 ng-tns-c9-93" xposition="before">
</mat-menu>
  </td>
</tr>

<tr _ngcontent-c44="" class="table-element-row mat-row ng-tns-c44-63 ng-star-inserted" mat-row="" role="row">
  <td _ngcontent-c44=""
class="custom-t-user mat-cell cdk-column-responsible mat-column-responsible ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<app-user-profile-logo _ngcontent-c44="" class="ng-tns-c44-63" shape="circle" size="small" _nghost-c18="">
  <div _ngcontent-c18="" aria-describedby="cdk-describedby-message-20" cdk-describedby-host=""
    class="logo logo-size--small logo-shape--circle d-inline-block m-0 mt-2"
    style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <div _ngcontent-c18="">
      <div _ngcontent-c18="" class="logo-initial ng-star-inserted">RS</div>
      <img _ngcontent-c18="" class="custom-lg-img-pos ng-star-inserted" data-img-type="no-user"
        data-max-retry="4" data-retry="0"
        src="http://studio.images/demo-designer/images/d374d7560002a04eb20878005a53c1d0df18_4.jpg">
    </div>
  </div>
</app-user-profile-logo>
  </td>
  <td _ngcontent-c44="" class="custom-t-act mat-cell cdk-column-name mat-column-name ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h5 _ngcontent-c44="" class="mb-0 pointer" tabindex="0"><b _ngcontent-c44="" class="ng-tns-c44-63">Company
  Created by Test Automation</b>
</h5>
  </td>
  <td _ngcontent-c44="" class="custom-t-act mat-cell cdk-column-owner mat-column-owner ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h5 _ngcontent-c44="" class="mb-0 pointer"><b _ngcontent-c44="" class="ng-tns-c44-63">Robert</b></h5>
  </td>
  <td _ngcontent-c44="" class="custom-t-cat mat-cell cdk-column-type mat-column-type ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">
  <span _ngcontent-c44="" class="ng-tns-c44-63 ng-star-inserted">
  <span _ngcontent-c44="" class="ng-tns-c44-63 ng-star-inserted"> Owner/Operator </span>
  </span>
</h6>
  </td>
  <td _ngcontent-c44="" class="custom-t-cat mat-cell cdk-column-city mat-column-city ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">Dubai</h6>
  </td>
  <td _ngcontent-c44=""
class="custom-t-cat mat-cell cdk-column-country mat-column-country ng-tns-c44-63 ng-star-inserted" mat-cell=""
role="gridcell">
<h6 _ngcontent-c44="" class="mb-0 opacity-medium">United Arab Emirates</h6>
  </td>
  <td _ngcontent-c44=""
class="custom-t-actions mat-cell cdk-column-actions mat-column-actions ng-tns-c44-63 ng-star-inserted"
mat-cell="" role="gridcell">
<button _ngcontent-c44="" class="ng-tns-c44-63 mat-icon-button" aria-haspopup="true" mat-icon-button=""
  name="action-menu-trigger">
  <span class="mat-button-wrapper">
    <mat-icon _ngcontent-c44="" class="inv-icon-size--small mat-icon ng-tns-c44-63 mat-icon-no-color"
      role="img" svgicon="inv-ellipsis-h" aria-hidden="true">
      <svg width="100%" height="100%" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet"
        focusable="false">
        <!-- Generator: sketchtool 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
        <title>E1FE60C0-EF43-4EE7-AF32-E28F60D7C746@1,5x</title>
        <desc>Created with sketchtool.</desc>
        <defs></defs>
        <g id="UX-DESIGNER" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="ui-03list_02--spec--product-type" transform="translate(-1493.000000, -589.000000)"
            fill="#333333">
            <g id="list/product-type-copy-2" transform="translate(255.000000, 547.000000)">
              <g id="Group-10" transform="translate(185.000000, 18.000000)">
                <g id="package/list">
                  <g id="ico/options" transform="translate(1053.000000, 24.000000)">
                    <g id="Group-4">
                      <circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
                      <circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
                      <circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </mat-icon>
  </span>
  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
  <div class="mat-button-focus-overlay"></div>
</button>
<mat-menu _ngcontent-c44="" class="ng-tns-c44-63 ng-tns-c9-93" xposition="before">
</mat-menu>
  </td>
</tr>

<button _ngcontent-c44="" class="ng-tns-c44-63 mat-icon-button" aria-haspopup="true" mat-icon-button="" name="action-menu-trigger"><span class="mat-button-wrapper"><mat-icon _ngcontent-c44="" class="inv-icon-size--small mat-icon ng-tns-c44-63 mat-icon-no-color" role="img" svgicon="inv-ellipsis-h" aria-hidden="true"><svg width="100%" height="100%" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
    <!-- Generator: sketchtool 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <title>E1FE60C0-EF43-4EE7-AF32-E28F60D7C746@1,5x</title>
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="UX-DESIGNER" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ui-03list_02--spec--product-type" transform="translate(-1493.000000, -589.000000)" fill="#333333">
            <g id="list/product-type-copy-2" transform="translate(255.000000, 547.000000)">
                <g id="Group-10" transform="translate(185.000000, 18.000000)">
                    <g id="package/list">
                        <g id="ico/options" transform="translate(1053.000000, 24.000000)">
                            <g id="Group-4">
                                <circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
                                <circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
                                <circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg></mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button>

Upvotes: 2

Answers (2)

yong

Reputation: 13712

You can pass the search text into by.cssContainingText() as following, then you no need to filter.

element(by.cssContainingText('tr.table-element-row', 'Company Created by Test Automation'))
.element(by.xpath('./..'))
.element(by.css('button[name="action-menu-trigger"]'))
.click()

Upvotes: 0

Mate Mrše

Reputation: 8394

If you can use XPath, to select the <button> element that is the descendant of the element containing "Created by Test Automation" text, use the following selector

//td[contains(., 'Created by Test Automation')]/following-sibling::td//button

Upvotes: 1

Click on an element in a row value by identifying another cell value within the same row

Answers (2)

Related Questions