Node JS Click Button on Page - javascript

I'm trying to make a web-scraper in Node JS and I've hit a roadblock.
I need to click on a button BUT, if I'm not mistaken, Node doesn't actually render the web-page like a browser would so I can't use a selector or X-Path.
How then, could I click a specific button with the value "yes" if I can't use the selector or X-path? There's no id unique to only the yes button.
I'm asking this because I want to parse a specific web-page but I get redirected to a page that asks me to press two buttons.
Pressing 'Yes' will bring me to the page I want. Pressing 'No' will obviously stop me from going forward.
Is there any way to do what I want within the confines on Node without having to resort to something like JSDOM?
Here's part of the HTML i'm working with:
<div class="buttons">
<button class="c-btn c-btn-primary" type="submit" name="bigbutton" value="no">no thank you</button>
<button class="c-btn c-btn-primary" type="submit" name="bigbutton" value="yes">continue</button>
</div>
I tried using something like this:
document.getElementByID("selector").click()
but was returned with 'ReferenceError: document is not defined'.

Have you tried to use Zombie? I've used and worked well! This link is very helpful, since clarify quickly how to perform actions.

Related

How to manage a button with disabled attribute using Python Selenium?

Having this button:
<button id="btn-login-5" type="button" class="m-1 btn btn-warning" disabled="">Update</button>
I want to remove the disable attribute in order to click the button.
This is the code i see everytime:
button = self.driver.find_element(
By.XPATH, "/html/body/div/div/button")
self.driver.execute_script(
'arguments[0].removeAttribute("disabled");', button)
But I can't figure me out how that can work for anyone, I mean, if the element is disabled, selenium cannot run that very first line, is not able to asign the var "button" because he can't find that element.
Am I missing something? I am getting this error if a run that:
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/div/div/button"}
Update
I just realized this is related to selenium grid, I tried to click the button in a lot of ways, and no one works, but if instead of using selenium grid I use a local webdriver all of them works! So I have no idea what to do now.
If you use this relative xpath, instead of absolute one, it works:
button = driver.find_element(By.XPATH, "//button[#type='button']")
But is this the only button in your DOM? If not, you may have to add other relative entities to it.
Refactored Code (as per your query info provided):
button = driver.find_element(By.XPATH, "//button[#type='button']")
driver.execute_script('arguments[0].removeAttribute("disabled");', button)
button.click()
Output:
Process finished with exit code 0
The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the button clickable again.
You were close enough. To remove the disabled attribute, the Update element can be still identified for it's presence using the following Locator Strategy:
button = WebDriverWait(self.driver, 20).until(EC.presence_of_element_located((By.XPATH, "//button[#class='m-1 btn btn-warning' and text()='Update']")))
self.driver.execute_script('arguments[0].removeAttribute("disabled");', button)
All works fine, the problem is a different one, my code couldn't find the element because the element was not there, something very strange, I have a docker with the page server and if I open the page I can see the button but the selenium grid webdriver doesn't load the button at all, I don't know why, maybe that button depends of some server wich is not accesible from the webdriver.
I'll ask the page developer for this, but the code was good :)
I lost a full day of work for nothing :)
If it's automated tests that fail, running with a --headless option, you could enable print-screens in case of errors and then check if the button shows or not. Might be that the button is outside of the viewport. Or the automated testing does not wait long enough for the element to be rendered.

Can a button be un-clickable with Javascript?

Please excuse me for asking such a specific question, but I am trying to help a parent automate the filling out of information on the a website which they must do daily for their child to go to school.
Here is the relevant HTML snippet from the above website
<div class="text-center" id="btnDailyScreeningSubmit">
<button type="button" class="btn btn-primary mt-2 btn-lg" onclick="showLayout('#guest_questions')">Fill Out Daily Screening</button>
</div>
I am trying to click on the button at the bottom of the page that says "Fill Out Daily Screening" using JS. The JS will be integrated into a Siri Shortcut, using the Scriptable App for iPhone, so I am able to import some JS libraries into the script if that would help this at all.
I have tried
document.getElementById("btnDailyScreeningSubmit").click();
document.getElementById("btnDailyScreeningSubmit").submit();
which does not work. Nothing happens on the webpage and the Chrome JS Console comes back with "undefined".
I have tried the generic
document.forms[0].submit();
Which I guess submits the form, but that is not what the site is looking for. Instead of going on to the next page, the browser returns a JSON response.
I was hoping there might be a way to click the button based on its location on the website, but I have not been able to find anything promising in that area.
So I am reaching out to all the JS experts on here to find out if there is a way to click that button on that website?
You need to click the button inside the div element instead.
document.getElementById("btnDailyScreeningSubmit").querySelector('button').click();
You cannot click things from javascript until the user has clicked on the page... add a mousedown listener to the window then try it.

Navigate to Url or Url.Action in Javascript

This may have already been answered somewhere but I cannot find any information that makes sense to me.
I have a Cancel button in my cshtml that contains a href='#Url.Action("Index"). It looks like this:
Cancel
Now, if changes have been made, I need to confirm whether to leave the page or save changes before leaving.
So, I've added an event on the button click to present a popup to confirm to continue or save. Of course, leaving the button code in the cshtml file as it is, acts exactly as one would expect. It's a link and my event never fires.
I changed the cshtml button to the following code:
<input type="button" class="navigationButtons" id="btnCancel" value="Cancel" title="Return to Home Page" />
Now, my event gets fired and I display my popup to confirm continue or save.
The save works great because it's another method that performs a save to the db. I can't make the Confirm button into a link button, because it is used in another place in the code that just continues without leaving the page.
I have found answers for window.location, $.get and $.ajax. But I cannot figure out how to put into the JavaScript code that will go to my Index page.
PLEASE! Does anyone know how to do this and help me understand what I obviously do not know. :-(
Provided that your JavaScript is included in your .cshtml file, you can write Razor code inside your script:
window.location.replace('#Url.Action("Index")');
If you're having trouble with that, you could try creating a hidden link on your page and having your JavaScript trigger a click:
<a id="my-hidden-url" href="#Url.Action("Index")" hidden></a>
<script>
$('#my-hidden-url').trigger('click');
</script>

Button vs link vs input type="submit" on a form

A user logs in to his control panel and sees his incoming messages. Near each message there is a "Reply" button. What is the correct way to implement that button?
I see three main options:
Use a link:
Reply.
Disadvantage:
We need to style that link to look like a button. Because I think that action "Reply" should be represented by a button, not a link (in my opinion links should be used when they link to some resource and when we have a noun in link text; and if we want to make an action and have a verb (action) in a caption - button should be used).
Use a button:
<button onclick="location.href='customer.php?reply&messageid=1234'">Reply</button>`
Disadvantage:
The user must have JavaScript enabled. Though based on our statistics 99.8% of our users have JavaScript enabled, and if they don't it will be really difficult for them to work on our website anyway (we have many features implemented with JavaScript). So I think that 100% of our actual active users have JavaScript enabled.
Use a form with <input type="submit">:
<form action="customer.php?reply" method="get">
<input name="messageid" type="hidden" value="1234" />
<input type="submit" value="Reply" />
</form>
Disadvantage:
I think using form here is "artificial". A user doesn't enter anything. We use the form just to make our button work. I also think that using POST request when we don't change anything and just need to show a reply form to a user - violates REST principles. But even with using GET I still think that using form is artificial in this case.
Some other notes:
Using a button inside a link doesn't work in IE.
It's a private section of our website so search engines can't see it and we don't really need a link to help search engine follow it and index the resource (it's a usual argument for using links in web instead of buttons)
Which one would you choose and why?
UPD. Well, I have decided to use a link. Thank you everyone for discussion!
I would definitely use a link: progressive enhancement.
You want the button to be usable even with Javascript turned off (remember: every user is a non-javascript-user for the duration of the page load. If they're on a slow connection (e.g. mobile), they should be able to reply as soon as they see the button).
Styling is a non issue (you weren't gonna use the default button styles, were you?).
Using POST when the user isn't submitting anything sure is wrong. Even with GET, it's still not really form material...
It's pretty easy to style <a> and <button> identically, just use a common class name. <input type="button"> can be a little trickier, but you don't need to use it.
Your tag choice should never be dictated by your intended presentation, but what the element is and what it does. Links should be marked up as
<a>.
I agree that a POST is wrong. So, set your form to use method="get". Use just one form and leave out the hidden fields. Using <button>, the displayed text can differ from the submitted value.
<form action="customer.php" method="get">
<input type="hidden" name="reply" />
<div class="message">
<div class="messageBody">..</div>
<button name="messageid" value="1234">Reply</button>
</div>
<div class="message">
<div class="messageBody">..</div>
<button name="messageid" value="1235">Reply</button>
</div>
...
</form>
All methods are correct, except that method 2 is correct only under the assumption that you can safely ignore non-JavaScript browsing.
The assumptions and comments presented about forms are incorrect, or at least misleading. A form need not involve user input; forms can be used e.g. to submit previously collected data, with no other fields but a submit field. And the POST method can be used even when not changing anything, e.g. due to the amount of input data (as there are fairly low upper limits on GET data); besides, the form presented in the question uses GET, the default method.
Otherwise, this is mostly a non-constructive question, calling for discussion and argumentation rather than technical solutions.
One can always use both, like;
<button>Click Me</button>

Using javascript/jquery to dial a number

Does anyone know how I can dial a number using javascript? I've tried the following:
window.location.href = 'tel:7178081998';
The button registers a click but doesn't do anything in the ios environment.
I'm running into an issue where my "tel" links do not work because of a script that I have (FastClick). I've tried everything I can think of which is why I am at where I am.
Thoughts?
555-867-5309 This should work.
If need put a pop up dialog to ask user " Are you sure you want to call" Just in case s/he clicked it unintentionally.
<a id="call" href="">555-867-5309</a>
Use call id to open a dialog, on click of ok, put data dynamically to href attribute.
Sounds like a sandbox issue. Why not break out of the restriction with an iframe? Dynamically add it to the DOM and have it dial the number.
Adding IFRAME to DOM by Javascript

Categories