Select button elements based on appearing text in the browser - javascript

(EDIT:
I forgot to ask to not use jQuery)
I'm trying to select html buttons based on their displayed text, not their class or id.
All the button have the same dom structure and classes. Like follow and unfollow buttons in the folowing example:
<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
<span class="button-text following-text">
Following
</span>
<span class="button-text unfollow-text">
Unfollow
</span>
</button>
The closest solution I found is based on the dom structure like getElementsByClassName, getElementById and :contains(), but I can't figure it out.
EDIT2:
The solution in jQuery would be $('span:hidden:contains(Follow)').parent();
but I'm searching for a solution without jquery.

Try with the below code, you can style accordingly
$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );

you can give id's to spans as follows:
<span id="follow" class="button-text following-text">
Following
</span>
<span id="unfollow" class="button-text unfollow-text">
Unfollow
</span>
and then by using the below code in javascript, you can check their status
if(document.getElementById("follow").innerHTML=="Following"){
//follow
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow
}

I found a way to do it with :hidden but this is jQuery and thus not useful in my case.
$('span:hidden:contains(Follow)').parent();
The best thing I found now is to get all buttons first and then use a condition (takes 2 steps, but working).
var buttons=document.getElementsByClassName('...');
//loop...
if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
//buttons[i]
}
If you find a better solution it's still welcome :-)

Related

Can't click button with selenium

I'm a newcomer when it comes to javascript and selenium. I have created a simple add to cart project, but the one i am currently working on im having some troubles. The HTML code is:
<div class="buttons-set" id="shipping-method-buttons-container">
<button type="button" class="dark" onclick="shippingMethod.save()" onkeypress="shippingMethod.save()">Continue</button>
<span id="shipping-method-please-wait" class="please-wait icon icon--notch" style="display:none;">
Loading next step... </span>
</div>
I can't seem to figure out anyway where i can click the Continue button. I have tried things such as
driver.findElement(By.linkText("Continue")).click();
driver.findElement(By.xpath(//*[#id='shipping-method-buttons-container']/button)).click();
and many other combinations but none seemed to work.
Try getting the element by its class name:
driver.find_element_by_class_name("dark").click();
I believe you have used implicit wait. If not we need to add it.
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
Also try this below xpath.
driver.findElement(By.xpath("//button[contains(text(),'Continue']")).click();
Hope this helps. Thanks.
Try this below code using cssSelector locator.
driver.findElement(By.cssSelector("button[class='dark'][type='button']")).click();
OR
Try to click the button using java-script executor.
WebElement continue_button = driver.findElement(By.cssSelector("button[class='dark'][type='button']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", continue_button);

jQuery selector, cant pass through

I have
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: </span><i **FROM HERE**>'.$wiersz['likes'].'</i><i>'.$wiersz['unlikes'].'</i></div>';
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: <i>Thank you</i></span><i **OVERHERE**>'.$wiersz['likes'].'</i> <i>'.$wiersz['unlikes'].'</i></div>';
How Can I go FROM (FROM HERE) to the (OVER HERE) by selectors in jQuery?
I'm hiding first div and showing second div. I need to increase innerText of OVERHERE but I dont know how to go there by selectors.
I did:
$(this).parent().next()
this lead me to second div but still cant go into OVERHERE in second div.
try this..
$(this).parent().next().children()[2]
Assuming this is how the rendered HTML looks like
<div>
<span>data<i> added by: username</i></span>
<span>Rate: </span>
<i onclick="$(this).closest('div').next().find('i').eq(2).text(parseInt($(this).text(),10))">25 Likes</i>
<i>unlikes</i>
</div>
<div>
<span>data<i> added by: username</i></span>
<span>Rate: <i>Thank you</i></span><i>Will be overwritten </i> <i>unlikes</i>
</div>
Or $(this).parent().next() instead. However closest is safer in case you wrap your <i> in something

Skip hidden tab indexes

I have the following html:
<span tabindex="19">
</span>
<span tabindex="20">
</span>
<span tabindex="21">
</span>
<span id="hidden" tabindex="22">
</span>
<span tabindex="23">
</span>
<span tabindex="24">
</span>
As you can see one of the span is hidden, the code to hide it is
#hidden
{
display: none;
}
I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:-
go to 19,20,21,23,24
I have no way of controlling the tab indexes as they are coming hard coded in the html i process.
Thank you guys!!
I tried a lot of things, so i was wrong in hiding it using
#hidden
{
display : none.
}
I tried
#hidden
{visibility : hidden }
and tab skips the links which are marked as hidden.
You could give it a negative tabindex which is supposed to be ignored by the browser. There are jQuery plugins that do this as well, such as SkipOnTab https://github.com/joelpurra/skipontab.
var $hidden = $('#hidden');
$hidden.attr('tabindex', '-' + $hidden.attr('tabindex'));
It would help if you posted your code, but you could try something like this:
$("#hidden").attr("disabled","disabled");
Normally the tab-event automatic skips a non visible HTML-element. However, the hard coded HTML part can override with JavaScript after the page has been loaded:
<script>
window.addEventListener("load", function()
{
document.getElementById("hidden").setAttribute("tabindex", "-1");
});
</script>
JQuery is also a solution, but 90kByte is a little bit heavy for this simply task.

Clicking a button on a webpage using JQuery or Javascript

I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here

Changing text after a <br> with jquery

I have a span tag like this and stored in the variable "foo"
<span class="right margin">
سی ئی 1500
<br>
Nicole Kidman
</span>
Using jQuery OR javascript, how can I change the "Nicole Kidman" clause with something I want? innerHTML changes everything in the <span>
Edit: I edited the text with this code foo[0].lastChild.nodeValue="something else"; but is there another way doing that using only jQuery?
I recommend you add another span tag around Nicole Kidman.
<span class="right margin">
سی ئی 1500
<br>
<span>Nicole Kidman</span>
</span>
and change the text like this:
$(".right").find("span").text("something you want");
<span> is an inline element. We avoid using <br/> in them.
It is also advisable to use another tag to encapsulate your 'Nicole Kidman' text.(Like another <span>)
I'm not aware of your entire HTML structure so I'm going with what you have posted. Here is a fiddle example for how it can be done.
Here the foo is not a jQuery object:
foo.lastChild.textContent='something you want'
So the foo is a jQuery object, but you still need to access the dom element directly:
foo.contents().eq(-1).textContent='something you want'

Categories