I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.
This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.
Related
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);
I am new in unit testing in angularjs. I read the tutorial from:
https://github.com/angular/protractor/blob/master/docs/tutorial.md.
I want to click on hyperlink but i dont know how can i achieve this.
Here is my code:
<li ng-repeat="menu in sidebarLinks" ng-if="menu.visible == true " ng-class="{active: isActive('/{{menu.action}}')}">
<a ng-href="#/{{menu.action}}" title="{{menu.name}}" ng-click="loadSubmenus(menu.action)" ng-class="{active: isActive('/{{menu.action}}')}">
<div class="icon {{menu.icon}}" ng-class="{active: isActive('/{{menu.action}}')}"></div>
<span>{{menu.name}} </span>
</a>
</li>
In unit testing:
describe('Protractor Demo App', function() {
browser.driver.get('https://localhost:8443/login.html');
browser.driver.findElement(by.id('name')).sendKeys('test');
browser.driver.findElement(by.id('password')).sendKeys('test');
browser.driver.findElement(by.id('login')).click();
});
After login url is https://localhost:8443/#/dash
After click on link url should be https://localhost:8443/#/hypera
Since your links won't work for anyone else because you're running it locally on your machine, I can only tell you the best way to do it.
If you're dealing with hyperlinks, you need to get the element that you've set with 'login'. I'm not seeing it in your HTML snippet so I can't give you the correct path.
If it was a basic hyperlink, you could find it easily by using something like:
element(by.linkText('login')).click()
If your login button's text is indeed 'login'. If it is something else, like a button, you'll need to find the exact element and it will look like:
element(by.css('span[class="login"]')).click()
If your login button is under a 'span' tag in your HTML page.
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
I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.
If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?
You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.
Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor
This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.