How to handle Javascript click by using selenium Webdriver? - javascript

Am using Selenium Webdiver. My test-case is.
Login to site.
click on Notifications link.
am facing issue while clicking on notification link, having the HTML code as follows :-
<ul class="rghtSec fr menu logged"><li><a href="javascript:;">
<div class="topIcon notify"><span> </span></div>
<div class="mTxt">Notifications<span id="rJobCntr" class="rJobCntr"></span></div></a>
<div class="subMenu recommendTT">
<ul>
<li><a target="_blank" class="blob" id="blobId" href="http://jobsearch.naukri.com/notifications">
Fetching jobs you may apply for</a></li>
</ul>
I have tried by following 5 different ways:
/*1*/ driver.findElement(By.xpath("//a[#class='mTxt']")).click();
/*2*/ driver.findElement(By.cssSelector("div[class='topIcon notify']")).click();
/*3*/ driver.findElement(By.linkText("Notifications")).click();
/*4*/ driver.findElement(By.xpath("//div[#class='pNotifyCont dspN']")).click();
/*5*/ Actions mouse=new Actions(driver);
WebElement element=driver.findElement(By.xpath("//div[#class='pNotifyCont dspN']"));
mouse.moveToElement(element).click().build().perform();
Error :
Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"xpath","selector":"//a[#class='mTxt']"}
Command duration or timeout: 7.56 seconds
But none of these ways are resolving the problem :(, Can anyone please help me to solve this?

You can directly click on the link based on the value of href attribute:
driver.findElement(By.cssSelector("a[href*='notifications']")).click();
OR
driver.findElement(By.cssSelector("a[href=\"http://jobsearch.naukri.com/notifications\"]")).click();

Please replace your xpath expression as
driver.findElement(By.xpath("//div[contains(text(),'Notifications')]")).click();
The Notifications is in div tag.
If you want to select the element under this Notifications link, you can by following xpath:
driver.findElement(By.xpath("//div[contains(text(),'Notifications')]/following::a[1]")).click();

Related

Getting "Element.setCapture() is deprecated" warning on console while using on:click function of Svelte JS

I have a code block like this,
{#if categoryArray}
<div class="searchCategoriesBottom">
<div class="search-form" on:keydown>
<ul class="categoryListUl">
{#each categoryArray as catName, index}
<li
class="categoryLi"
on:focus={dispatch('click', catName)}
on:click={openSelectedCat}
>
<span class="categoryDescription">{catName}</span>
</li>
{/each}
</ul>
</div>
</div>
{/if}
I want a container to be opened under it when the "li" element is clicked on mobile phones. When I tried it in Chrome, safari browser, there was no problem, but when I tried it from Firefox browser on my computer, I got this error and the subcategory does not open.
I'm just using on:click. I don't understand why this error occurs. Can anybody help me ? Thanks :)
That code is injected by the dev tools to simulate touch interactions (as the name of the file in the warning indicates). You can click that file link and see the exact code used.
The click should still work, though, at least I cannot reproduce the issue. This is not an error.
(By the way, in general you should only add click handler to interactive elements that are supposed to be clicked, i.e. form elements like button. Otherwise the result will be not accessible.)

Lua, Scrapy/Splash: Clicking button with no href

I am trying to implement a click event to get the details of every entry from this page: https://www.mrlodge.de/wohnungen/
The Html markup of the button which links to the Details looks like this:
<li class="action mrl-list__item details-bt">
<button>
<span class="icon icon-arrow-right">
::before
</span>
"Details"
</button>
</li>
I have some experience with LUA and Splash but have no idea how to attack this problem since there is no actual href link given in the html markup. I have read about the Splash method mouseclick(), which needs pixel directions. However I am looking for a more generic solution with Splash.
Please help
This page doesn't use javascript. Try disabling javascript and the page still works. The page works with forms instead.
>>> fetch('https://www.mrlodge.de/wohnungen/')
2019-07-10 14:56:41 [scrapy.core.engine] INFO: Spider opened
>>> response.xpath('//form/input[#name="name_url"]/#value').extract()
[u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-maxvorstadt-11609/', u'/wohnen-auf-zeit/4-zimmer-haus-muenchen-fuerstenried-10756/', u'/wohnen-auf-zeit/3-zimmer-wohnung-muenchen-lerchenau-11653/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-glockenbachviertel-4180/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-berg-am-laim-11625/']

How to get attribute from the class in xpath

I have this HTML code:
<ul id="globe-welcome" class="fr nav welcome">
<li class="guest" style="display: list-item;">
<a class="loginlnk">LOGIN</a></li></li></ul>
I want to select the WebElement identified by the tag option with text Auto. I tried this:
driver.findElement(By.xpath("//a[contains(#class,'loginlnk')]"))
I encountered this error:
Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"xpath","selector":"/select[#id=category]/option[#id=cat2]"}
Command duration or timeout: 1.52 seconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
And I tried the other xpath.
What is the right syntax? Can someone help me?
Try using below xpath :
driver.findElement(By.xpath("//a[contains(text(),'LOGIN')]"))

Getting HREF of an html node

I have a page at http://www.entrepreneuronfire.com/podcast/edwinhavens/
With an image at http://i.imgur.com/u59IAXB.png
I need to get the download link (i.e. hxxp://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3) of the MP3 file at class named spp-dloada(as web inspector detects) but all my 48 hours attempt ended in smoke.
That download link shows well in chrome (as
<a href="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" download="Edwin_Havens.mp3">
<span class="spp-dloada"></span>
</a>
) but not in FireFox 38 and IE11 but i need them in these two browser.
For FireFox and IE11 HTML Snippet is
<div class="spp-controls">
<span class="spp-speed"/>
<span class="spp-share">
<div class="spp-share-options" style="display: none;">
<a class="spp-share-icon spp-twitter-btn" href="">Share</a>
<a class="spp-share-icon spp-fb-btn" href="">Share</a>
<a class="spp-share-icon spp-gplus-btn" href="">Share</a>
<!--Share-->
</div>
</span>
<span class="spp-dload"/>
<span class="spp-play"/>
Oddest thing is when i click on the download button (as shown in the above image)
iframe changes into
<iframe class="spp-downloader" style="display:none" src="http://www.entrepreneuronfire.com?spp_download=http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3"/>
What have tried so far are-
Software:firebug, temper data,modifyheaders
Language:XPATH, CCS Selector, Jquery
EDIT ---- Sorry for belated adjunct
I need pure XPATH expression too SINCE DIFFERENT BROWSER BEHAVES DIFFERENTLY
N.B. HTML SNIPPET IS FOR CHROME ONLY
The span inside of the link has a class, so you can just grab the parents 'href' attribute using jQuery like so:
$('.spp-dloada').parent().attr('href');
Fiddle
(This is of course assuming you have access to modify the code on this website.)
RE: Edit
It doesn't look like IE supports XPath, according to the answers here: jquery select element by xpath
If you view the source of the page, you can see that the source is different from the generated source you see when you inspect the element.
The link you are trying to fetch is not in the actual page source, however, this is:
<div class="smart-track-player stp-color-ff6100" data-url="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" data-download="true"data-color="ff6100" data-title="Edwin Havens" data-artist="John Lee Dumas chats with" data-uid="IU5Uvc7G" ></div>
I'm guessing the page then has some Javascript functionality which generates a clickable link from this markup.
Try using this jQuery code to access the download url:
$('.smart-track-player').attr('data-url');
An XPath expression to fetch this node would be something like this:
//div[#class='smart-track-player stp-color-ff6100']

Why doesn't my jQuery click event fire on my WordPress site

In my fiddle I have a simple bootstrap nav tab group in which the tabs do 2 things:
Display the corresponding tab pane
Change the value of an input to that defined by the tab anchor's data-payment_method attribute.
Here is the code:
<ul class="payment_methods methods nav nav-pills">
<li class="payment_method_bacs active"> <a href="#payment_method_bacs_desc" data-toggle="pill" data-payment_method='bacs' class='payment_method_choose'>Direct Bank Transfer </a>
</li>
<li class="payment_method_cheque "> <a href="#payment_method_cheque_desc" data-toggle="pill" data-payment_method='cheque' class='payment_method_choose'>Cheque Payment </a>
</li>
<li class="payment_method_paypal "> <a href="#payment_method_paypal_desc" data-toggle="pill" data-payment_method='paypal' class='payment_method_choose'>PayPal <i class = 'fa fa-credit-card'></i></a>
</li>
</ul>
And the panes and the input:
<input type="text" name="payment_method" id="payment_method" value="bacs">
<div class="panel panel-default top-buffer">
<div class="tab-content panel-body">
<div class="tab-pane fade active in" id="payment_method_bacs_desc">
<p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won't be shipped until the funds have cleared in our account.</p>
</div>
<div class="tab-pane fade " id="payment_method_cheque_desc">
<p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
</div>
<div class="tab-pane fade " id="payment_method_paypal_desc">
<p>Pay via PayPal; you can pay with your credit card if you don't have a PayPal account</p>
</div>
</div>
</div>
When I copy/paste my code into jsFiddle it works fine but I'm having trouble in my WordPress site (running WooCommerce), loading the standard scripts associated with both (too much to post here!).
The nav tabs work fine and the tab panes switch without issue. But my own jQuery which is used to update the input doesn't work. I added some console.logs to see how far it gets:
jQuery(document).ready(function ($) {
console.log('actived the payment chooser');
var payment_method_input = $('input#payment_method');
$(".payment_method_choose").click(function () {
var payment_method = $(this).data('payment_method');
console.log('you selected ' + payment_method);
payment_method_input.val(payment_method);
});
});
I get the 'actived the payment chooser' in the console but the 'you selected...' doesn't appear on clicks suggesting the click event isn't firing properly. Something must be conflicting with the event but I don't think it's the bootstrap nav tabs as it all works fine in the fiddle.
No other error messages are in the console. Any idea how I can track down this conflict?
Edit:
After extensive testing I'm completely stumped.
The code works fine standalone in a fiddle
The element selector works fine as demonstrated in this code in my page just before my click event code:
$('.payment_method_choose').each(function(index){
mydata = $(this).data('payment_method');
console.log('This is element ' + index + ' containing data: ' + mydata);
});
Which outputs the relevant info to the console, confirming that the jQuery events do fire in this location and the selector works.
I've tried using .on('click', function() {... to no avail.
Woocommerce loads quite a few JS scripts but I can't see a way to discover what or if is interfering with my click event. The <a> elements were added my me in the template so shouldn't be referenced by any existing scripts. Is there a way to debug this?
Any help greatly appreciated; it is obviously quite difficult to post a web page this extensive for inspection as it's on my local dev server but any suggestions to remove ambiguity please let me know.
You could try the Chrome debugger. Look in the chrome debugger elements panal at the object that you have put the click event on and see if there is an event defined on that object. (I am not sure where jQuery actually puts the evens since I have stopped using jQuery for html5.)
If there are any events on the object just put some break points in the debugger source panel.

Categories