screenshotThe scenario is that I am trying to fire sendkeys into a modal dialog box, but webdriver is unable to switch focus onto dialog box. I've tried variety of wait conditions and switch conditions without being successful
Here is the HTML code
New
<div class="row">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a data-toggle="tab" href="#ModalAddCampaignsSearchTab">Search</a></li>
<li role="presentation"><a data-toggle="tab" href="#ModalAddCampaignsToAddTab">New ({{DealerFactory.Campaign.NumberOfCampaignsToAdd()}})</a></li>
</ul>
<div class="tab-content">
<div id="ModalAddCampaignsSearchTab" class="tab-pane fade in active">
<br/>
<div class="col-lg-12">
<label for="Select_A_Campaign">Select A Campaign</label>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search" id="icoSearch"></i>
<i class="fa fa-spinner fa-pulse" id="icoSearching" style="display: none;"></i>
</div>
<input class="form-control" id="txtCampaignSearch" name="txtCampaignSearch" ng-change="findDealersToAdd()" ng-model="DealerFactory.Campaign.searchCampaigns.searchTerm" placeholder="Search" type="text" value="" />
</div>
</div>
<div id="divCampaignSearchModalResults" class="well" ng-show="DealerFactory.Campaign.searchCampaigns.campaigns.length>0" >
<div class="row">
<div class="col-lg-12 text-right">
<p>
Campaigns: {{DealerFactory.Campaign.searchCampaigns.campaigns.length}}
</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Any help/corrections/suggestions are hugely appreciated
The Element I am trying to target is id='txtCampaignSearch'
I am using visual studio (IDE) & webdriver
Bootstrap is creating the modal with javascript and css, it is not creating a new window that you would have to switch between, as your question implies.
The real problem is that using "input-group-addon" blocks the WebDriver from accessing the input field for some reason, a problem I have run into as well.
Waiting for the modal animation to finish is all you should have to do before clearing and sending keys to txtCampaignSearch.
I had a similar problem with input-group-addon and solved it using javascript. Try something like this:
JavascriptExecutor js = (JavascriptExecutor)driver;
// later on...
js.executeScript("document.getElementById('txtCampaignSearch').value = 'something';");
Related
I am trying to automate a site in which I get numbers of records and I want to find a record which contains a particular text and then click on the button corresponding to that record. Problem I am facing is that I can find the text but the button is in another div. Can anyone help?
Below is the html:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="col-lg-5 col-md-5 col-sm-5">
<p class="f-12 ng-binding">
<!-- ngIf: item.childCategoryName.length>0 -->
<p class="f-13 black-text ng-binding ng-scope" ng-if="item.childCategoryName.length>0">
<!-- end ngIf: item.childCategoryName.length>0 -->
<p class="f-13 black-text">
<p class="f-13 black-text">
<h3 id="content" class="s-job ng-binding">test47</h3>
<p id="content" class="f-12 m-t-20 ng-binding">test47 </p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 ">
<div class="pull-right">
<p class="">
<button id="121" class="btn btn-green" ng-click="jobInfo(item.taskId)">
<span class="pull-left ng-binding">Voir la tâche</span>
<span class="circle"/>
</button>
</div>
</div>
</div>
<hr/>
</div>
Try below and let me know the result:
driver.findElement(By.xpath("//h3[.='" + title + "']/following::button[.='Voir la tâche']")).click()
You can also add some explicit wait for element to present in DOM:
WebDriverWait wait = new WebDriverWait(driver,20);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//h3[.='" + title + "']/following::button[.='Voir la tâche']"))).click();
or check if your button located inside an iframe
I try to implement a tabs nav bar in my app. I use Bootstrap3 and follow this example Boostrap Tabs and Pills.
I have one tab (#home) that is presented every Time. The other tabs i want to generate when i click on addInput() function. I.e tab1, tab2, tab3.
I dont know exactly how to get the combination togther. How can i create a list element with href="#menu1" for the navbar and fitting id="menu1" for the content inside tab.
Here is my example CodePen.io
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="txtDevice" class="control-label">Form Field 1</label>
<input type="text" class="form-control" ng-model="info.name" id="txtDevice">
</div>
<div class="form-group">
<label for="txtIP" class="control-label">Form Field 2</label>
<input type="text" class="form-control" ng-model="info.ip" id="txtIP">
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="form-group tab-content">
<div id="home" class="tab-pane fade in active">
<h4>Home</h4>
<p>content</p>
</div>
<div ng-repeat="site in info.sites track by $index">
<h4>tab {{$index +1}}</h4>
<p>content</p>
</div>
</div>
</form>
<button ng-click="addInput()">+add more inputs</button>
{{info | json}}
<hr>
tags = {{tags | json}}
</div>
There were about four things wrong with your pen, that I have fixed here (http://codepen.io/anon/pen/eBRwev?editors=1010)
Your tabs navigation did not include an ng-repeat for the tab headings
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li ng-repeat="site in info.sites track by $index" class="tab-pane fade in">
<a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a>
</li>
</ul>
You forgot to include jQuery and Bootstrap JS libraries which are required to use the bootstrap tabs.
You have to call the following snippet of JS to activate the bootstrap click handling on the tabs
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You're looking something like this?
id="{{ 'menu' + $index }}"
i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.
I have a trivial problem out there. I need to make a filter search on the page with input . I'm using a boonex platform. I need to insert the input tag and it should hide or show the DIV blocks wich depends of value of input. this is the a code of my HTML page:
<ul id="navtabsidebar" class="nav nav-justified nav-tabs">
<bx_repeat:tabs_name>
<li class="__status__">
<a data-toggle="tab" href="#__tab_name__"><i class="fa fa-__icon__"></i></a>
</li>
</bx_repeat:tabs_name>
</ul>
<div class="tab-content" ng-app>
<input type="text" ng-model="filter">
<bx_repeat:tabs>
<div id="__tab_name__" class="tab-pane __status__">
<bx_repeat:users_list>
<div class="memberUser">
__user_avatar__
__chat__
</div>
</bx_repeat:users_list>
</div>
</bx_repeat:tabs>
</div>
Does someone how any ideas? Thanks guys
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div class="corousal-container">
<div class="col-md-12">
<ul id="tabs" class="ops-tabs">
<li class="col-md-4 ops-list active">
<a href="#" class="ops-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Graphs</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="execView">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#execView" class="active"></li>
<li data-slide-to="1" data-target="#execView" class=""></li>
<li data-slide-to="2" data-target="#execView" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container" id="pie-chart1">
</div>
</div>
<div class="item">
<div class="container" id="pie-chart2">
</div>
</div>
<div class="item active">
<div class="container" id="pie-chart3">
<div class="carousel-caption">
<canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
<a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>
</div>
If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.
<div ng-view onload="viewLoaded()"></div>
$scope.viewLoaded=function(){
$('.carousel ').carousel()
}
Use angular Bootstrap directives for this.
http://angular-ui.github.io/bootstrap/