I have a list of elements with the class .node-display, when one is clicked it becomes an input. I want to capture the down or up arrow keyups to click the very next .node-display in the list (relative to the current element).
In the below example, pressing down should click on item 5, and pressing up would click on item 3.
1
2
3
4 (Currently selected)
5
6
My best guess is something like this.
<input
_="on keyup[key is 'ArrowDown'] send click to the first .node-display end"
>
Does anyone know how I'd actually write this expression?
You probably want to put the behavior on the parent ul so you don't have to repeat it on every input.
Something like this:
<ul _="on keydown[key is 'ArrowDown'] from <input/> in me
set nextSibling to it's parentElement's nextElementSibling
if nextSibling
set nextInput to the first <input/> in nextSibling
call nextInput.focus()
halt
end
on keydown[key is 'ArrowUp'] from <input/> in me
set previousSibiling to it's parentElement's previousElementSibling
if previousSibiling
set previousInput to first <input/> in previousSibiling
call previousInput.focus()
halt
end
">
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
</ul>
Some notes on this code:
I am using the from from in the event handler, which puts the element that the event came from into the it symbol
I am using the keydown event so we can cancel the event with the halt command, to avoid the down and up keys changing the caret position
I am using the halt command to stop the event from propogating
I used focus rather than click as a proof of concept
Related
I am trying to program to click on one button on website on chrome. The name of the button is "Add to Cart".
Please see HTML of the website:
enter image description here
And this is the VBA code:
CD.FindElementByCss("div.addToCartButtons clearAfter > button blue right s-addToCart > span.Add to Cart").Click
How can I do this?
Tags are important, you can anticipate some of the events attached to certain element in DOM just by reading its tag.
In your case you can click on the button tag directly instead of clicking the tag span, since this last one rarely has a .click event attached to it.
If you can provide an url to test this website I might help you better. This are the possible approaches:
1) Advanced:
a. Spaces in class are change for dots
b. Requires to understand tag's meaning and relative position of elements in DOM
'Example
'Clicking first button in div using only tag ("button" is a tag)
CD.FindElementByCss("div.addToCartButtons.clearAfter > button").Click
2) Intermedium:
a. Use only first Class and ignore all others after first space
b. Requires to understand what an elemment.child is
'Example:
'Clicking first child of "div" (Everything inside "div" is a child)
CD.FindElementByCss("div.addToCartButtons > button:nth-child(1)").Click
3) Easiest:
a. Double quotes ["] inside querySelector are changed to single quote [']
b. Requires to use Copy JS path in DevTools (Ctrl + Shif + I)
'Example:
'Clicking with Javascript in your website through ExecuteScript
strTemp = "document.querySelector('div.addToCartButtons clearAfter > button blue right s-addToCart').click"
CD.ExecuteScript (strTemp)
I'm trying to display a listbox in a UserForm from a separate sheet called "Fields". The problem is, the list will not display. It shows as a drop down arrow next to the cell, but not in the userform like I'm wanting.
Private Sub UserForm_Activate2()
On Error Resume Next
Me.ListBox2.Clear
For Each element In gFieldsListArr
Me.ListBox2.AddItem element
Next element
UserForm_initialize2
End Sub
Private Sub UserForm_initialize2()
For Each element In Split(gCellCurrVal2, ",")
For ii = 0 To ListBox2.ListCount - 1
If element = Me.ListBox2.List(ii) Then
Me.ListBox2.Selected(ii) = True
End If
Next ii
Next element
End Sub
TL;DR: You can't rename event handlers or change their member signature in any way*, because the correct member definition is defined by the event, not its handlers.
Watch the dropdowns at the top of the editor as you navigate between procedure scopes:
Whenever the left-side dropdown says (General), you're not inside an event handler.
Contrast with:
The left-side dropdown is listing all available interfaces and event sources; to handle the events of a form, you must pick UserForm from that dropdown, and then pick a member from the right-side dropdown.
When you do this, the VBE creates the procedure stubs for you, with the correct name and signature every time.
Whenever you navigate to what's intended to be an event handler and the left-side dropdown says (General), you're looking at dead code that isn't responding to any events.
* You may change the accessibility from Private to Public, but invoking an event handler directly is a design smell so there shouldn't be a need to do that. You may change the parameter names, but not their type; renaming handler parameters is a rather surprising thing to do though, and best avoided too. So yeah, best not change these member signatures in any way.
Suppose you enabled box selection in cytoscapejs or you do something like:
cy.nodes().select();
when the user clicks a button. So, the user is able to select multiple nodes at once.
When registering the handler for the select event on nodes:
cy.nodes().on('select', function(evt){
...
}
Is there any way to know if the selection of a node is due to:
A single selection event (i.e. the user just clicked on a single node)?
A multiple selection event (and which index the current node is in this multiple selection)
Thanks!
You can track the events coming in to determine the type of selection (i.e. tap versus tapstart-tapdrag-tapend / tap versus box). You can keep a counter, declared outside the event callback, to track element indices if you want --- though the indicies won't really mean anything.
I have a problem in scanning a drop-down menu which disappears upon opening the xScan. I need to get the module id of the dropdown menu to verify some test steps.
Do you have any solution with this if it is not really possible to get the module id of the dropdown menu?
Open developer tools in your browser of choice (F12), navigate to the console and input the following code:
var fulldoc='';
var scrollX=0;
var scrollY=0;
document.addEventListener("keydown",function(event){
if(event.key=='q' && event.altKey){
fulldoc=document.body.outerHTML;
scrollY=window.pageYOffset;
scrollX=window.pageXOffset;
}
if(event.key=='w' && event.altKey){
document.body.outerHTML=fulldoc;
document.body.scrollTo(scrollX,scrollY);
}
});
When the window looks the way you would want to scan, press 'Alt + Q', then press 'Alt + W'.
Now your window will freeze and then you can scan your page.
To steer the objects you need to refresh your browser.
You can resolve the issue with below 2 steps
1 - Add some text in textbox which will populate the dropdown below it .
2 - Use Send Keys Module to scroll down and select the value.
I had a similar issue where we had a popup that only appeared when clicking on a text box. The solution we received from the Tricentis trainer was as follows:
Part One
1. Open your application in Chrome
2. Right click the inspect
3. In the inspector window, on the Elements tab, navigate to your html element where it should be (you can do that by clicking on the element and check that you can see the html in the element)
4. Use the debugger to add a break point there, this should pause it and you should be able to see the elements you need to steer it.
5. Once you found the element, you will need the type of element (e.g. div, span, etc), and the class name
Part two
1. Rescan your module and select any element that matches the criteria of your element selected in Part One #5
2. Identify it by only it's class name property and tag
3. Save and close
4. Edit the element in the module view by changing the class name. This should help you steer it
Note: if the element class name is not unique, you might need to use Explicit name.
Good luck
I have a field that has a "+" Add button in case you want to add more lines. I want to add 2-3 lines with it, then to click on the "+" button from a newly created line to create 2-3 more. The problem is that all buttons are declared the same:
<button class="ng-scope" ng-if="formData.order_request_status == STATUSES['OPEN']" ng-click="addImportMaterial()" style="margin-left: 3px;" type="button">+</button>
I have written the following xpath:
//button[#ng-click='addImportMaterial()']
but this selects all plus buttons and I want only the third one to be pressed. Any ideas? Thanks!
You should try using xpath with index then as below :-
I want only the third one to be pressed
(//button[#ng-click='addImportMaterial()'])[3]
So, (Assuming your using java) use above xpath to locate third button and click as :-
driver.findElement(By.xpath("(//button[#ng-click='addImportMaterial()'])[3]")).click()
Since you will be getting a List of buttons, to press the third one you just have to do buttons.get(2).click();