I have HTML that looks like:
<div class="row">
<div class="col-md-6">
<dl>
<dt>Prerequisites</dt>
<dd>15-510</dd>
</dl>
</div>
<div class="col-md-6">
<dl>
<dt>Corequisites</dt>
<dd>None</dd>
</dl>
</div>
</div>
And I want to get the value inside <dd> based on the corresponding <dt>. For example, I want to do something like select 'Prerequisites' and get '15-510'.
Thank you.
How about xpath("//dt[text() = 'Prerequisites']/following-sibling::dd")?
Related
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
I want to identify the following element but unable to do so.
<fieldset class="ng-scope" ng-if="permissions.isEditable && (permissions.isApprover || permissions.isReviewer)">
<div class="row">
<div class="small-12 columns">
<div class="label-container">
<label>Reviewer comments <a class="tooltip-item" href="javascript:void(0);">[?]
<div class="tooltip">
<p>Contents of the comment
can be viewed by Immigration
team and employee who logged
the request.</p>
</div>
</a>
</label>
</div>
<div class="value-container">
<textarea name="Comments" class="required-on-send-back required-on-hold required-on-reject ng-pristine ng-untouched ng-valid" ng-model="requisitionRequest.request.reviewerComments" rows="4"></textarea>
</div>
</div>
</div>
</fieldset>
Note there are 3 fieldset above as well .
You can write a css selector based on the fieldset attributes like:
fieldset[ng-if*='isApprover'][ng-if*='isReviewer'][ng-if*='isEditable']
You can remove any of the [] condition block.
This xpath should help in identifying the fieldset:
//fieldset[.//textarea[#name='Comments']]
I am looking to implement the following table where the name column uses two rows while age and location uses one. The text would be centered in their own row:
Is this bootstrap compliant? If so, how would you implement such a table?
Thanks.
Yep, you can nest rows and columns in bootstrap. The markup would look something like this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Name</h1>
<div class="row">
<div class="col-sm-6">
<p>John Smith</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Contractor</p>
</div>
</div>
</div>
<div class="col-sm-4">
<h1>Age</h1>
</div>
<div class="col-sm-4">
<h1>Location</h1>
</div>
</div>
</div>
When I try to nest two col-md-2 columns inside a col-md-4 column, the nested columns are too small, more like md-1 or less. I have used a row inside the outer tag as suggested by the documentation. I tried changing all the "md" to "lg" and "sm", but that didn't make any difference. How can I make my second row of nested inputs line up with my first row of non-nested inputs?
Screenshot:
Jsfiddle version (resize the result pane so that the controls are beside each other)
<div class="container" id="content">
<form>
<div class="row">
<div class="col-md-2">Label
<input value="nonnested input">
</div>
<div class="col-md-2">Label
<input value="nonnested input">
</div>
</div>
<br/>
<div class="row">
<div class="form-group col-md-4">
Label across two inputs, Label across two inputs
<div class="row">
<div class="col-md-2">
<input value="nested input 1" >
</div>
<div class="col-md-2">
<input value="nested input 2" >
</div>
</div>
</div>
</div>
</form>
</div>
Ah I get it now! The nested columns need to total to 12 to fill the width of the outer tag. So my second set of inputs should read like this:
<div class="form-group col-md-4">
Label across two inputs, Label across two inputs
<div class="row">
<div class="col-md-6">
<input value="nested input 1" >
</div>
<div class="col-md-6">
<input value="nested input 2" >
</div>
</div>
</div>
ow do I get the value of "Feb 2015" from HTML below? The problem I'm facing is there can be multiple "col-lg-4 col-md-6" classes or just a single one, depending on how much information a user provides about themselves:
<div class="row">
<div class="col-lg-4 col-md-6">
<dl>
<dt>Resident Since</dt>
<dd>Mar 2013</dd>
</dl>
</div>
<div class="col-lg-4 col-md-6">
<dl>
<dt>Hometown</dt>
<dd>New York</dd>
</dl>
</div>
<div class="col-lg-4 col-md-6">
<dl>
<dt>Occupation</dt>
<dd>Builder</dd>
</dl>
</div>
<div class="col-lg-4 col-md-6">
<dl>
<dt>Joined</dt>
<dd>Feb 2015</dd>
</dl>
</div>
</div>
Multiple ways to do this. If you want to find the xpath based on the what you have in dt, since that makes sure that a joined date then do the following xpath
//div[#class='col-lg-4 col-md-6']//dt[.='Joined']/../dd
Or, if it is always the last child you can use the following css
.col-lg-4.col-md-6:last-child dd