I have this function and i am not able to click on all of the magnifying glasses from a page. I have tried until now, by using different alternatives. What is commented, is what i tried until now.
def lupa():
elements = browser.find_elements_by_css_selector("a[onclick='return Go(event, 2)'] > img[title='Details']")
for element in elements:
#element.click()
element.send_keys(Keys.SPACE)
time.sleep(1)
Please see below how looks the HTML code.
<a href="#" onclick="return Go(event, 2)">
<img title="Details" src="/common/images/Detail.gif">
</a>
This are the old XPATHs i used in order to click on the image.
#browser.find_element_by_xpath(".//*[#id='resultsTable']/tbody/tr[17]/td[11]/a[2]/img").click()
#lupa = browser.find_element(By.XPATH("//img[#src='/common/images/Detail.gif']"))
#lupa = browser.find_element(By.cssSelector("a[src='/common/images/Detail.gif']"))
#lupe = browser.find_elements_by_css_selector("a[src='/common/images/Detail.gif']"))
#lupa=browser.find_element_by_link_text("Details").click()
#lupa= browser.find_element_by_id("Details").click()
#elements = browser.find_elements_by_css_selector("a[src='/common/images/Detail.gif']"))
Thank you for your answer!
Cohen
Most of the locators you tried aren't valid. You probably should spend some time learning about the different locator types and how they work.
Given the HTML, the CSS selector below should find the IMG tag(s) you want.
img[title='Details']
Another thing, you are not using implicit wait correctly. It's set once for the life of the driver. Calling it over and over does nothing. You don't want to use implicit wait, use an explicit wait instead. Look at some tutorials for WebDriverWait.
EDIT: Clicking the IMG tag should work just find since it's surrounded by the desired A tag. But... if you need to click the A tag specifically, you should be able to use the locators below.
More specific CSS selector
a[onclick='return Go(event, 2)'] > img[title='Details']
XPath
//a[#onclick='return Go(event, 2)'][./img[title='Details']]
Related
I am writing a suite of automated UI tests. I have a set of tests that verifies the links in a navbar work correctly, they take an annoying long time because it's loading 2 pages per test and there are many links in the nav bar. I am wondering if it is necessary to actually click the links?
One of the links would look like this, they're all basically the same, all contained inside a list of of <li> elements:
<a href="/projects/7d9162e5-e59c-452e-b9f5-684a2e0f2924/home" data-reactid=".0.2.0.0.0.$0.0">
<span class="icon icon-home" data-reactid=".0.2.0.0.0.$0.0.0"></span>
<span class="label" data-reactid=".0.2.0.0.0.$0.0.1">Home</span>
</a>
I could grab the content from the href attribute and request the page programmatically (don't load it in the browser) to assert that the href is correct and this would be significantly faster.
Is there any chance that an element could have an href attribute that points to the page as expected, but for whatever reason clicking on this element could be broken?
This might be the solution that you are looking for:
Link to Page
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
By taking the href content, you might risk that your automation passes test even though the navbar link does not work. It could be that navbar link was disabled by mistake, but as the link is still present in the DOM your automation will not capture it.
Just my 10 cents...
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I am trying to find an element which is a arrow (like drop down). But there is no html specific code for that. It seems arrow has been included with <em>. its not visible by default. when I inspect element, I could see it --> [::after ==$0] I could find em element. But not able to locate the arrow. Can anyone help to find this locator? Here is the html code.
<em class="x-btn-split" unselectable="on" id="ext-gn23"><button type="button" id="ext-gn58" class=" x-btn-text"><div class="tbhIcon"></div><span>Relaties</span></button>
::after ==$0
</em>
Observed this behaviour with salesforce (specifically service cloud). Selenium CSS selectors don't support the ::after tag. As a work around you could use the actions class and dynamically fetch co-ordinates and click on the element. It's worked consistently for us despite screen resolution.
try{
Actions action = new Actions(driver);
action.moveToElement(driver.findElement(By.xpath("
insert locator")), 245,15).click().build().perform();
}
catch(exception ex){
//insert relevant log msg here
}
The co-ordinates in the snippet here are hard coded. But you can use the findElement alone with getAttribute("x") and getAttribute("y"), store these values in variables, and manipulate them to get the desired location on screen dynamically.
Hi I am trying to access the DIV element using watir but I am unable to do that,I have tried in different ways but couldn't access it,may be I think it need to be access through some parent element can anyone help me out?
My system Configurations
IE-8
Windows 7
I tried with the below command
#ie.div(:text,'COMPOSE').click
the command gets execute with no errors but no action is performed on the UI
The best solution appears to be switching to Watir-Webdriver. With Watir-Webdriver, #ie.div(:text,'COMPOSE').click will work as expected.
Assuming that is not an option, there are a couple of reasons why that same command does not work with Watir(-Classic) v1.6.7:
The first problem is that #ie.div(:text,'COMPOSE').click will find the first div that contains this text. This would be one of the ancestors of the div you want. As a result, Watir will send the click event against the wrong element.
The second problem is that the div is not responding to the onclick event fired by Watir. I am not sure why this problem exists.
To solve the first problem, you will need to be more specific when locating the div. In this case, the "role" attribute can be used since none of the ancestor elements have this attribute. Watir-Classic does not support using the role attribute as a locator. As a result, you will need to create a custom locator using an element collection and the find method:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }
To solve the second problem, it turns out that double clicking does work. While newer versions of Watir-Classic have a double_click method implemented, it does not exist in 1.6.7. You can replicate the method by calling the fire_event method:
.fire_event('ondblclick')
Putting it all together, the following will click the compose button:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }.fire_event('ondblclick')
There may be more than one element on the page with the text 'COMPOSE', some may be hidden. Try:
#ie.divs(:text,'COMPOSE').size
That is divs with an s.
Then you can try something like the following and see if you get a change in the UI:
#ie.divs(:text,'COMPOSE').each { |b| b.fire_event('click') }
I remember that fire_event works better, but would recommend consulting the docs for the difference between .click and fire_event.
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>