How To Access and Click Button PhantomJS - javascript

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.

I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Related

Chrome Extensions: Use a content script to modify existing scripts on a web page?

I'm creating a chrome extension that needs to hook into another script that already exists on my target web page. For simplicity's sake, I'm trying to find the following existing script element on a page and add a console.log() to it.
<script type="text/javascript">
var viewModel = new ScenePlayViewModel('', 'Ace', false);
viewModel
.load('jgWJJ2qsxx')
.then(function () {
sceneDOM = new SceneEditDOM2(viewModel.scene());
sceneDOM.init();
viewModel.isSubmitViaShareUrl(false);
viewModel.isSubmitViaUnityPackage(false);
console.log("HOOK INJECTED"); <--------------------------------------------- line to add
});
</script>
I've tried a number of solutions but none of them have seemed to work. For example, I've tried using a content script to find the script and replace the text, but it appears to run the pre-change script instead of my modified code.
// replaces javascript on website, but doesn't run new version
var scriptLoadScene = $("script:contains('new ScenePlayViewModel')"); // find the script
scriptLoadScene.text("console.log('Hello World')"); // change the text
What should I do? Basically, I'm just trying to change/add scripts to the web page to add more features.
This doesn't exactly answer your question, but hopefully will help you find a solution.
First - hopefully someone with more knowledge than me will confirm or discredit this - from my understanding, the script code is only run once, on page load, unless otherwise triggered by some event. Since Chrome extensions are triggered after the page has loaded, this script will have already been run, and anything inserted after won't run unless triggered.
I suppose you could always call the function again after you've edited it, but I don't have the knowledge or experience to predict what would happen then.
In my experience, I've just added my own '' tags with the code I wanted to run by writing them into the DOM, either into the '' or '' element.
Best of luck.
-brent

Linking to the end of another page in which i have no access to the source of

The website i'm trying to link to is pretty much a text document (see below), i'm trying to link to the last line preferable, highlighting it would be ideal but a link to the end of the page would work.
I've tried various code snippets, but as i have no access to the code of the page i cannot create anchor in the target page and link directly to that.
if i can get the following code to run on the page once i have navigated to it, i believe that would solve the problem, but my JS knowledge does not extend that far
window.onload=toBottom;
function toBottom()
{
alert("Scrolling to bottom ...");
window.scrollTo(0, document.body.scrollHeight);
}
i am linking using the following code
`— Alan Turing `
http://www.loebner.net/Prizef/TuringArticle.html
I would deeplink and find an ID on the remote page and link directly to that so for example
www.loebner.net/Prizef/TuringArticle.html#ELEMENTID
However if the page does not have an element at the bottom with an ID then might be a problem, do you have access to that page to add an ID?
Cleanest solution was contacting the site administrator of the site and setting up a mirror on my server of the original file and adding an #ID to the element i wanted to deeplink to and linking to the #ID from within my webpage
href="<c:url value="loebner#ID"/>"

How do I change and run js and css (less) files with ajax (using jquery)

When I click a botton I make an ajax call which loads different html code inside a div with the id 'main'. I have no problems getting the html code to show, but I can't find a way to change/add/include css and js code to my current page.
Or actually, I have found many different ways but non does what I want it to do.
First I tried to send over the link and script tags as strings inside a json object (with my other html code) and inserted them where I wanted them to be.
$('#main').children().remove();
$('#main').append(data.html);
$('body').append(data.js);
$('head').append(data.css);
it seems like this inserts them correctly when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but they don't execute/run.
Then, I tried to add id attributes to my css and js elements and then change the href and src attributes respectively (I have tried doing this both before and after my ajax call but both inside the click event). This allowed me to take away the css and js which belonged to the previous html code that was inserted in the div which is what I want.
$('#lessAjax').attr('href', 'location/style.less');
$('#jsAjax').attr('src','location/main.js');
and they are also included when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but obviously they don't execute/run either since this is pretty much the same thing as I did in the first example (only that now the code which is not used in my new view is taken away).
I then thought I had found a solution to the js file after finding the $.getScript() method since it executed my script which is directly under $(document).ready(function(){....}, but I noticed that the file cannot be found anywhere when I 'inspect elements' or when look under the 'sources' tab in the browser (chrome) so there is no way to take away or debug the code.
I have also tried
$('<link href="location/style.less" type="text/css" rel="stylesheet/less">')
.appendTo("head");
which includes the file but doesn't execute/run/work either.
I don't want to just include css and js code within script and style tags. I want to be able to switch css and js files as I change html code inside this div with Ajax (jQuery).
I have tried many more things in the 5 hours I spent trying to do this but I can't remember them all now. Surely this must be a common thing to do? Or are there any reasons for why I really shouldn't do this?
Any help would be much appreciated.
jqueryMobile: How to load external Javascripts
Can I load external stylesheets on request?
However please consider using a templating engine for content like this. There are many out there like underscoreJS and even frameworks that support them like Knockout, AngularJS and Backbone.
$("#somebutton").click(function(){
var path = 'path to css';
$.ajax({
url: path,
type:'HEAD',
error: function()
{
alert("failure")
},
success: function(result)
{
alert("success")
}
});
})

Script runs fine in the browser console, but not online

I'm working with a Wordpress website, where I'm building a navigation bar. One of the features I'd like to add is where if you're on a certain page, the option in the navigation bar will be bold to represent that is the section of the site you're visiting.
I'm attempting to achieve this using JavaScript, as I have no working knowledge of PHP:
var current_page = document.URL;
var current_option_id="";
if(current_page==="some-url"){
current_option_id="menu-item-34";
}
document.getElementById(current_option_id).getElementsByTagName("A")[0].style.fontWeight="bold";
Basically, my code figures out which page we're on, and will assign the right menu option's id to the current_option variable. Then, the script will attempt to select the
proper menu option, select the link inside that menu option, and change its style.
The problem with this script is that it simply won't work, generating an error where it cannot select the HTML element; document.getElementById(current_option); returns null. However, when I do this in the console, it works fine, and the style is changed properly. Why is this? I know that the current_option variable has the correct value, but the script fails when it tries to select the element to change.
Any suggestions and help are greatly appreciated. If you know how to do this in PHP with something that will integrate nicely with Wordpress, please do share (and explain how your code works!). If I broke any StackOverflow rule, my apologies.
it's hard to say without seeing your code, but is there a chance that your script is being executed before your entire page is loaded (or, more specifically, before the element with id #menu-item-34 has been added to the DOM)?
Try wrapping your script inside a function, and then setting that function as your page's onload handler:
window.onload = function() {
/* code goes here */
};

jQuery Copy text inside iframe to main document?

Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....
when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly

Categories

Resources