I have a valid xpath but when i use the same Xpath in java to store the WebElements, it gives an error.
It is related to the syntax error.Below is the error
syntax error on token ""]//div/div/button[#id="",
( expected
- Syntax error on token "header", delete this token
- Syntax error on token ""]"", ) expected
below is the httml code
<div id="header-wrap-container">
<div id="header-wrap" style="position: fixed;">
<div class="bredcrumDJV">
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-6">
<div class="col-md-7 col-lg-6 col-xs-12 applySec">
<div class="pull-right hidden-xs">
<button id="applybtn-2" class="btn btn-primary btn-lg dice-btn apply disableButton" type="button" data-toggle="modal" data-target="#cover-resume-modal">Apply Now</button>
<div class="hidden-xs btn-group btn-group-lg">
<div class="visible-xs btn-group btn-group-lg btn-block">
<input id="partnerSurveyURL" value="https://partner.techpapers.com/interstitial/interstitial.aspx?promo=111186" type="hidden"/>
</div>
<div class="visible-xs">
<button id="applybtn-2" class="btn btn-primary btn-lg dice-btn apply disableButton" type="button" data-toggle="modal" data-target="#cover-resume-modal">Apply Now</button>
<div class="hidden-xs btn-group btn-group-lg">
<div class="visible-xs btn-group btn-group-lg btn-block">
<input id="partnerSurveyURL" value="https://partner.techpapers.com/interstitial/interstitial.aspx?promo=111186" type="hidden"/>
</div>
<ul class="list-inline details pull-right djvReport hidden-xs" style="margin-top: 10px; clear: both;">
</div>
</div>
</div>
</div>
</div>
<!-- START REPORT MODAL -->
xpath is .//*[#id="header-wrap-container"]//div/div/button[#id="applybtn-2"]
inserted same xpath in java program.
public class FileUpload {
#Test()
public void checkAlertWindow() throws InterruptedException
{
System.setProperty("webdriver.gecko.driver", "C:\\geckodriver\\geckodriver.exe");
WebDriver webdriver = new FirefoxDriver();
webdriver.get("https://www.dice.com/jobs/detail/Mobile-Test-Automation-Engineer-Etouch-Systems-Corp-Fremont-CA-94555/etouch/734212?icid=sr2-1p&q=NightWatch,Selenium&l=Fremont");
//By bye = By.xpath(".//*[#id="header-wrap-container"]");
// + "/button[#id="applybtn-2"]");
//By b = By.xpath(".//*[#id="header-wrap-container"]");
// webdriver.findElement(By.xpath(".//*[#id="header-wrap-container"]"));
WebElement myDynamicElement = (new WebDriverWait(webdriver, 10))
.until(ExpectedConditions.presenceOfElementLocated(By.id("header-wrap-container")));
System.out.println(myDynamicElement.getText());
By byeid = By.id("header-wrap-container");
webdriver.findElement(By.xpath(" .//*[#id="header-wrap-container"]//div/div/button[#id="applybtn-2"]"));
}
}
why the program gives an error ?
You need to either escape the " inside your statement or use '
Try this:
webdriver.findElement(By.xpath(" .//*[#id=\"header-wrap-container\"]//div/div/button[#id=\"applybtn-2\"]"));
Related
I am working on an ASP.NET Core 5 MVC application, and i'm trying to display a bootstrap modal popup. I used the code below:
Index.cshtml:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
Ajouter
</button>
<table class="table table-bordered table-hover text-center">
...
</table>
_EmployeePartialView.cshtml:
#model Employee
<div class="modal fade" id="addEmp" aria-labelledby="addEmpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmpLabel">Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Profession" class="control-label"></label>
<input asp-for="Profession" class="form-control" />
<span asp-validation-for="Profession" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
EmployeeController:
public IActionResult Index()
{
List<Employee> emp = _dbcontext.Employees.ToList();
return View(emp);
}
[HttpGet]
public IActionResult Create()
{
Employee emp = new Employee();
return PartialView("_EmployeePartialView", emp);
}
But when i click on the button the modal popup is not showing without any errors. any suggestions??
1.Please firstly check if the partial view correctly load to your html page. You can F12 and check the Elements panel in browser.
2.Then please check your bootstrap version,because if you use Bootstrap v 5.0, it used data-bs-target instead of data-target.
3.Be sure the partial view locates in Views/Shared/ or Views/Employee/ folder.
Not sure how do you render the partial view, below I share two ways to render the partial view.
Use html helper to display the partial view:
#model List<Employee>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
Ajouter
</button>
<table class="table table-bordered table-hover text-center">
//...
</table>
#await Html.PartialAsync("_EmployeePartialView", new Employee())
Use ajax to call Create action to display the partial view:
#model List<Employee>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
Ajouter
</button>
<table class="table table-bordered table-hover text-center">
</table>
<div id="display">
</div>
#section Scripts
{
<script>
$(function(){
$.ajax({
type: "get",
url: "/Employee/Create",
success: function (data) {
$("#display").html(data);
}
})
})
</script>
}
Result:
The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
When I select each record, only the first record information is sent. Please check and help
When I select each record, only the first record information is sent. Please check and help
#{ var count = 0;}
#foreach (var item in Model.ProjectViewModels)
{
<tr>
#if (item.PersonState == 1)
{
<td style="width:35px; color:black;">
<span class="badge badge-success" style="width:50px; border-radius:15px;">
فعال
</span>
</td>
}
else
{
<td style="width:35px; color:black;">
<span class="badge badge-danger" style="width:50px; border-radius:15px;">
غیرفعال
</span>
</td>
}
<td>#item.PersonName #item.Family</td>
<td>#item.PersonCode</td>
<td>#item.projectName</td>
<td style="width:300px">
#if (item.PersonState == 1)
{
<div class="text-center row d-flex justify-content-between">
<div style="margin-top:3px">
<a class="fa fa-edit" style="font-size:28px;color:darkblue" asp-controller="Home" asp-action="updatePerson" asp-route-id="#item.PersonID"></a>
</div>
<form asp-controller="Home" asp-action="RemovePerson" asp-route-id="#item.PersonID" method="post">
<a value="submit" class="fa fa-trash-o ajax_delete1 " style="font-size: 27px; color: red; cursor: pointer;"> </a>
</form>
<div>
<a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="#item.PersonID">جزئیات</a>
<a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="#item.PersonID">قرارداد</a>
<a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal#(count)">ترک کار</a>
<!-- The Modal -->
<div class="modal fade" id="myModal#(count)">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="Home" asp-action="PersonTarkKar" asp-route-id="#item.PersonID" asp-route-PersonNewState="0" method="post">
<div class="row">
<div class="col-md-5 col-xs-12">
<label>تاریخ ترک کار</label>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon"
style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
</div>
</div>
</div>
<button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
</div>
</div>
}
#section Scripts{
<script>
$('#calender1').MdPersianDateTimePicker({
targetTextSelector: '#calender1',
});
</script>
}
When I select each record, only the first record information is sent. Please check and help
That is because your modal ids are always the same.
You need change your view like below:
#{ var i = 0; }
#foreach (var item in Model.ProjectViewModels)
{
<tr>
//...
<td style="width:300px">
#if (item.PersonState == 1)
{ //change here......
<a class="btn btn-sm btn-outline-danger"
data-toggle="modal" data-target="#myModal_#i">ترک کار</a>
<!-- The Modal -->
//change here...........
<div class="modal fade" id="myModal_#i">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
//...
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
}
</td>
</tr>
i++; //add this.......
}
Update:
You need loop the js like below:
#section Scripts
{
<link href="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
<script src="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.js"></script>
<script>
for (j = 0; j < #Model.ProjectViewModels.Count(); j++)
{
$('#calender_'+j).MdPersianDateTimePicker({
targetTextSelector: '#calender_'+ j,
});
}
</script>
}
Change:
<input id="calender" name="calender1" type="text" required autocomplete="off" class="form-control" />
To:
<input id="calender_#i" name="calender1" type="text" required autocomplete="off" class="form-control" />
I am trying to read text of an element from tag Name h2 and i am getting null value returned.
<div id="informationModal" class="modal fade in" role="dialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="false" style="display: block; padding-right: 16px;">
<div class="modal-md modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Message</h1>
</div>
<div class="modal-body">
<h2 style="font-size:17px;">
Request cannot be processed. Access denied, read only.
</h2>
</div>
<div class="modal-footer">
<button id="cancelinformation" class="btn-cancelconfirm btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
I have tried getText
#FindBy(xpath="//*[#id='informationModal']//h2")
WebElement certMessage;
String message = certMessage.getText();
System.out.println("Message -->"+ message);
Expected Result --> Request cannot be processed. Access denied, read only.
Actual Result --> []
I realise that this has been asked a number of ways already, but for the life of me I cant find one that is similar to my issue....
I have the adapted the 'recognised' code in the documentation for showing dynamic content in a modal to the following.
Pulling my hair out, and sure I am just doing something silly.......
HTML for the call
<div class="row">
<?php $option=array_column($options, 'name', 'id');?>
<div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
<div class="col-7 col-md-6 col-lg-4">
<a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
<?php echo $option[$vesseldata['Engine1Type']];?>
</a>
</div>
<div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
Then the script is just embedded in the page at the moment to try and make life easy.
<script>
$('#Engine2Modal').on('show.bs.modal', function (event) {
var trigger = $(event.relatedTarget); // Button that triggered the modal
var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
var thing2 = trigger.data('thing2'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text(thing1 + '<br>Serial # ' + thing2);
});
</script>
Then the Modal html is here
<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<form id="service_form" method="get">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
<div class="col-xs-8 col-md-7">
<input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
<?php if(!empty($registration_error['DesignRef'])) { ?>
<br/>
<div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
<?php } ?>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
Finally found it......
Found an article that explains that the text method is not actually the right one to use if you want to parse HTML. And in fact there is an HTML method in jQuery... :-)
modal.find('.modal-title1').html(item);
works.
I am trying to clear form values when modal is hidden using its event but it not working I am referencing all the required files but it not trigger. Below I attach the code of my client side. I am using it in my angular 2 application as an component.
html
<script src="../../../Scripts/bootstrap.min.js"></script>
<script src="../../../Scripts/jquery-2.2.0.min.js"></script>
<script>
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('form')[0].reset();
});
</script>
<button type="button" class="btn-u pull-right margin-bottom-10" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus" aria-hidden="true"></span> Invite User</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Invite User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="InviteUserForm">
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" [(ngModel)]='inviteUser.username' class="form-control" ngControl="username" required>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" required [(ngModel)]='inviteUser.email' class="form-control" ngControl="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-glass"></i></span>
<select [(ngModel)]='inviteUser.partnerId' class="form-control" ngControl="partner" required>
<option>Select one</option>
<option *ngFor="let partner of _partners" value={{partner.Id}}>
{{partner.Name}}
</option>
</select>
</div>
</form>
<button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>
<button type="button" [disabled]="!InviteUserForm.valid" class="btn-u pull-right" (click)="Invite(inviteUser)" data-dismiss="modal">Invite</button>
</div>
</div>
</div>
</div>
You can use angular2 bootstrap modal as https://github.com/dougludlow/ng2-bs3-modal. You can import this plugin into your project.
use this code
constructor() {
this.activate();
}
activate() {
////This event is fired immediately when the hide instance method has been called.
///called to reset the events and the headers.
$('#myModal').on('hidden.bs.modal', function () {
////debugger;
// do your work over here
console.log("modal is closed hidden");
})
////This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
///called to reset the events and the headers.
$('#myModal').on('hide.bs.modal', function () {
////debugger;
// do your work over here;
console.log("modal is closed hide");
})
}