Get element by cssSelector in Selenium (Java) - java

<html>
<body>
<div id="login-box" class="form-box">
<form id="frmlogin" class="form" name="frmlogin" method="post">
<div class="body">
<div class="form-group">
<input id="email" class="form-control" type="text" maxlength="50" value="dfsf#gmail.com" placeholder="Email" name="email">
<span class="red">Please provide a valid email address</span>
</div>
<div class="form-group">
<input class="form-control" type="password" maxlength="15" placeholder="Password" name="password">
<span class="red">Password must not be empty</span>
</div>
</div>
</form>
</div>
</body>
</html>
I need to get "Please provide a valid email address" and "Password must not be empty" using nth-child in cssSelector.
I tried the below snippet:
//Case 2
driver.findElement(By.name("email")).clear();
driver.findElement(By.name("email")).sendKeys("");
String a=driver.findElement(By.cssSelector("form#frmlogin div.form-group:nth-child(1)>span")).getText();
System.out.println(a);
if(a.contains("valid email address"))
{
System.out.println("Login test case2 Passed");
}
else
{
System.out.println("Login test case2 Failed");
}
It results in NoSuchElementFound.

You can use it by element selector
By.cssSelector("input[name=email]")

Try these codes below:
1- For returning 'Please provide a valid email address':
String a = driver.findElement(By.cssSelector("form#frmlogin div.form-group:nth-child(1)>span")).getText();
System.out.println(a);
2- For returning 'Password must not be empty':
String a = driver.findElement(By.cssSelector("form#frmlogin div.form-group:nth-child(2)>span")).getText();
System.out.println(a);

If you don't have to you could also use XPath selectors which are in my opinion easier to use when you have to select the nth element of something. Try this one:
For E-Mail:
By.xpath("//div[#class='form-group'][1]/span")
For the password:
By.xpath("//div[#class='form-group'][2]/span")
But could you also provide the full HTML page you are working with? Maybe the form is inside an iframe and therefore Selenium has problems locating the element

You need to add .getText() method in order to get the text inside the tag.

Have you tried something like object.getAttribute("innerHTML"), literally with "innerHTML", like this ?
I had a similar problem getting a text from a span tag

Related

Route [categories.update1] not defined. (View: C:\xampp\htdocs\cms\resources\views\categories\create.blade.php)

I am trying to upadate my edited value but when i am clicking edit button then showing this error.
Here is my code:
<form action="{{ isset($category) ? route('categories.update'.
$category->id):route('categories.store')}}" method="POST">
#csrf
<div class="form-group mx-3">
<label for="name" >Name</label>
<input type="text" id="name" class="form-control" name="name" value=" {{isset($category)?
$category->name:''}} ">
</div>
<div class="form-group mx-3">
<button class="btn btn-success">Add category</button>
</div>
Fix your route name, dont concat it, wrap it to array instead
route('categories.update', ['category' => $category->id]) : route('categories.store')
you have syntax error
route('categories.update'. $category->id)
to
route('categories.update',$category->id)
remove . and use ,
you put . which mean concat that's why your getting
categories.update1] not defined. this error you can se 1 id is concat with categories.update

Selenium - How to get following sibling?

So I want to target a textbox that appears in a list that comes after the label "First Name" and send a first name to the box, but can't seem to be able to target the textBox...
What I've tried:
WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::div"));
firstNameLocTry.sendKeys(firstName);
What the li look like:
<li class="WPTO WKVO" role="presentation" data-automation-id="formLabelRequired">
<div class="WBUO WETO WDUO">
<label id="56$551056--uid24-formLabel" data-automation-id="formLabel" for="56$551056--uid24-input">First Name</label>
<div class="WEUO wd-c8594868-6b31-4526-9dda-7d146648964b" aria-hidden="true">First Name</div>
</div>
<div data-automation-id="decorationWrapper" id="56$551056" class="WFUO">
<div class="WICJ">
<div class="WMP2 textInput WLP2 WJ5" data-automation-id="textInput" id="56$551056--uid24" data-metadata-id="56$551056" style="visibility: visible;">
<input type="text" class="gwt-TextBox WEQ2" data-automation-id="textInputBox" tabindex="0" role="textbox" id="56$551056--uid24-input" aria-invalid="false" aria-required="true">
</div>
</div>
</div>
</li>
Any reason my sendKeys just leads to Element not interactable?
The attached HTML code Produce below out put
With the given XPath points to the second "First Name" Div [below pic], when you perform sendKeys, it is obvious that the error "Element not interactable" will be thrown.
Try with below two Xpaths,
1. //label[text()='First Name']//parent::div/following-sibling::div
2. //label[text()='First Name']//parent::div/following-sibling::div//input
Please use following xpath:
//div[text()='First Name']
or try:
//*[contains(text(),'First Name')]

How to properly include a jsp in another jsp

I'm making a form to add events to a list but I need to be able to see in that form the previous events from that list. I have a jsp that shows a list of events but it takes an attribute usually added by the controller when you access the list directly from the browser.
So how can I add the list jsp filling that attribute so it shows a list and not just the headers?
I have alreay included the jsp using
<jsp:include page="comp_list.jsp"></jsp:include>
And it shows the headers but as there is no attribute it shows no list. I tried adding attributes to the include like:
<jsp:include page="comp_list.jsp">
<jsp:attribute name="compensaciones">
${compensaciones}
</jsp:attribute>
</jsp:include>
But when I do it it shows an error telling me that this cannot be done.
Also tried params but that would not be the answer for me because params are treated in the controller and not in the jsp itself.
I'm just getting the header of the list which is fine, but i would like to see the list.
Edit: this is how i build the list in case you are wondering
<tbody>
<c:forEach var="comp" items="${compensaciones}">
<td>${comp.getSomething()}</td>
...
</c:forEach>
</tbody>
<jsp:include page="pagename.jsp" />
i thing you are not provide extension in your include tag
Sometimes since I've had prior experience back in the days with HTML and PHP, we simply just would include things like navigation and header for easier management.
I'm unsure for what purpose you're including JSP, but here's an example of how I've done it since I include JSP if a boolean is true.
The site that is accessed:
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<%
if (loggedin) {
%>
<%# include file="includes/profile.jsp" %>
<% } else {
out.println("<div><h2>You aren't logged in!</h2></div>");
}
%>
</div>
<div class="col-lg-2">
</div>
</div>
And the top and bottom of the JSP file I'm including doesn't contain things like head, title, html, body etc.
<%
User currUser = null;
currUser = (User) session.getAttribute("user");
%>
<div>
<h2>Du er logget ind, velkommen <% out.println(currUser.getUsername().toUpperCase()); %></h2> <br>
<h5>Din Saldo: <b><% if (currUser.getBalance() < 0) { out.println("<font color='red'>" + currUser.getBalance() + "</font>");} else { out.println("<font color='green'>" + currUser.getBalance() + "</font>");} %></b></h5>
<br>
<form class="form" method="post" action="#">
<h4>Oplysninger: </h4>
<h6>
For at ændre oplysninger skal du indtaste dit kodeord!
</h6>
Nuværende Kode: <input type="password" class="form-control" placeholder="kodeord" name="password" required>
<hr>
Email: <input type="text" class="form-control" value="<% out.println(currUser.getEmail()); %>" name="email"> <br>
Brugernavn: <input type="text" class="form-control" value="<% out.println(currUser.getUsername()); %>" name="username"> <br>
<input type="submit" class="btn btn-default" value="Indsend Oplysninger" />
</form>
</div>
When importing JSP into JSP, it's important to know that they will conflict if 1. Duplicate Local Variables. 2. Certain HTML tags aren't correct.
Your intended use seems very complicated to me since I'm not quite understanding it, sorry :3 but if you can't get it working consider to throw it to a session and if it's a one time use then remove it once you used it.
This is working from dacades
<%# include file="../scripts/standard_head_declaration.jsp" %>

Do not clear form content upon POST

I am using a Spring form with tabs, each tab again has a form.
The problems are
1)After the form submission, the error messages are displayed but the form content is cleared which should not happen
2)After the form submission the control immediately goes to the default tab which is the first tab in my case. I want the control to stay on current tab after transaction and not go to default tab.
This is the first time I am working using Spring MVC, JSP, jQuery. Please let me know if I have to make any changes.
administrator.jsp
Below is the code for Manage Users tab functionality.
jQuery:
$(document).ready(function() {
$('#btnManage').click(function() {
if($.trim($('#userId').val()) == ''){
$('#area5').html("User Id is a required field.");
}else if($.trim($('#region').val()) == 'NONE'){
$('#area5').html("Region is a required field.");
}else{
$('#manageUserForm').submit();
}
});
$('#btnCancel5').click(function(e) {
$('#manageUserForm').trigger("reset");
$('#area5').html("");
});
});
administrator.jsp:
<div id="tab5" class="tab">
<div class="devices" >
<form:form method="post" id="manageUserForm" modelAttribute="adminUser" action="/DeviceManager/admin/manageUser">
<div align=center class="message" id="area5">${serverError5}</div>
<div>
<div class="plLabelSearch">User Id:</div>
<div class="plinput"><form:input path="userId" type="text" size="29"/></div>
</div>
<div>
<div class="plLabelSearch">Region:</div>
<div class="plselect">
<form:select path="region">
<form:option value="NONE" label="------- Select One -------" />
<form:option value="A" label="A"/>
<form:options items="${regionList}"/>
</form:select>
</div>
</div>
<br>
<br>
<div>
<div class="plLabelSearch"> </div>
<div class="plinput"><a id="btnManage" class="abutton">OK</a></div>
<div class="plinput"><a id="btnCancel5" class="abutton">Cancel</a></div>
</div>
</form:form>
</div>
</div>
You need to re-render the page with the data from the original form submission.
In your case this probably means your form should contain a few hidden fields to allow you to determine which tab you are on, your JSP will need to be able to understand this data and use it to select the appropriate tab.
because you submission is not asynchronous,after you submit,the administrator.jsp is reset,so the error message is display ,owing to this code <div align=center class="message" id="area5">${serverError5}</div>

How to keep dynamicly added controls ater postback? Javascript, JSP

Good Morning all. I have an issue that I am trying to solve but I am stuck, partially due to me not having a full understanding of JSP/ Java platform, and not having a full understanding of what/ how to implement my code in the right way. I do have an ASP background, so I am a bit familiar with some concepts.
The issue I am running into is: I am trying to populate a dynamic label and text box to appear on a webpage (JSP). I have successfully been able to populate the textboxes with a piece of JavaScript code, however, when I submit the form (on Postback) my dynamic controls are gone but all of my static controls are still present. I need to find a way to keep my information in the dynamic control on submit as well. The form does not submit when I have errors but when the form finish rendering all information and dynamic text are all lost.
My Solution: I have decided to use hidden fields to hold this information but I am unable to fire off the hidden fields after form submit: Please have a look below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="" && document.getElementById('two').value==1){
alert("EMPTY");
document.getElementById('text').style.display = "block";
return false;
}else{
document.myform.submit();
}
}
function display(el) {
if (el.value == "two") {
document.getElementById('text').style.display = "block";
}else {
document.getElementById('text').style.display = "none";
document.getElementById('dynbox').value = '';
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
<label >First Name</label> <input type="text"/>
<div>
<input type="radio" name="radio1" id="one" value="one" onchange="display(this);"/>Eligible
</div>
<div>
<input type="radio" name="radio2" id="two" value="two" onchange="display(this);"/>Not Eligible
</div>
<div id="text" class="glassy" name="mytext" style="display:none;">Other: <input type="text" id="dynbox"/>
</div>
<div>
<input type="hidden" name="mytext" value="${mytext}" />
<br></br>
<input type="submit" onclick="validateForm()" value="Submit"/>
</div>
</form>
</body>
</html>
What I am trying to do is select the "Not Eligible" option and type some text in the text box 'mytext' then press submit. Once I press submit, and if the First Name textbox is not filled in, then I want to trigger my hidden textbox so that I won't loose my information in my dynamically created textbox.
I hope this makes sense. I am not sure of how to do in JSP. Can someone give guidance on how to get my expected results? Keeping dynamic controls after Postback?
Thanks in advance.
One thing first: don't let the names Java and Java-Script confuse you. They have (almost) nothing in common. What you are using here is Java-Script only (no Java, no JSP anywhere).
Anyway, I think it is the condition in your validateForm() function that does not work.
I tested it a little bit and it works with these changes:
your form
<form name="myForm" action="test.html" method="get" onsubmit="return validateForm();">
<label >First Name</label> <input type="text" id="firstName"/>
<div>
<input type="radio" name="radio1" id="one" value="one" onchange="display(this);"/>Eligible
</div>
<div>
<input type="radio" name="radio2" id="two" value="two" onchange="display(this);"/>Not Eligible
</div>
<div id="text" class="glassy" name="mytext" style="display:none;">Other: <input type="text" id="dynbox"/>
</div>
<div>
<input type="hidden" name="mytext" value="${mytext}" />
<br></br>
<input type="submit" value="Submit"/>
</div>
</form>
I simply changed the first input and gave it an ID (since I couldn't find the id 'fname' anywhere), so we can access it with JavaScript.
The next thing is your submit button. You had an additional onclick="validateForm()"; there – which indeed calls the validateForm function but does not listen to the returned value (it executes the function.. nothing more). So the onsubmit="return validateForm()" is enough.
your validate function
function validateForm() {
var x = document.getElementById('firstName').value;
if ((x == null || x == "")) {
alert("EMPTY");
// document.getElementById('text').style.display = "block";
return false;
} else {
return true;
}
}
x can now be retrieved by the element's id (which I find easier).. Anyway, the if condition was one of the problems. In your form you set the value of your radio button 'two' to two. But in the if condition you ask if could be 1... which (in my understanding) should never happen. I just removed it to show you that your function works like this. If you want to check the state of the second radio button, you can test it like this:
if(document.getElementById('two').checked == true)
or even better
if(document.getElementById('two').checked)
one last thing: in your else statement, you can simply return true instead of calling submit.. because here:
onsubmit="return validateForm();"
you ask your validateForm() function to give you either true and then submit or false and then stop submitting.
Oh, one last thing (it'S the last, promise): Java and Java-Script handle all && and || in the order: first ´x==null´ would be tested and then x=="" && document.getElementById('two').value==1 would be evaluated together (&& has a stronger binding than ||).. Just for your information :)

Categories