How could I click the button shown in this image
I try to find the keyword "See more images" but find nothing, I expected to find the id of the button so I could click the button by js. After that you can press the button by javascript by following instruction
document.getElementById(\"button_id\").click()
But results of Bing do not works like that, how could I click the button by js? Should I use another solution to click the button(except of using Bing api).
After doing a quick search for cats on Bing and scrolling down until the button appeared you can see the buttons definition is:
<a class="btn_seemore" role="button" href="javascript:void(0);" h="ID=images.6059_3,5554.1">See more images</a>
As the class is btn_seemore and this is the only occurrence of the class on the page you can simply use:
document.getElementsByClassName("btn_seemore")[0].click()
Or preferably (in case the button hasn't been loaded yet):
var b = document.getElementsByClassName("btn_seemore")[0];
if(b){
b.click();
}
EDIT:
You can't find the element using View page source under the right click menu in chrome as that is the source on page load rather than after scrolling, and the button only loads after scrolling, you need to use the developer tools to see the current source after scrolling to find the text.
To find the class I used chromes Element Selector tool in the developer tools (here I've shown finding the entire element in the source but the class can be seen by hovering over the element with the element selector):
Related
I'm using TagCommander and I'm trying to fire a specific tag when a user click or scroll within a certain page.
I can easily detect clicks and scroll and fire an event/set a variable according to that, but I can't find a way to fire a Tag when that happens.
My tag should actually fire according to a specific perimeter (a subset of pages) and when a user does some specific action on the page (i.e. click or scroll).
Is there any way to do that?
it's been a while, maybe you found a solution.
To let a click fire, you should go to:
Triggers > edit > choose "Clicks" from the horizontal menu. Under "selector path" insert the CSS selector path of the Button/Link/Call to Action that you want to track. Click on "done".
If you don't know how to select the CSS selector,
go to your website,
open the chrome console,
activate the tab "Elements",
activate the array,
select with the mouse the Button you want to track
in the Tab "Elements" the Elements will be highlighted in its code
if you go on the line all to the left it will appear 3 points (...), click on them and select "copy selection" > CSS Path
it should be something with #, for example #tab1234
I'm trying to click on a button on a page that has a lot of JavaScript but no matter what I try, can't click it. Is there a way for me to click the button manually and get what I need to click?
I've tried inspecting elements and FirePath but those aren't giving me the correct class or id that I need to click
Edit: This is what I'm trying to accomplish, the below is from Selenium IDE firefox plugin
Command Target
open /logger/summary.ftl
clickAndWait link=System Admin
selectFrame sysadmin-content
click //div[#id='sysadminmenu__sysadminmenu_x-auto-29']/span[3]/span
click id=x-auto-178
You may try
http://www.seleniumhq.org/projects/ide/
This has a feature to find web element path
Well I am a newbie and i want to know that can I click on a link which is hidden and shows on a particular through JavaScript on console in Google chrome. I want to click on that link before the time it become visible. I noted its attribute tag when it becomes visible.
I want to click on below attribute tag which become visible on a particular time.
<a onclick="aplook(this,'01785','xxxx','xxx','10-12-2014','xx','xx',3);" id="refid2">Click Here </a>
The link first needs to load before an action can be perform on it.
You could use CSS to hide the link, and then use javascript to click on it.
I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits.
I can bring up the JS and do the same, but...
If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?
Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.
If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".
In this case, you can click on three horizontal dots which will appear on the left side of the same line where you will click once( just single click and enjoy ). A single click on the line to edit and then single click on three dots which will appe
I had the same issue and a search got me to here.
For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.
I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.
How can I achieve this? Is it impossible without having actual <a> tags?
I'm currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.
EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.
I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.
e.g.
<div title='www.google.co.uk' style='cursor:pointer'>
This is my div!
</div>
Using anchor links (as Google does), you can do something like:
<a href="http://www.mwhahaha.com"
onmouseover="this.href='http://www.test.com';"
onmouseout="this.href='http://www.mwhahaha.com';"
onclick="this.href='http://www.mwhahaha.com';">Link</a>
This will show a link that looks like it's going to www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...
If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.
I'm answering from my phone or else I'd check it myself. They may be doing it differently now.