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']]
Related
I am testing a web application which has v-select vuejs dropdown plugin for Country field. How Can I select values in dropdown using selenium webdriver.
It has no select/div.
Below is the HTML before selecting the country from the dropwdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="false">
<div class="dropdown-toggle clearfix">
<input type="search" autocomplete="false" placeholder="Country" aria-label="Search for option" class="form-control" style="width: 100%;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
And this is the HTML after selecting the country as United States from the dropdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="true">
<div class="dropdown-toggle clearfix">
<span class="selected-tag">
United States
<!---->
</span>
<input type="search" autocomplete="false" aria-label="Search for option" class="form-control" style="width: auto;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
Please specify the language binding you are using and the things you've tried so far.
Algo in Java:
click the 'dropdown' field: driver.findElement(By.name("country")).click()
click the option: driver.findElement(By.name("country-1")).click()
These kinds of 'dropdown' fields are usually tied to another div / element.
E.g., when you click the 'dropdown' field (item 1), another dynamic div may appear containing the options in some form of tag.
Most common examples would be, <li>, <div>, <span>. You'll then have to do another click() on the option you want. (item 2)
There are even cases where the dropdown div encloses an input tag to which you can do sendKeys() or setAttribute() as well as cases where you can do a javascript click directly into one of the options.
Suggest you provide more info so we can help you better.
selenium language bindings
html snippet of the dropdown - please avoid using screenshots for snippets
html element of the options that appear when you click the dropdown
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 have following HTML code snippet:
<div class="pagging-box status-border status-border">
<div class="left-container">
<div>
<div class="clientid-hover">
<h4>AAB52</h4>
<div class="hover-title" style="display: none;">
<p>AAB52</p>
</div>
</div>
<div class="clientid-hover-state pl-info">
<h4>CO</h4>
</div>
<div class="client-name-hover">
<h4>Daniel-old Polar-old</h4>
</div>
<p class="contacting-client">Interview Partially Co..</p>
</div>
</div>
<div class="right-container">
<div class="start-session pull-right">
<a href="javascript:void(0)");" class="login-button">
<i class="fa fa-2x fa-play-circle continue-session"></i>
</a>
</div>
</div>
</div>
I want to locate the Anchor tag on the basis of <h4>AAB52</h4> text. I have tried to locate the same with siblings like following xpath
//div[h4[contains(. , "AAB56")]]/following-sibling::div[1]
(xpath is not correct as it is locating second one div immediate of AAB52 text )
following-sibling operates on the parent of the context node, so you first need walk up to the correct context node:
//h4[. = 'AAB52']/../../../following-sibling::div[1]/div/a
Alternatively you can use:
//div[./div/div/h4 = 'AAB52']/following-sibling::div[1]/div/a
The table is dynamically generated and cells looks like
<div class="tableRow">
<input name="fileExt" type="hidden" value="complete">
<div class="tableCell rbpCheckBox">
<input data-index="0" name="SelectItem" type="checkbox" class="check" value="150909_ACTG_01_scyther_WD14R05C12.150910010134">
<input name="SelectPFolderName" type="hidden" value="P_0_2015-09-10-010132_master_ac-analysis_v2.3.0">
</div>
<div class="tableCell accordion-toggle cursor-pointer" data-toggle="collapse" data-target="#collaspseDiv_150909_ACTG_01_scyther_WD14R05C12_150910010134">
<p class="ellipsis rbpName" title="150909_ACTG_01_scyther_WD14R05C12">
150909_ACTG_01_scyther_WD14R05C12
</p>
<input type="hidden" name="formatted_run_name" id="150909_ACTG_01_scyther_WD14R05C12.150910010134"
value="150909_ACTG_01_scyther_WD14R05C12">
</div>
<div class="tableCell">
<span class="rbpStatus rbpStatusPadding" title="multichunk analysis pending at master">
<img src=" done.png " title="Done" class="runStatusImgTag">
</span>
</div>
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
<div class="tableCell">
<p class="rbpStatus">
2015-09-10 01:01:35
</p>
</div>
</div>
The reason why I have to locate the cell by value is because I would like to use it as confirmation that element is present on the page and we are ready to next step\action in the test-case, so I have to wait until some element will be displayed on the page and decided to wait for this cell
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
I'm trying to use something like
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "p.rbpStatus[contains('scyther')]")))
css selectors do not support contains function.
To wait for -
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
Try this:
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//p[contains(#class,'rbpStatus') and contains(text(),'scyther')]")))
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/