I am using WebDriver API to test a webpage and the click() method is not working on a particular webpage.
Neither it is showing any exception nor clicking on the webelement (a link in my case). I tried to find the element using xpath, id and link but the click did not work.
However, when I tried contextClick (i.e. right click) operation on the same link, it worked. Also when I print the text or tagName of the web-element, the text or tagName is displayed perfectly fine on the output screen.
My code:
WebDriver browser=new InternetExplorerDriver();
browser.get("some website");
WebElement linkkk=browser.findElement(By.xpath("//*[#id='topsort']/li[2]/a"));
linkkk.click();
web-page code:
<div class="content">
<div class="blind" style="display: none;"></div>
<ul id="topsort">
<li>something</li>
<li><a class="category_nav_remote_link selected" href="some website">some text</a></li>
</ul>
</div>
</div>
I even used:
Actions action=new Actions(browser);<br/>
action.click(linkkk);
action.perform();
But in vain.
Try below options:
WebElement linkkk=browser.findElement(By.xpath("//*[#id='topsort']/li[2]/a"));
linkkk.click();
//click once again
linkkk.click();
OR - Try by sending ENTER key as below:
linkkk.sendKeys(Keys.ENTER);
OR - First move to that link & then click or send ENTER key
Actions moveTo = new Actions(driver);
moveTo.moveToElement(linkkk).click().perform();
Try using IJavaScriptExecutor to click on the button. It's been very successful on my app.
((IJavaScriptExecutor)_webDriver).ExecuteScript("$(arguments[0].click()",webElement);
Related
I'm trying to click the "Visit" button here:
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
There many other buttons (same but with different links) on the page, but I need to click only 1 (first link in a row) each time I visit/load the page.
Tried to combine those two solutions (1 and 2) but unfortunately I'm absolutely dumb in it:-)).
Also tried the simpliest thing which works in most cases
(function (){
document.querySelector('selector').click();
But obviously didn't help at all.
Thank you.
The link in your example doesn't have the correct href therefore click() wont have the desired result.
Method 1:
Get the link e.g. querySelector()
Simulate mousedown on the link so page JS changes the URL
Click the link
Method 2:
Get the link e.g. querySelector()
Get the onmousedown attribute
Get the final URL from the above attribute using Regular Expression
Assign the URL to the link
Click the link or open using GM_openInTab/GM.openInTab
Method 3: (not recommanded)
Get the link e.g. querySelector()
Get the onmousedown attribute
Use eval() to run the onmousedown JS on the link
Click the link
Here is an example of the method 1 using CustomEvent()
// get the link using the correct query
const a = document.querySelector('a.btn-small');
if (a) {
// simulate mousedown
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
console.log(a.href); // not needed, for debuggin only
a.click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
Using GM.openInTab
const a = document.querySelector('a.btn-small');
if (a) {
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
GM.openInTab(a.href)
}
I'm a developer of 5 years, so I am no stranger to asp.net, but I am new to JQuery and JSON, so maybe that's why I'm not getting it. I followed the tutorial here about how to successfully login with facebook, and it works!
http://www.codeproject.com/Articles/450535/Using-Facebook-login-in-ASP-NET-application-withou
but my problem is that I am making a "comments" system on my site, and I want to user to type in their comment, then right below it click the "login with facebook" button, then when it successfully logs in, have it append the comment to the list of comments.
My only problem is I don't know how to get the Login to trigger C# code on the server side. Am I missing something here in order to hook into the "login successful" event of facebook?
I suspect it has something to do with these lines of code here:
enter codedd here
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
}
}
//This method will load the values to the labels
function LoadValues (me) {
if (me.name) {
document.getElementById('displayname').innerHTML = me.name;
document.getElementById('FBId').innerHTML = me.id;
document.getElementById('DisplayEmail').innerHTML = me.email;
document.getElementById('Gender').innerHTML = me.gender;
document.getElementById('DOB').innerHTML = me.birthday;
document.getElementById('auth-loggedin').style.display = 'block';
}
}
or here:
<div id="fb-root"></div> <!-- This initializes the FB controls-->
<div class="fb-login-button" autologoutlink="true" scope="user_birthday,email" >
Login with Facebook
</div> <!-- FB Login Button -->
<!-- Details -->
<div id="auth-status">
<div id="auth-loggedin" style="display: none">
Hi, <span id="displayname"></span><br/>
Your Facebook ID : <span id="FBId"></span><br/>
Your Email : <span id="DisplayEmail"></span><br/>
Your Sex:, <span id="Gender"></span><br/>
Your Date of Birth :, <span id="DOB"></span><br/>
</div>
</div>
any clues or help would be greatly appreciated. I'm a very long time lurker (maybe 10 years?) , first time poster.
This is the first thing that comes to my mind it is not a perfect solution but it might work in this scenario. In short trigger a PostBack with a dummy button clicking it with Javascript at the correct place(not by user's click).
1) Put an asp.net button (runat=server) somewhere on your page. It will be a dummy button just to trigger a postback so make its width = 0 or something like that. Lets call it btnDummmy. Make ClientIDMode=static.
2) Attach a server side event to btnDummy. Put your server-side comment save logic there. The comment should be in a asp.net textbox (runat=server).
3) Put btnDummy also in an updatePanel. (So that you do not lose the span values, displayname, FBId, blabla)
4) When you login with Facebook at the end of LoadValues(me) before returning call btnDummy.click();
This should do the trick...
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
I am using select2 on dropdownlist of asp.net. The code is as follows:
<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />
var v = /* get the select control */
v.select2();
The problem is, once select2() function is called, tab ordering stops working. Therefore, when on the dropdownlist tab key is pressed, focus do not move to the control having next highest tabindex but move seemingly randomly to some other control.
Commenting the line where the function is called solve this problem but I need the filtering. I have tried some of the other techniques of filtering discussed here but they are too complicated. Select2 is very simple and useful because all you have to do is include the JS and CSS files and call the function.
How can I solve this ordering problem? Alternatively, is there another filtering option as easy to use as select2 that would help me?
After a few hours of struggle, I have solved the problem. It turns out that the select2 AJAX control do destroy the tab order if the tab is pressed as soon as it gets focus, that is, when nothing is typed in it. It does not, however, destroy tab ordering if some text is typed.
The internal structure of select2's auto-generated HTML is like following:
<div class="select2-container">
<a class="select2-choice">
<span</span>
<abbr class="select2-search-choice-close" />
<div> <b></b> </div>
</a>
<div class="select2-drop select2-offscreen">
<div class="select2-search">
<input class="select2-input select2-focused" tabIndex=<somevalue> />
</div>
<ul class="select2-results></ul>
</div>
</div>
If some text is typed in the HTML select control, then tab ordering is working correctly, if no text is typed then tab order is destroyed. I have used document.activeElement in firebug to find focused control in both cases. In case of no text the anchor element has focus, and in case of text typed the HTML input element has focus.
As shown above, while select2.js correctly set tabIndex property of HTML input element, it does not of the anchor element.
Solution
Just add the following line at the position specified further below in select2.js:
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));
Add the line after:
this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);
this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
and before:
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
// initialize the container
this.initContainer();
this.initContainerWidth();
installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
So it becomes:
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex")); /* atif */
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
Make this change in select2.js. Obviously, you need to use the full js version, not the min version.
All you have to do is add one line, stated above. This would become line no#504 in VS2008 if done correctly.
I have a left side navigation menu on my page.. using url.action like below.. I am trying to bring in a view immediately adjacent(right side of the menu) based on what link is clicked.. I put in a div next to the navigation menu.. but have no idea how to display the appropriate contents in that div...
<table>
<tr><td><a href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a></td></tr>
<tr><td><a href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a></td></tr>
</table>
<div id="DISPLAYVIEWHERE">DISPLAY VIEW HERE based on link that is clicked</div>
In controller, ActionName1 code I have this...
public ActionResult ActionName1()
{
var model = new ViewModel();
return PartialView("PartialView1", model);
}
When I run this, the partialview1 is opened in a new page. How can I get this partial view opened in the same page as the navigation menu, immediately to the right of the menu..so based on what link is clicked, partialview1 or partialview2 is displayed next to the navigation menu... thanks for your help.
you have to use ajax in that case. you can add some class to your anchor tags like
<a class='handle' href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a>
<a class='handle' href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a>
and then you can hook up the click event of these links using jquery and send an ajax call like
$('.handle').live('click', function(){
$.ajax({
url:this.href,
type='post',
success:function(data)
{
//data contains the result returned by server you can put it in div here
$('#DISPLAYVIEWHERE').html(data);
}
});
//here you have to return false to prevent anchor from taking you to other page
return false;
});