I tried to add an #click to a font awesome icon. However, whether I add an #click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?
<div class="control has-icons-right">
<input v-model="keyword" #keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
<!-- or 2 words separated by space -->
<span class="icon is-right" #click="findName">
<i class="fa fa-search"></i>
</span>
</div>
Source: 3sName.com
It is because, you are using bulma class .icon which having the following css.
pointer-events: none;
Try to override it with
pointer-events: all;
pointer-events css will prevent your element from emitting a click event.
:)
use a button / anchor 'a' instead span to wrap the fa-icon, along with #click method? Span isn't good practice for click event as well.
Have you tried #click.prevent="findName" modifier?
Related
I have the following divs and want that when clicking on id="child" it should NOT execute a get to "/modal/closed" and NOT replace the id="modal". That is, do nothing HTMX related.
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
Right now I have it working using the trigger "click consume" but need to specify an hx-get to an HTTP path that returns nothing (/nop).
Is there a cleaner way to do this?
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div hx-trigger="click consume" hx-swap="none" hx-get="/nop">
</div>
</div>
This can be solved using the event modifier "target:#modal" to indicate we are only interested on the click event originated from the id="modal".
This way clicks over id="child" that bubble up to id="modal" will be ignored.
<div id="modal" hx-trigger="click target:#modal"
hx-swap="outerHTML" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
It works this way due to attribute inheritance in htmx https://htmx.org/docs/#inheritance. Placing the hx-trigger attribute on the outer-most div, means that element will listen for the event in all of it's children. When you add the same attribute to a child div with the consume modifier it stops the event bubbling up.
So the solution here would be to remove the hx-trigger from the outer div. In fact, if what you are trying to do is close a modal, you can add a close button somewhere else in the div. Something like this:
<div id="modal">
<button id="close" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">Close</button>
<div id="child">
</div>
</div>
Now when you click on the child div the event bubbles up and it's not caught by the sibling close button.
I'm trying to autoclick this button with greasemonkey. I tried to find a reference to this button with document.getElementsBy[ClassName/Name/TagName] with ClassName i find buttons but not the one i need. Any ideas how i can automate his click-event?
<button type="button" class="ml-2 mt-2 v-btn v-btn--depressed theme--light v-size--default amber darken-1 white--text ">
::before
<span class="v-btn__content">
<!---->
Überspringen
<i aria-hidden="true" class="v-icon notranslate v-icon--right material-icons theme--light">
redo
::after
</i>
<!---->
</span>
</button>
Screenshot from Firefox Inspector with Click Function
Thanks in Advance!
Just use xpath for element searching:
document.evaluate(XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
You can use class parameter instead id or name:
xpath: //button[#class='ml-2 mt-2 v-btn v-btn--depressed theme....']
If you do not need to use all value, you can use contains keyword:
xpath:
//button[contains(#class, 'ml-2 m2-2')]
css:
button[class*='ml-2 m2-2']
Of course, this value must be unique.
You can search child element and return back to the parent:
//button/span[#class='v-btn__content']/i/../..
You can use text for searching (bad practics if location possible to change)
//button/span[text()='Überspringen']/..
In this application, there is an option to activate or deactivate a channel.
When this channel is activated, span containing tool tip to deactivate is activated like shown below.
Similarly, When this channel is de-activated, span containing tool tip to activate is activated like shown below.
If I can figure out the xpath to active span I would be able to verify this element. BUt having hard time to find the xpath to active span.
</span>
<span id="stat965">
<span class="btn btn-small deactivateBtn btn-warning" href="javascript:void(0);" data-toggle="tooltip" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'false','TWITTER',965);" title="" data-original-title="Deactivate">
<i class="fa fa-times"></i>
</span>
<span class="btn btn-small activateBtn btn-primary" data-toggle="tooltip" style="display: none;" href="javascript:void(0);" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'true','TWITTER',965);" title="" border="0" data-original-title="Activate"> <i class="fa fa-check"></i>
</span>
</span>
Use isDisplayed method on following web elements which tell whether that element is visible on the web page or not.
try for Deactivate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Deactivate"]
returns WebElement only if Deactivate span tag is active otherwise null, so you can check for Activate span tag.
for Activate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Activate"]
Please try the below CSS for to identify Activate :
span.activateBtn
Please try the below CSS for to identify De-Activate :
span.deactivateBtn
According to you, only one element (span) should be active. Right? If yes, you can use enabled method. Enabled method will return true if element is enabled. As per your need, you can process the return value. Example:
if(driver.findelement(By.xpath("//span[#data-original-title="Deactivate"]).enabled)
{
// do your actions
}
And check the same for activate element and continue your steps as per your need.
if you want to find the deactive span, use the below cssSelector:
span[class*="deactivateBtn"]
for choosing deactivate span, use the below cssSelector:
span[class*="activateBtn"]
hope this helps and let me know what is the result.
How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.