i would like to use the Chrome-console to click on a button.
So far I always used the Id, like:
$('[id="vcc-eu5"]').click();
or Title
$('[title="Delete this view and its saved rules"]').click();
of the button, but here, I can not find anything like that.
If I inspect the button I can see this:
<a class="wds-button wds-button--primary wds-button--sm apply-btn ">APPLY</a>
Is there a way trigger this button somehow? Where can I read about it?
The currently selected element in the Chrome DevTools is always available as $0.
So, you can just select it and the do $($0).click()
Or you can use a unique combination of its classes:
$('a.wds-button.wds-button--primary.apply-btn').click()
Related
I want to be able to know exactly which element from a class has been clicked. I enabled the text option in Tag Manager:
But it's still not visible in the click object. But it wouldn't pick it up, since the tag containing the text is nested in the clickable element. Can I add a custom HTML attribute to be able to identify which element has been clicked?
<div class="card-content"> //<---- clickable element
<i aria-hidden="true" class="card-icon material-icons">business</i>
<h3 class="card-title">Company details</h3> //<--- clicked text
</div>
The best way to figure it out is to use the "Preview & Debug":
Activate it
Go to the page where you want to test (you should see now a new box at the bottom)
Click on the element
Check the variables in the debug box. Especially check the click.element data.
My guess is that since there is no "real" text in the div box, just children tags, no text can be discovered.
There are different options to solve it:
add the text as data-attribute to the div and use the click.element data
use a data-layer push event
if you know JS you can use the click.element data in a JS variable and traverse down to the h3
If you are going to keep your code as it is, you could create a custom variable, using Custom JavaScript.
In order to do so you need to first create the custom variable, choosing the Custom JavaScript type:
This code should do the job (I tested id)
function() {
return {{Click Element}}.closest('.card-content').getElementsByClassName('card-title')[0].innerText;
}
The custom variable will return the text inside .card-title.
To test the custom variable, you may create a dumb HTML tag with a console.log script, replacing Inside TXT with the name you gave to your custom variable:
<script>console.log( {{Inside TXT}} )</script>
The trigger should be a Click All Elements.
When previewing this tag, the captured text should appear in your console, as well as in the debugger panel.
Reading again your question, I wonder if you are going to have several .card-title items inside the .card-content. In that case, this custom variable will not work. Let me know what is the case.
Also, the code could be simpler, but I am not really sure on how is it really going to work in your site, so this one seems more reliable, since it works clicking anywhere in the element.
EDIT:
In order to test it, after you click an element, a new "Click" will appear in the left pane (Summary). There, in the Variables tab, you will see the variables captured by the click. The data will be stored under the variable name you gave to the variable.
I try to use Click Element id=elementid in Robotframework.I have Selenium2 Library.I have a Menu collapsible.See little arrow on Entity 1 on first print screen.I try to identify the element id.I cannot see element id when I inspect this.I see only jotid that I do not think is the same.So, I am not able to use click element in order to expand my menu.I appreciate anyone's help as I am still learner.Please see also the images of a) Code, Menu, Inspected Element
You can also find it using xpath, so:
Click Element | //li[#wuid="gx:309..."]
jotid is not id, so you cannot locate it by id.
You could try keyword:
Click Link ENTITY 1 -Introduction
or find it by css:
Click element css=a[jotid='wuid:gx:4286...<the rest of it>']
I'm a backpacker and a programmer, trying to use the second skill to find openings in a full campsite. Rather than crawling fro scratch, I'm using the end-to-end testing framework nightwatch.js to navigate for me.
I've hit a roadblock, because nightwatch is having difficulty finding a specific element using css selectors.
Here are the elements and page:
Here is my test code:
Previous Attempts
My test code will click on the selection box with #permitTypeId. It will see that #permitTypeId option is visible. It will not see or click on any of the options when more specific values are specified. The five .click()'s are all css selectors I've already tried. None of the options are set to display:hidden or display:none. I have also tried all of the above without the .waitForElementToBeVisible() just in-case the waiting causes the dropdown to hide.
I've successfully clicked options from different dropdown menus on this website without any problem. Just this one is causing a headache.
The tests are running with the most current Selenium server and Firefox on Mac Yosemite.
tl;dr
Nightwatch.js/Selenium won't click on something from a dropdown menu.
The Path...
Cory got me thinking about jQuery and native DOM manipulation. Tried going that route and was successful selecting the correct option using Selenium's .execute() function:
.execute('document.getElementById("permitTypeId").options[1].selected=true')
However, it was not triggering the onchange event.
Saw this post which made me start thinking about using key-strokes and this one which suggested using arrow-keys to navigate down a <select> element to the option, then hitting enter.
...to the Solution
.click('select[id=permitTypeId]')
.keys(['\uE015', '\uE006'])
I've found that this is an issue with Firefox. Chrome and PhantomJS operate well clicking <option> tags.
you should be able to click like this way
browser.click('select[id="permitTypeId"] option[value="1451140610"]')
Additionally I was able to add a .click event for the specific option once I did a .click for the select. see my example below:
.click('select[name="timezone"]')
.pause(1000)
.click('option[value="America/Chicago"]') //selects the option but doesn't click
.pause(5000)
.keys(['\uE006']) //hits the enter key.
another solution:
.click('select[id="permitTypeId"]')
.waitForElementVisible("option[value='1451140610']")
.click("option[value='1451140610']")
Very simple way is to use .setValue('#element', 'value of option')
Web page contain a button with some text for example "Test". This button actually is a toolbar element. (class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When I tried to use the following click methods, the button did not react.
browser.div("Test").click();
browser.click("id");
browser.click("");
browser.div("id").click();
browser.byId("id").click();
browser.containsText(browser.byId("id"),"Test");
browser.div("Test").in(browser.table("Generar")).click();
browser.byXPath("//div/Test").click();
Could anybody suggest me an alternative methods that is able to resolve the above problem?
Try with:
browser.xy(browser.div("Test"), 10, 10).click();
This will click a little inside the div.
I have a number of anchors in a page. I want that when the user clicks on an anchor it would open a blank window. I have used target='_blank' and that works correctly. However, I want that if the user clicks on another link in the original page, I would like that it uses the same popup that was opened for the first window. What I do not want is that the user ends up with like 10 popups as this would be a bit messy for the user.
Is this achievable please?
Any assistance would be greately appreciated.
target is deprecated since HTML 4.01, you can however use JS like this:
test
<script>
var clicky = document.getElementById("clicky");
clicky.onclick = function(){
window.open(clicky.href, "test");
return false;
}
</script>
in the window.open, the first attribute is the URL the link should go to, the second is the name of the window, clicking any link setup like this will open in the same window.
there's better and easier ways to do this to multiple elements with jquery etc. but it all hinges on the window.open.
Instead of using _blank (which is a special value for a new window), use a name - any name would do.
target="mySpecialPopup"
When naming a window this way, every time you call it by name it uses the same instance.
Just name your target.
target='mywindow'
This should open a blank window the first click and repopulate it when other target='mywindow' links are clicked.