In my angular5 app I created a link using anchor tag and calling a function in its click event,it's working all browsers except IE9 & IE10.can anyone know why event handlers not working in IE9 & IE10?
html code
<ul class="menu l-container brand-nav">
<li class="brand-nav__item parentMenuLi" *ngFor="let menu of menuObj;let i=index">
<a id="hd_{{menu.id}}" (click)="routeGoTo(menu)" class="brand-nav__link" tabindex="{{i+2}}" title="{{menu.name}}" >
<span class="link-wrapper" [innerHtml]="menu.name"></span>
</a>
</li>
</ul>
component
routeGoTo(menu){
console.log('menu',menu);
this.router.navigate([menu.url]);
}
Related
How to click on a collapsible nav bar in selenium webdriver?
<div id="termsandconditions" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group" app-field-wrapper="terms_text">
<textarea id="terms_text" name="terms_text" class="form-control tinymce" rows="4"></textarea>
</div>
</div>
</div>
I have tried it through XPath but element not clickable at(x,y) arrives.
You could try clicking with Javascript to bypass the ElementNotClickable error you are seeing:
menu = driver.find_element_by_xpath("//div[contains(#class, 'panel-collapse')]")
driver.execute_script("arguments[0].click();", menu)
Some elements do not accept regular Selenium click() method, so we use Javascript occasionally to work around these special elements.
Hope this helps a bit.
I am trying to automate a website.I am performing the following steps :
Login
LogOut.
I am able to log in successfully. After the Log in step, the Log Out option is present under a button/tab called as MyAccount. But the Log Out option is displayed when one hovers over the MyAccount button. I am trying to write the Selenium code for Log Out step. But i am consistently getting No Element Found Exception.I am using css Selector .The DOM structure of the Log Out element is :
<li class="_2sYLhZ _2mEF1S" data-reactid="31">
<a class="_1AHrFc _2k0gmP" data-reactid="32" href="/account/?rd=0&link=home_account">My Account</a>
<ul class="_1u5ANM" data-reactid="33">
<li class="_2f5Jjv" data-reactid="34">
<a class="_2k0gmP" data-reactid="35" href="/account/?rd=0&link=home_account">Account</a>
</li>
<li class="_2f5Jjv" data-reactid="36">
<a class="_2k0gmP" data-reactid="37" href="/account/orders?link=home_orders">Orders</a>
</li>
<li class="_2f5Jjv" data-reactid="38">
<a class="_2k0gmP" data-reactid="39" href="/account/wallet?link=home_wallet">Wallet</a>
</li>
<li class="_2f5Jjv" data-reactid="40">
<a class="_2k0gmP" data-reactid="41" href="/wishlist?link=home_wishlist">Wishlist</a>
</li>
<li class="_2f5Jjv" data-reactid="42">
<a class="_2k0gmP" data-reactid="43" href="/account/ebookslibrary">eBooks Library</a>
</li>
<li class="_2f5Jjv" data-reactid="44">
<a class="_2k0gmP" data-reactid="45" href="/profile?link=home_review">Reviews & Ratings</a>
</li>
<li class="_2f5Jjv" data-reactid="46">
<a class="_2k0gmP" data-reactid="47" href="/recommendations?link=home_recommendations">Recommendations</a>
</li>
<li class="_2f5Jjv" data-reactid="48">
<a class="_2k0gmP" data-reactid="49" href="/account/subscriptions?link=home_preferences">Email Preferences</a>
</li>
<li class="_2f5Jjv" data-reactid="50">
<a class="_2k0gmP" data-reactid="51" href="/account/Clickme">Click Me</a>
</li>
<li class="_2f5Jjv" data-reactid="52">
<a class="_2k0gmP" data-reactid="53" href="#">Log Out</a>
</li>
</ul>
Below is the peice of code that i am writing for the clicking the Log Out button.
driver.findElement(By.cssSelector("a[text='Log Out'])")).click();
Could someone please tell me what is the error in the css Selector code that I am using.
There is no such possibility in css selector to select element by child text node. You might use one of attributes as below:
driver.findElement(By.cssSelector("a[data-reactid='53'])")).click();
or to use search by XPath selector if you still want to use text content as identifier:
driver.findElement(By.xpath("//a[text()='Log Out'])")).click();
or by link text:
driver.findElement(By.linkText("Log Out")).click();
Try to move mouse over My Account button using selenium actions like this( Im writing c# code but am sure that methods and classes are the same in java, maybe they differ in case):
Actions action = new Actions(driver);
action.MoveToElement(myAccountElement).Perform();
Then, use webdriverwait and explicitly wait for some seconds.
Afrer waiting, find your element(logout button) and perform click.
But...instead of .click() method, use .sendKeys(keys.Enter) or .sendKeys(keys.Return)
click method sometimes do not work on elements(my personal experience on different sites)
PS: your logout link has href set to '#'.
Try this in your cssSelector:
a[href*='#'])
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)
Im using Selenium 2.44 library with IE 9 browser
The menubar is loaded dynamically via js.I tried to locate the element via findElement - used Xpath. It ends up in throwing nosuchElement exception. below is snippet of Dom element
<html><body class="page">
<div id="dynamicMenu" style="display: block;">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li sequence="7">
<a class="sf-with-ul" href="UserContentStart.aspx?category=17">Type
<span class="sf-sub-indicator"> ยป</span></a>
<ul style="display: none; visibility: hidden;">
<li sequence="0">
Brochure
</li>
<li sequence="1">
Direct mail
</li>
<li sequence="2">
E-mail
</li>
<li sequence="3">
Flyer
</li>
<li sequence="4">
Poster
</li>
<li sequence="5">
Presentation
</li>
<li sequence="6">
Letter
</li>
</ul>
</li>
</ul>
</div>
</body></html>
Do I need to execute the javascript before finding the element.
I dont have access to source code.All I inspect is via DOM element source from F12 dev tool.
Thanks !
//li[#sequence='5']/a should work for you. And, before that you have to make sure the element is visible.
Below Code will find the 5th element and will wait untill it gets visible for 20 sec .
Once its visible it will click the element.
In your case 5th element is the link to 'Presentation' which is in 'a' tag.
WebDriverWait Test = new WebDriverWait(driver, 10);
WebElement Fifth_Link = Test.until(ExpectedConditions.elementToBeClickable(By.xpath("//a[contains(text(),'Presentation')]")));
Fifth_Link.click();
Let me know if it does not works.
Here's a picture of the problem: http://i55.tinypic.com/29g0izc.jpg
Problem Site: http://windowsphonedaily.blogspot.com/
I have my tweet and like button setup at the header of each new article underneath the title. It works extremely well with Chrome and Firefox. But I noticed that in IE9 both buttons are forced to the left and that the actual tweet button is missing. You can see in the above picture the comparison between FF4, Chrome 11, and IE9.
Does anyone know how to fix this without breaking it in the other browsers? Here is the code I have used to set up the buttons.
<div class='post-header'>
<table>
<div class='post-header-line-1'/>
<!-- Facebook's Like Button -->
<div style='float:right;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='arial' href='' layout='button_count' show_faces='false' width='10'/></div>
<!-- Twitter's Tweet Button -->
<div style='float:right;'><a class='twitter-share-button' data-count='horizontal' data-via='WinPhoneDaily' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></table>