Why I can't click but can right click with Selenium - javascript

enter image description hereI specified the button class in CSS selector and right click executed.
Then options displayed on the button, so it assure that the correct element position has been acquired.
javascript
.then(function () {
var element = driver.findElement(By.className('xxx'))
return element;
})
.then(function (element) {
var action = new webdriver.ActionSequence(driver)
action.click(element, webdriver.Button.RIGHT).perform()
})
Problem arises when just click is executed, instead of right click.
.then(function (element) {
var action = new webdriver.ActionSequence(driver)
action.click(element).perform()
})
I hope the event when the button is pressed to be executed, but it doesn't. I cannot find any error message. I really don't know why...
html
<button class="btn btn-default btn-play">
<span class="glyphicon glyphicon-play" aria-hidden="true">
</span>
" play "
</button>
I tried to select each class and result was same.
button before
button after

Since the aria-hidden="true" you can achieve this by directly clicking using javascript. :)
driver.executeScript("document.getElementsByClassName('btn btn-default btn-play')[0].click()")

Related

Open hidden elements one at a time?

please I am trying to create a FAQ like functionality, I have some elements hidden so when I click on a button it opens and hides it. I have been able to do this but I am not getting what I actually want. I might have done something wrong I suppose. So, there are 5 elements with the same className, this will help me target them all and run a for loop to kind of break them apart. However if I click on this button to open one of the element the other ones open.
const openBtn = document.querySelectorAll(".openBtn")
const openContent = document.querySelectorAll(".openContent")
for(btn of openBtn) {
btn.addEventListener('click', () => {
for(content of openContent) {
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
content.classList.add('flex')
} else {
content.classList.remove('flex');
content.classList.add('hidden')
}
}
})
}
So as you can see, If I click on the chevron icon for just one of the wither About Us, Careers or just any of the 5 every other one opens. How do I fix this ?
Since you aren't going to post even the most general version of your HTML, here is a general outline.
First, each button gets a data attribute for target,then each FAQ div gets an ID attribute that matches the data target attribute.
I attach the click handler to the document and look for openBTN on the clicked element. Then I loop through every OPENED div to close it. Then I get the target data attribute and add the appropriate classes.
document.addEventListener("click", function(e) {
if (e.target.classList.toString().includes("openBtn")) {
let opened = document.querySelectorAll(".openContent.flex");
opened.forEach(function(el) {
el.classList.add("hidden");
el.classList.remove("flex");
});
let target = document.querySelector(e.target.dataset.target)
target.classList.remove("hidden");
target.classList.add("flex");
}
});
.hidden {
display: none
}
<button data-target="#faq1" class="openBtn">OPEN</button>
<div id="faq1" class="openContent hidden">1</div>
<button data-target="#faq2" class="openBtn">OPEN</button>
<div id="faq2" class="openContent hidden">2</div>
<button data-target="#faq3" class="openBtn">OPEN</button>
<div id="faq3" class="openContent hidden">3</div>
<button data-target="#faq4" class="openBtn">OPEN</button>
<div id="faq4" class="openContent hidden">4</div>

Prevent people from being able to click icon inside of a button

I am making a quick throw-together website that requires users to be able to interact with a button to execute a delete action.
I have my button (code is shown below) where I have a basic bootstrap button paired with an icon (provided by their library) in which the user clicks to delete an "Infraction"
<button
referencedInfraction="<%= i.infractionID %>"
targetUserID="<%= i.userID %>"
class="deleteButton btn btn-danger"
>
<i class="bi bi-trash-fill"></i>
</button>
The infraction that the user wants to delete is passed through an attribute to the code below.
$(".deleteButton").click((event) => {
$("#confirmDeleteSingleInfractionModal").modal("toggle");
let data = {
infractionID: $(event.target).attr("referencedInfraction"),
targetUserID: $(event.target).attr("targetUserID"),
};
console.log(data);
$("#confirmDeleteSingleInfractionModal").on("hide.bs.modal", function () {
console.log("deleting");
$.ajax({
type: "delete",
url: `${window.location.origin}/dataLink/infraction`,
data,
success: () => {
console.log("done");
},
error: () => {
showInfractionDeleteError();
},
});
});
});
However, I've run into a bit of an issue. I notice that the only way for the user to actually click the button is if they click around the edges where the <I> element is not present.
Is there any way to prevent this from showing in event.target()?
All I want is the custom attribute from the button clicked, not the image.
Any help would be appreciated.
If you set pointer-events: none on the element with the icon that should prevent the click event from firing on it and instead use the button, allowing you to get the data attributes. Example:
.bi-trash-fill {
pointer-events: none
}
Or whatever element/class makes sense for your application. This allows the user to click anywhere on the button (including on the icon) and the event will fire getting the attributes from the button.
You can check if the element which is been clicked is i tag or button and depending on this change your selector to get required data.
Demo Code :
$('.deleteButton').click((event) => {
console.log(event.target.tagName.toLowerCase())
//get tag which is clicked change selector if needed
var target = event.target.tagName.toLowerCase() === 'button' ? $(event.target) : $(event.target).parent()
//$('#confirmDeleteSingleInfractionModal').modal('toggle');
let data = {
infractionID: target.attr('referencedInfraction'),
targetUserID: target.attr('targetUserID')
}
console.log(data);
//other codes..
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/v4-shims.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button referencedInfraction="1" targetUserID="12" class="deleteButton btn btn-danger"> <i class="fas fa-heart"></i> </button>
<button referencedInfraction="2" targetUserID="13" class="deleteButton btn btn-danger"><i class="fas fa-heart"></i> </button>
The best way to work around this is to add a function to the icon <i></i> that is called once it is clicked and inside this function you can call the same function called by clicking on the button <button></button> itself. Also you can pass the same data from the icon element <i></i> to its function to be used in the button function.
note: you don't want to prevent clicking on the icon because it will be a bad UX (user experience) but actually you want to use it for the right purpose.

Make font-awesome icon on button not clickable

I have a bootstrap button with a font-awesome icon on it.
<button type="button" class="btn pull-right rotate-picture-right" aria-label="Rotate" id="picture{{ picture.pk }}">
<i class="fa fa-repeat" id="testright" aria-hidden="true"></i>
</button>
My on-click event:
$(document).on('click', '.rotate-picture-right', function (e) {
rotate_and_reload(e, "right");
});
The function:
function rotate_and_reload(e, direction){
var picture_id = e.target.id.replace("picture", "")
var url = "{% url "device-api-picture-rotate" device.pk 0 "placeholder" %}".replace("pictures/0", "pictures/"+picture_id).replace("placeholder", direction)
$.ajax({
url: url,
type: 'PATCH',
success: function() {
var d = new Date();
img = e.target.parentElement.parentElement.getElementsByTagName('img')[0];
if (img.src.includes("?")){
img.src = img.src.split("?")[0] + '?' + d.getTime();
} else {
img.src = img.src + '?' + d.getTime();
}
},
});
}
In Firefox, it doesn't make any difference whether I click on the icon or on the button, the on click event is triggered for the button.
In Chrome however, it is also possible to click on the icon and as I am using several properties of the buttons data, my function fails if I only get the icons information.
Is there a way to "disable" the icon and only make it be there and be pretty but not be able to trigger anything?
You can use CSS to disable pointer events on the icon.
<button type="button" class="btn pull-right rotate-picture-right" aria-label="Rotate" id="picture{{ picture.pk }}">
<i class="fa fa-repeat" style="pointer-events:none" id="testright" aria-hidden="true"></i>
</button>
However, a better way to handle this would be to ensure that the event.target is the same as the event.currentTarget in your click event handler. You can always get the reference of the button and not the icon by looking at the event.currentTarget property. The property name might be different based on whether you are using vanilla JS or a framework like jQuery.
Sample:
$('button').click(function(e) {
console.log(e.currentTarget); // This will be the button even if you click the icon
})
Handy reference for different Event Targets

How to make two counters buttons independent of each other in jquery?

Actually I was struggling in making 'like' buttons which on clicking increases or decreases the count whenever clicked and the problem I am facing is ,the interference of one button on other buttons.Here is my html code for one button:
<button class="btn btn-default buttonattr"style="font-family:Pangolin" onclick="myhit1(\''+this["post"]+'\',\''+this["id"]+'\',\''+this["love"]+'\');myclick()">
<span class="glyphicon glyphicon-heart fa-lg active1"></span> Love
</button>;
where myhit() and myclick()are javascript functions, called on clicking this button . Here is my javascript functions:
var toAdd=1;var newValue=0;
var overall=1;var pvalue=0;
function myhit(post,id,love){
oldValue=parseInt(love);
if(toAdd>0){
newValue=oldValue+toAdd;
}
else{
newValue= overall + toAdd;
}
pvalue=pvalue+toAdd;
toAdd*=-1;
overall=newValue;
$.post('porthome4_.php',{post1:post,id1:id,love:newValue,plove:pvalue},function(info){});
}
I have made more 'like' buttons for each post. The problem is for eg. if I click on one button and the counter is increased from 0->1 state ,but if click on another button its state change is absurd , and I know is the reason is toAdd variable state change from +1 to -1 because its state change for every click on button ,,it would have worked fine if there would have been only 1 button but
for multiple buttons this wont work...Can someone suggest me better way to tackle this or a change in my function code would be much more appreciated . Would be glad if someone helps.Thank u
<button class="btn btn-default buttonattr"style="font-family:Pangolin" data-state="1" onclick="myhit1(\''+this["post"]+'\',\''+this["id"]+'\',\''+this["love"]+'\');myclick()">
<span class="glyphicon glyphicon-heart fa-lg active1"></span> Love
</button>
var newValue=0;
var overall=1;
var pvalue=0;
function myhit(post,id,love)
{
oldValue = parseInt(love);
var toAdd = parseInt($(this).attr("data-state"));
if(toAdd>0)
{
newValue=oldValue+toAdd;
}
else
{
newValue= overall + toAdd;
}
pvalue=pvalue+toAdd;
toAdd*=-1;
overall=newValue;
$(this).attr("data-state",toAdd);
$.post('porthome4_.php',{post1:post,id1:id,love:newValue,plove:pvalue},function(info){});
}
You can used separate state variable for each button. Set data-state attribute to button and after that you can used this attribute to function $(this).data("data-state"); you can get and set this value each time whne button click.

Rotate button settings and values on each click, repeating

I am trying to display a button, starting with "unmarked". As the user clicks the button, I need it to change to the next button, "form". When each of these clicks happen, I would like a post request made through ajax to update the value in the database associated with the ID of the button. This ID comes from the database where other information is being shown next to the button. I believe that part is done with an onclick=functionname(123456) event? When the user reaches the end (completed), another click simply starts it over at unmarked.
I've been searching stackoverflow for hours however have not been able to find anything related to what I am trying to do and very new to jquery/ajax/javascript
<button type="button" name="Unmarked" value="0" class="btn btn-default"/>Unmarked</button>
<button type="button" name="Form" value="1" class="btn btn-info"/>Form</button>
<button type="button" name="Frame" value="2" class="btn btn-primary"/>Frame</button>
<button type="button" name="S/NB" value="3" class="btn btn-warning"/>S/NB</button>
<button type="button" name="S/B" value="4" class="btn btn-danger"/>S/B</button>
<button type="button" name="Completed" value="5" class="btn btn-success"/>Completed</button>
I'm hoping someone can at least point me in the right direction.
Based on your comment...
We have an array of the item id's that you want to iterate through.
var buttonArray = ["unmarked", "form", "frame", "snb", "sb", "completed"];
We keep track of which items is currently visible
var currentItemIndex = 0;
Finally we will call the function to change visibility on every button click.
function changeButtonVisibility() {
var buttonClicked = $("#" + buttonArray[currentItemIndex]);
var nextItemIndex = 0;
if(currentItemIndex + 1 > buttonArray.length - 1) {
nextItemIndex = 0;
} else {
nextItemIndex = currentItemIndex + 1;
}
var nextButton = $("#" + buttonArray[nextItemIndex]);
currentItemIndex = nextItemIndex;
buttonClicked.addClass("hidden");
nextButton.removeClass("hidden");
}
Essentially you take the current button, add the class hidden, take the next button, remove the class hidden. The if statement ensures that if you hit the last item, you start over again with the first item.
Lastly, bind the function as a click event to your buttons.
$("#unmarked").click(function() {
changeButtonVisibility();
});
$("#form").click(function() {
...
Depending on your specific use case, you could probably come up with a more elegant way to solve this. Also you can definitely eliminate some lines of code. However, I hope the example gives you a good starting point or idea on how to tackle the problem.
Working example: jsbin.com/xeyejesaxe

Categories