I need to search for a keyword in the span element (class "D") and then based on the matching criteria, I want to click on the Choose input element button.
Assuming I am searching for "Test", I would like to see working code on how to achieve this.
Example markup:
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test</span>
</div>
</div>
Below is an code sample in java
//Get the text from span
String text = driver
.findElement( By.xpath("//span[#class='js-open-more-info']") )
.getText();
//if the text is equal to Test then click on the button
if( text.equals("Test") ){
driver.findElement( By.xpath("//input[#class='C']") ).click();
}
EDIT
For dealing with multiple divs of same structure sample html(just tweaked ur html and added multiple divs)
HTML
<html>
<body>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test1</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test2</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test3</span>
</div>
</div>
</body>
<script>
document.getElementsByClassName('C')[2].addEventListener("click", myFunction);
function myFunction() {
alert('deleted');
}
</script>
</html>
Code in Java
//get all the divs into a list
List<WebElement> divs = driver.findElements(By.xpath("//div[#class='A']"));
//loop through the list
for(int i=0;i<divs.size();i++)
{
//get text of all the span elements inside multiple divs
String text=divs.get(i).findElement(By.xpath(".//span[#class='js-open-more-info']")).getText();
System.out.println(text);
//if text of span element is equal to Test3 click on the respective delete button
if(text.contentEquals("Test3")){
divs.get(i).findElement(By.xpath(".//input[#class='C']")).click();
}
}
Hope this helps you....Kindly get back if you need any further help
Related
I have the following HTML and I want to select the value "1933".
I tried $('div.mydata dl:nth-of-type(1)').text() but that returns "1933110 m243" where I'd expect "1933". What am I doing wrong?
I checked here already.
console.log($('div.mydata dl:nth-of-type(1)').text());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydata">
<div>
<div class="left">
Year: Lot size: Total: Cars: Motors:
</div>
<div class="right">
<div>
<dl>1933</dl>
</div>
<div>
<dl>110 m<sup>2</sup></dl>
</div>
<div>
N.A.
</div>
<div>
<dl>4</dl>
</div>
<div>
<dl>3</dl>
</div>
</div>
</div>
</div>
The selector: $('div.mydata dl:nth-of-type(1)').text() is essentially selecting the first of every <dl> inside of div.mydata.
If you just want the contents of the first <dl> on the page use:
$($('div.mydata div dl').get(0)).text()
I have a button that is taking text entry in an input box and appending to a URL and redirecting.
The entire system is working, however the problem I am facing is when I enter the text and click the button nothing happens. Every time I add text, the button does nothing.
When I dont enter any information, the button takes me to the url that should have the input appended to (wihtout the appended information)
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<form>
<div class="input-container">
<input type="#{type}" id="txt" required="required"/>
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</form>
</div>
</div>
</div>
the JS:
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
If I use the JS with the following button settings:
(THE FOLLOWING CODE WORKS AND IS ONLY A DEMO TO SHOW THAT THE FUNCTION IS ACTUALLY WORKING FULLY)
The code with the bug is the code above this line.
<div class ="input"> <input type="text" id="txt" />
<label for="txt"> Enter Reg </label> </div>
<div class="buttons">
<button class="pulse" id="btn">Pulse</button>
</div>
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://carservicesinreading.co.uk/check-mot-history/details?car-reg=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
it works first time. However the template of this set up was different css for the input box and different CSS for the button and I just cannot get it in the layout I would like.
Thank you for any help!
the only thing i can see as you haven't provided much info. on the button i added type submit.see if i helps as i can see it redirects and says cannot find mot details.do you have real reg no for testing?
update:removed form tags.
var nickname = document.getElementById("txt");
function redirect() {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<div class="input-container">
<input type="#{type}" id="txt" required="required" />
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</div>
</div>
</div>
I'm writing a code where there's an arrayList having two names in it i.e.Bob & Steve and i want to display them such that if Bob is displayed it should be green in color and if Steve is displayed it should be REd in color.
Component.CSS
.Bob{
font-weight:bold;
color:green;
}
.Steve{
color:red;
}
Component.HTML
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p class="Bob">{{st}}</p>
</div>
<div class="col-2">
<p class="Steve">{{st}}</p>
</div>
</div>
</div>
in Component.Ts
Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts
You can provide class based on condition .
Modify your code like below :
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
</div>
</div>
</div>
Here is the working example :
Working Stackblitz Example
When we have a large number of elements and we can showed it with different background we can adopt several approaches.
Has an array of styles/background and use the index
colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="colors[i]">item.data</div>
</div>
The background was a "property" of "items"
items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="item.background">item.data</div>
</div>
We can use
[style.css_property]="value"
//or
[className]="class"
//or
[ngClass]="{'class':condition}"
In your case, Aman, I think that it's better that your "items" has a property "class" that was, e.g.
{data:...,class:'bold-true green-true'}
So, when you want add a item, you can make a function
getClass()
{
let class="";
if (this isBold)
class="isBlod-true";
if (this.isCut)
class=class+" isCut-true";
if (this.isGreen)
class=class+" isGreen-true";
...
return class
}
And when you add an item, you can do
items.push({data:...,class:this.getClass()})
Then the code
<div *ngFor="let item of items;let index=i>
<div [className]="item.class">item.data</div>
</div>
make the trick
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
I need to search for a keyword in the span element (having unique id) from class Z and then based on the matching criteria, I want to click on the delete icon under div of class A for id 'ucDaily_rptAMRoutineList_ctl01_icon_1'
Assuming I am searching for "Test", I would like to see working code on how to achieve this.
I have multiple class X here.
<div class = "X">
<div class="A">
<div id="ucDaily_rptAMRoutineList_ctl01_1">
<span class="B">
<div id = "ucDaily_rptAMRoutineList_ctl01_icon_1">
<a>...</a>
</div>
</span>
</div>
</div>
<div class = "Z">
<strong>
<span> Test </span>
</strong>
</div>
</div>