I'm trying to recognize two objects on two different UI using a dynamic xpath.
So object are as in snippet:
<div class="reports-filter">
<ul id="portfolio-input--temp-ddisable">
<li>
<h3 class='reportOptions'><label>Enter Account Number</label></h3>
<input id="name2" name="name2" type="text" value="" size="20"/>
</li>
</ul>
<input type="hidden" name="secure" value="true"/>
</div>
<div class="multiCol">
<h3 class='reportOptions'><label>Account Number </label></h3>
<input id="reportFilters17.typeSpecific.string" name="reportFilters[17].typeSpecific.string" class="textFilter" type="text" value=""/>
</div>
Now i tried used following xpath but to no luck
//h3[contains(text(),'Account Number$']
//h3[contains(.,'Account Number$']
//h3[#class='reportOptions']
//h3[#class='reportOptions']/text()
//label[contains(.,'Account Number$')]
.//*[contains(text(),'Account Number$')]
why are you using $ in contains function if you want to check end with number then use matches and second thing use //h3[#class='reportOptions']/label or //h3[#class='reportOptions']/label/text()
Related
I have a html source in which several input boxes are defined as follows:
<div class="jupyter-widgets widget-hbox widget-text" style="">
<div class="widget-label" style="display: block;">Project:</div>
<input type="text" class="form-control" placeholder="">
</div>
<div class="jupyter-widgets widget-hbox widget-text" style="">
<div class="widget-label" style="display: block;">Title:</div>
<input type="text" class="form-control" placeholder="">
</div>
...
How do I select the input element associated with the Project element?
This should work:
//div[contains(text(), "Project")]/following-sibling::input
First part //div[contains(text(), "Project")] will find the div element which has "Project" in text attribute, then /following-sibling::input will find the input type sibling of that div element.
Read more about these xpath functions here.
You can use something like: "//input[#type='text'][1]" or "(//input[#type='text'])[1]". Respectively the number represents the element you are looking for. Hope it helps.
I have the following component template
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [form]="form"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
And the following child component template
<section [formGroup]="form">
<mat-form-field>
<input matInput formControlName="emailAddress" placeholder="Email address" />
</mat-form-field>
</section>
Both fields are defined using reactive approach in the parent component and set as required.
When submitting the form, only the field inside the parent component has class mat-form-field-invalid and is shown in red.
Both fields appear as invalid at FormControl instance though.
I have created the following stackblitz to reproduce the issue
https://stackblitz.com/edit/angular-material2-issue-7x45bp
If I'm not mistaken, your invalid form fields will only appear in red after they have been marked as touched, which you can force programtically on form submit if you so wish (just not so elegant, Reactive Forms - mark fields as touched).
Your required fields are missing the asterisk that usually exists next to the form field name to visually indicate that the field is required. To add that just add required="true" or alternatively [required]="someFunctionThatChecksFieldHasRequiredValidatorInFormGroup(fieldName)"
The easiest way to do this is to pass in the FormControl instead of the form:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [childControl]="form.get('emailAddress')"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
<section>
<mat-form-field>
<input matInput [formControl]="childControl" placeholder="Email address" />
</mat-form-field>
</section>
This is actually better for component re-usability anyway (if you also make placeholder a property).
Otherwise, you would probably need to have your child component implement ControlValueAccessor.
I need to write xpath for 'New' button.
have tried:-
By.xpath("//form[#action='/intruvert/action/CustomRolesAction']/div/div[3]/div/a[1]")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#style='background-color: rgb(242, 242, 242);' and #title='New']")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#title='New']")
but not able to click on New button.
I am not sure here if i missing anything.
kindly suggest.
here is the code:-
<html>
<head>
<body>
<div class="bodywrap">
<form action="/intruvert/action/CustomRolesAction" method="post" name="CustomRolesForm">
<input type="hidden" value="CustomRolesDetails_t" name="userAction"/>
<input type="hidden" value="fullaccess" name="accessRight"/>
<input type="hidden" value="" name="uuid"/>
<input type="hidden" value="true" name="fromTab"/>
<input type="hidden" value="" name="selectedDomain"/>
<input type="hidden" value="/My Company:0/Manager:0" name="resourceName"/>
<input type="hidden" value="MANAGER" name="topMenuName"/>
<input type="hidden" value="Users and Roles" name="secondMenuName"/>
<input type="hidden" value="Roles" name="thirdMenuName"/>
<input type="hidden" value="/My Company:0" name="domainName"/>
<input type="hidden" value="/My Company:0" name="currentDomainName"/>
<input type="hidden" value="/Manager:0" name="shortResourceName"/>
<input type="hidden" value="false" name="ucaplModeEnabled"/>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<div class="gensecholder clearfix">
<div class="gensecheader clearfix">
<div class="gensecbody pad10all clearfix">
<div class="gensecfooter clearfix">
<div class="gensecfootright">
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
</div>
#Pranay after viewing your code, i got javascript error. inside your html you have not defined anywhere to javascript. see the image
Your html
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
Modified html
<a class="genericbtn" title="New" href="#">New</a>
Now use xpath method using javascript executor.
WebElement new_button = driver.findElement(By.xpath("//a[contains(text(), 'New')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", new_button);
OR
driver.findElement(By.xpath("//a[contains(text(), 'New')]")).click();
You can try to locate the button directly without ancestors
// by class name
By.className("genericbtn")
// by title
By.cssSelector("[title='New']")
// by partial href
By.cssSelector("[href*='add']")
//a[.="New"]
Just use text find a tag.
. means current context node(a).
You can just use either title or text property to find out the required link:
By.xpath("//a[#title='New']");
Or
By.linkText("New");
Or
By.xpath("//a[text()='New']");
I'm having an issue where the form generated with ruby isn't included inside my #content div, is this because the form is generated after the html is read by the browser (sorry if I sound like a moron on this)
-- edit update - view source --
The code below generates with the email box and submit button outside of the content box
<div id="content">
<!-- text here -->
<form accept-charset="UTF-8" action="/password_resets" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="afmtpSAc93w1uMcnouhY9XmbVTM7fE1VNFvZKnp0kMs=" />
</div>
<div class="field">
<input id="email" name="email" placeholder="email#website.com" type="text" />
</div>
<div class="actions">
<input name="commit" type="submit" value="Reset Password" />
</form> </div>
</div>
I'm not sure I got the question right, but in the html above the last </form> </div> should be </div> </form>
figured it out after visiting this link
Is it correct to use DIV inside FORM?
once I removed the div's for field and action it cleared everything up
I've been trying to use the field-validation framework in Struts2 and have it implemented. The problem is when doing an AJAX call with jquery tags, it targets a resulting div when I want to reload the same page with the fielderror.
<div class="myform">
<s:form id="userForm" action="users" theme="simple">
<h1>Search for Users</h1>
<p><s:fielderror /></p>
<label>Username
<span class="small">Add your name</span>
</label>
<s:textfield id="username" name="username"/>
<label>Point Minimum
<span class="small">Min. 0 points</span>
</label>
<s:textfield name="pointMin"/>
<label>Point Maximum
<span class="small">Max. 5000 points</span>
</label>
<s:textfield name="pointMax"/>
<label>Rate Minimum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMin" name="rateMin"/>
<label>Rate Maximum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMax" name="rateMax"/>
<s:hidden name="searchButtonHit" value="%{true}"/>
<sj:a formIds="userForm"
targets="listingDisplay"
button="true"
validate="only"
type="submit"> Search
</sj:a>
<div class="spacer"></div>
</s:form>
</div>
<div class="spacer"></div>
<div id="listingDisplay"></div>
The <sj:a> tag targets the listingDisplay div so the fielderror as well as the same form is loaded underneath which looks very strange. Is there a better way of doing this? Thanks!
Have a look at the below validation link. It adds a string errorhere to the error message and checks for it after response. You can also do this to reload the page and the reload code can be written in 's onSuccessTopics.
Ajax Validation
Method 2
Very simple but may not work on all browsers.
Set the targets attribute of
<sj:a targets="myform">
to the same div, within which the form exists.