From the image attached, xpath for the delete button of the first account is
//*[@id='users-wrapper']/div[1]/div/table/tbody/tr[1]/td[5]/div/span[1]
I have the option to keep on adding the accounts which will result in increase of row count tr in the above xpath
Trying to achieve: When i add a new account with the screen name "twitter",i should get the row number of that account and build the xpath on the fly. so that various test cases can be written.
I can achieve this by writing a method. But how to achieve this in the page object model
@FindBy(xpath = "//*[@id='userswrapper']/div[1]/div/table/tbody/tr[1]/td[5]/div/span[1]")
public List<WebElement> requiredChannel;
Please note that id's for these elements are generated dynamically
<div class="container_box">
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-Twitter" aria-labelledby="ui-id-1" aria-selected="true">
<a href="accountTwitter" title="#tabs-Twitter" class="source ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><img src="/includes/css/images/twitter.png" border="0"> Twitter </a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-fb" aria-labelledby="ui-id-2" aria-selected="false">
<a href="FBAcct" title="#tabs-fb" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2"><img src="/includes/css/images/facebook-icon.png" border="0"> Facebook</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-pages" aria-labelledby="ui-id-3" aria-selected="false">
<a href="pagesFBAcct" title="#tabs-pages" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3" data-tooltip="#tabs-pages"><img src="/images/facebook-fan-page-icon-16.png" width="16px" height="16px" border="0"> Facebook Pages</a>
</li>
<!-- put permission check later -->
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-fb-groups" aria-labelledby="ui-id-4" aria-selected="false">
<a href="groupsFBAcct" title="#tabs-fb-groups" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4"><img src="/images/facebook/facebook-group-icon-small.png" width="16px" height="16px" border="0"> Facebook Groups</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-linkedin" aria-labelledby="ui-id-5" aria-selected="false">
<a href="LinkedIn" title="#tabs-linkedin" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5"><img src="/includes/css/images/linkedin.png" border="0"> LinkedIn</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-companypage" aria-labelledby="ui-id-6" aria-selected="false">
<a href="viewCompanyPagesLinkedIn" title="#tabs-companypage" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6" data-tooltip="#tabs-companypage"><img src="/images/pagelinkedin-icon.png" border="0"> LinkedIn Company Pages</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-youtube" aria-labelledby="ui-id-7" aria-selected="false">
<a href="Youtube" title="#tabs-youtube" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-7"><img src="/images/Youtube-icon-16.png" border="0"> YouTube</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-gppages" aria-labelledby="ui-id-8" aria-selected="false">
<a href="GooglePlusPage" title="#tabs-gppages" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-8"><img src="/images/google_plus_pages.png" width="16px" height="16px" border="0"> Google+ Pages</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-tumblr" aria-labelledby="ui-id-9" aria-selected="false">
<a href="Tumblr" title="#tabs-tumblr" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-9"><img src="/images/tumblr.png" border="0"> Tumblr</a>
</li>
<!-- added by sumanto on 5th nov 2014 -->
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-instagram" aria-labelledby="ui-id-10" aria-selected="false">
<a href="Instagram" title="#tabs-instagram" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-10"><img src="/includes/css/images/instagram.png" border="0"> Instagram </a>
</li>
<!-- end of addition by sumanto -->
</ul>
<div id="tabs-Twitter" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
<div class="box">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="15%"><b>User </b>
</th>
<th width="15%"><b>Screen Name </b>
</th>
<th width="30%"><b>Bio </b>
</th>
<th width="20%" align="center"><b>Added By </b>
</th>
<th width="10%" align="center"><b>View in Analytics </b>
</th>
<th width="10%" valign="middle"><b>Actions </b>
</th>
</tr>
</thead>
<tbody>
<tr id="twt_2279" tabindex="2279">
<td>
<div style="width:48px;float: left"><img src="http://pbs.twimg.com/profile_images/786866368457023488/fMEvHynN_normal.jpg">
</div>
<div style="float: left;margin-left: 8px;margin-top: 17px;">James heller</div>
</td>
<td>jheller360</td>
<td><span style="max-width:140px;"></span>
</td>
<td>
<div style="text-align: left;">
<b>Name </b>:nagarjun reddy
<br>
<b>Short Name </b>:nagarjun
<br>
<b>Email Id </b>:nagarjun.reddy@in-rev.com
</div>
</td>
<td>
<p class="field switch">
<label id="en2279" class="cb-enable selected" onclick="javascript:switchAnalytics(this);"><span>On</span>
</label>
<label id="dis2279" class="cb-disable" onclick="javascript:switchAnalytics(this);"><span>Off</span>
</label>
<input id="M1VJeGpvRUNHMHhYeGFob0NNaGRBUT09" class="checkbox" checked="checked" type="checkbox">
</p>
</td>
<td valign="middle">
<div style="margin-top:14px;">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn del" href="javascript:void(0);" onclick="removeTwt('M1VJeGpvRUNHMHhYeGFob0NNaGRBUT09');" title="Delete Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn addPeople" href="javascript:void(0);" onclick="shareTwtAcc('M1VJeGpvRUNHMHhYeGFob0NNaGRBUT09','TWITTER');" title="Share Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn reassociate" href="javascript:void(0);" onclick="reAccTwtAcc('M1VJeGpvRUNHMHhYeGFob0NNaGRBUT09');" title="Re-Associate Twitter Account">
</a>
<span id="stat2279">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn deactivate" href="javascript:void(0);" onclick="status('M1VJeGpvRUNHMHhYeGFob0NNaGRBUT09' ,'false','TWITTER',2279);" title="Deactivate"></a>
</span>
</div>
</td>
</tr>
<tr id="twt_2280" tabindex="2280">
<td>
<div style="width:48px;float: left"><img src="http://pbs.twimg.com/profile_images/636829932845293568/xkp-0_NW_normal.jpg">
</div>
<div style="float: left;margin-left: 8px;margin-top: 17px;">james.v</div>
</td>
<td>Lokesh2102V</td>
<td><span style="max-width:140px;"></span>
</td>
<td>
<div style="text-align: left;">
<b>Name </b>:lokesh v
<br>
<b>Short Name </b>:lokesh
<br>
<b>Email Id </b>:lokesh.v@simplify360.com
</div>
</td>
<td>
<p class="field switch">
<label id="en2280" class="cb-enable selected" onclick="javascript:switchAnalytics(this);"><span>On</span>
</label>
<label id="dis2280" class="cb-disable" onclick="javascript:switchAnalytics(this);"><span>Off</span>
</label>
<input id="blNVRkU2d0ZzelNSN2F2dVZpT090dz09" class="checkbox" checked="checked" type="checkbox">
</p>
</td>
<td valign="middle">
<div style="margin-top:14px;">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn del" href="javascript:void(0);" onclick="removeTwt('blNVRkU2d0ZzelNSN2F2dVZpT090dz09');" title="Delete Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn addPeople" href="javascript:void(0);" onclick="shareTwtAcc('blNVRkU2d0ZzelNSN2F2dVZpT090dz09','TWITTER');" title="Share Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn reassociate" href="javascript:void(0);" onclick="reAccTwtAcc('blNVRkU2d0ZzelNSN2F2dVZpT090dz09');" title="Re-Associate Twitter Account">
</a>
<span id="stat2280">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn deactivate" href="javascript:void(0);" onclick="status('blNVRkU2d0ZzelNSN2F2dVZpT090dz09' ,'false','TWITTER',2280);" title="Deactivate"></a>
</span>
</div>
</td>
</tr>
<tr id="twt_2281" tabindex="2281">
<td>
<div style="width:48px;float: left"><img src="http://pbs.twimg.com/profile_images/645847539762139137/kjzJmIQ2_normal.jpg">
</div>
<div style="float: left;margin-left: 8px;margin-top: 17px;">lok2102</div>
</td>
<td>lok2102</td>
<td><span style="max-width:140px;"></span>
</td>
<td>
<div style="text-align: left;">
<b>Name </b>:lokesh v
<br>
<b>Short Name </b>:lokesh
<br>
<b>Email Id </b>:lokesh.v@simplify360.com
</div>
</td>
<td>
<p class="field switch">
<label id="en2281" class="cb-enable selected" onclick="javascript:switchAnalytics(this);"><span>On</span>
</label>
<label id="dis2281" class="cb-disable" onclick="javascript:switchAnalytics(this);"><span>Off</span>
</label>
<input id="U2pweG5yYlk5RTlNTnJabFJvc3dVdz09" class="checkbox" checked="checked" type="checkbox">
</p>
</td>
<td valign="middle">
<div style="margin-top:14px;">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn del" href="javascript:void(0);" onclick="removeTwt('U2pweG5yYlk5RTlNTnJabFJvc3dVdz09');" title="Delete Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn addPeople" href="javascript:void(0);" onclick="shareTwtAcc('U2pweG5yYlk5RTlNTnJabFJvc3dVdz09','TWITTER');" title="Share Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn reassociate" href="javascript:void(0);" onclick="reAccTwtAcc('U2pweG5yYlk5RTlNTnJabFJvc3dVdz09');" title="Re-Associate Twitter Account">
</a>
<span id="stat2281">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn deactivate" href="javascript:void(0);" onclick="status('U2pweG5yYlk5RTlNTnJabFJvc3dVdz09' ,'false','TWITTER',2281);" title="Deactivate"></a>
</span>
</div>
</td>
</tr>
<tr id="twt_2283" tabindex="2283">
<td>
<div style="width:48px;float: left"><img src="http://pbs.twimg.com/profile_images/778556660532977664/FnGnlgiN_normal.jpg">
</div>
<div style="float: left;margin-left: 8px;margin-top: 17px;">cynthia simplify360</div>
</td>
<td>testpagemaush</td>
<td><span style="max-width:140px;"></span>
</td>
<td>
<div style="text-align: left;">
<b>Name </b>:Maushumi Sen
<br>
<b>Short Name </b>:MaushumiAdmin
<br>
<b>Email Id </b>:maushumi.sen@simplify360.com
</div>
</td>
<td>
<p class="field switch">
<label id="en2283" class="cb-enable selected" onclick="javascript:switchAnalytics(this);"><span>On</span>
</label>
<label id="dis2283" class="cb-disable" onclick="javascript:switchAnalytics(this);"><span>Off</span>
</label>
<input id="Q1p2Qk5JQXVXbWFQTFMrLytiOU15QT09" class="checkbox" checked="checked" type="checkbox">
</p>
</td>
<td valign="middle">
<div style="margin-top:14px;">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn del" href="javascript:void(0);" onclick="removeTwt('Q1p2Qk5JQXVXbWFQTFMrLytiOU15QT09');" title="Delete Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn addPeople" href="javascript:void(0);" onclick="shareTwtAcc('Q1p2Qk5JQXVXbWFQTFMrLytiOU15QT09','TWITTER');" title="Share Twitter Account">
</a>
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn reassociate" href="javascript:void(0);" onclick="reAccTwtAcc('Q1p2Qk5JQXVXbWFQTFMrLytiOU15QT09');" title="Re-Associate Twitter Account">
</a>
<span id="stat2283">
<a style="text-decoration: none;padding:3px 8px 8px 3px;" class="btn deactivate" href="javascript:void(0);" onclick="status('Q1p2Qk5JQXVXbWFQTFMrLytiOU15QT09' ,'false','TWITTER',2283);" title="Deactivate"></a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button onclick="addTwtAccnt();" id="addTwtAccnt" class="connecttw" style="margin-top: 4px; min-width: 164px;">Add Twitter Account </button>
</div>
<div id="tabs-fb" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-pages" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-3" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-fb-groups" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-4" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-linkedin" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-5" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-companypage" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-6" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-youtube" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-7" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-gppages" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-8" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-tumblr" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-9" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-instagram" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-10" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
<div id="tabs-1"></div>
</div>
</div>
