I'm having a problem with selecting an element by linkText which is located in a span. In Chrome it works perfectly but in Firefox it doesn't for some reason and i can't understand it for hours already. I'm trying to locate the element as follows: login.wait.until(ExpectedConditions.elementToBeClickable(By.linkText("Kassa"))).click(); However it simply doesn't find it. I noticed that all other elements that are located in the upper navigation bar and the text isn't in a span tag it finds easley, however thous that are in the span it can't find. What is the difference and what is the best way to reach to that element. Because in this case finding by linkText seems to be perfect. Thank you! HTML attached:
<nav class="site-navbar navbar navbar-inverse navbar-fixed-top bg-teal-600" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand site-gridmenu-toggle" data-toggle="gridmenu">
<span class="navbar-brand-text">whatever</span>
</div>
<button type="button" class="navbar-toggle hamburger hamburger-close collapsed" data-target="#site-navbar-collapse" data-toggle="collapse">
<i class="hamburger-bar" aria-hidden="true"></i>
</button>
<button type="button" class="navbar-avatar navbar-toggle padding-horizontal-0" data-toggle="dropdown" href="#" aria-expanded="false" data-animation="scale-up" role="button">
<span class="avatar avatar-online" style="top: -3px">
<img src="https://whatever.png" alt="..."> <i></i>
</span>
</button>
<a type="button" href="https://whatever" class="navbar-toggle padding-top-15 padding-horizontal-0">
<span class="btn btn-warning"> Kassa </span>
</a>
Code snippet:
System.setProperty("webdriver.gecko.driver","C:\\Utility\\BrowserDrivers\\geckodriver.exe");
driver = new FirefoxDriver();
wait = new WebDriverWait(driver, 10);
driver.manage().window().maximize();
Then i'm going to the webpage, through basic authentication , won't post this data here and basically on the page that i land i want to try to find the element like that:
login.wait.until(ExpectedConditions.elementToBeClickable(By.linkText("Kassa"))).click();
Picture of the nav. bar nav. bar
Although if a certain code works on chrome it should work on firefox as well; but if it isn't working then you can try to find the said element using following :
UPDATED:
WebElement navElement = driver.findElement(By.cssSelector("div.container-fluid a>span.btn.btn-warning"));
Actions action = new Actions(driver);
action.moveToElement(navElement).click().build().perform();
Related
PFB my code. I have designed a drop down list using bootstrap in asp.net mvc. The contents of the list are static and hard coded. When selection is changed in drop down, the latest item is not updated. I am attaching my code as well as the screenshot of the issue. In drop down list, even if I select Assigned, the status list is not getting updated.
the status field is not changing to assigned or in progress<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
You'll have to use Javascript to update the model if you use a bootstrap dropdown. Just keep a hidden for on the page, then attach a handler to the dropdown's change.
One thing to note is that Bootstrap dropdowns don't fire a change event. You'll have to attach handlers to the individual items. Something like this:
$('.dropdown-menu a').click(function(e) {
// set the hidden field to the new value
var newValue = $(this).text();
$('#foo').val(newValue);
});
#Html.HiddenFor(m => m.myProperty, new {id = "foo"})
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
Of course, if you don't really need a Bootstrap dropdown, and perhaps only need it to look like it, you could do it very easily by just using a regular HTML dropdown and styling it like a bootstrap dropdown:
#Html.DropDownListFor(m => m.myProperty, new {#class = "form-control"})
form-control is a bootstrap css class that makes your input controls more Bootstrap-like. It's not exactly the same though (although I like it better), so the choice will be up to you.
I have two .cshmtl pages used for registration. When user completes first registration page I want the controller to jump to another cshtml page without going to controller. How can I complete this task?
<div class="control-group form-actions pull-right">
<a href="~/Views/Registration/RegStep2" class="btn btn-primary">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
When user click above continue button he will jump on another controller without controller...
Please see the below method using Partial views.
<div class="control-group form-actions pull-right">
<div id="first-div">
#Html.Partial("PartialView1")
</div>
<div id="second-div" style="display:none;">
#Html.Partial("PartialView2")
</div>
<a href="#" class="btn btn-primary" onclick="onclickContinue">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
<script type="text/javascript">
function onclickContinue(e) {
$("#first-div").hide();
$("#second-div").show();
}
</script>
I'm using the standard modal popup from twitter bootstrap ui team without the fade property: http://getbootstrap.com/javascript/#modals
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{item}}</a>
</li>
</ul>
<div>Selected Item: {{selected.item}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- modal -->
In chrome and safari (with user-agent = ipad) it loads instantly.
On the iPad it takes more than 2.5 seconds to load. Can anyone point me to how I would start looking into this? I commented out all the css fade elements. Not sure where next to look.
Thanks
Edit: it actually works super fast on a blank page. On a page with about 50 ng-repeat elements it's super slow. My guess is that the ng-repeat elements are being redrawn when this loads? I'll investigate this.
Fixed: The problem was a dropdown in each row which caused it to render slowly. Thanks
I got an error [error] Element //div[#id='newslist_config']//button[#type='button'] not found when I use auto run to run my selenium test but if I click at the command and choose Execute this command The tests pass. Could you tell me why selenium can not find that element?
My selenium test is
<tr>
<td>click</td>
<td>//div[#id='newslist_config']//button[#type='button']</td>
<td></td>
</tr>
The html is
<div id="newslist_config" class="section-box span8">
<div class="accordion-group">
<div class="accordion-heading">
<h3>News-List Configuration</h3>
<a class="btn btn-danger close_newslist_config" data-dismiss="modal" href="#">remove widget</a>
<button class="btn btn-info collapse-btn" type="button" href="#collapse_newslist" data-parent="#newslist_config" data-toggle="collapse">
<span class="edit-btn-txt">
<span class="collapse-btn-txt">
</button>
</div>
<div id="collapse_newslist" class="collapse collapse-box">
</div>
</div>
You could instead try the xpath: //div[#id='accordion-heading']/button[#type='button']
This is a more direct path; if it does not work I would suggest trying to click one of the containing spans as sometimes, due to styling, clicking an elements span achieves more consistent results. I sometimes have this issue when working with WebDriver in KendoUI.
Approach:
1.Derive the CSS Selector from the given DOM.
css=#newslist_config .collapse-btn
2.Perform the click
driver.findElement(By.cssSelector("#newslist_config .collapse-btn")).click();
I'm putting up a Bootstrap "split button" modal, which looks something like this:
<div class="btn-group">
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
<button class="btn btn-small dropdown-toggle btn-primary" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a></li>
<li><a tabindex="-1" href="/comment/something-else">Do something else</a></li>
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_unhide-people" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/comment/do-another-thing">Do another thing...</a></li>
</ul>
</div>
The thing of interest here is that the "Do the thing" action is presented in two ways: As an action to be taken when the main button is clicked, and as an action to be taken when an item in the dropdown menu is selected. These actions are set up as click handlers on the <a> tags in the split button, via some javascript init-ing.
Both actions work fine in Chrome and Safari. However, in Firefox, the action attached to the button does NOT fire, while the action attached to the link does. Some poking around during execution reveals that the click handler on the button is not firing, although it's definitely getting set up.
Any ideas out there about why this is (happening)? Thanks!
Found it, more or less: Twitter Bootstrap buttons are unresponsive in IE8 had a working approach. Instead of formatting the button as:
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
do it as a pure <A> link with the appropriate button-style classes:
<a tabindex="-1" href="#" class=" btn btn-small btn-primary ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
The appearance is identical, and it works fine in Firefox, IE, and Opera (both platforms). Whew.
I just had the same problem in 2019 (Bootstrap 4.3.1, Firefox Quantum 69.0) and found this post from 2011 that solved the problem for me: just remove the animation for the modal (remove the "fade" class from the parent div). Original post is here: http://chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/