I am attempting to automate a button click on a website. The only problem is, the HTML for the button looks like this (please note that this is not the exact button I am trying to click, it is just a real example of what a lot of buttons look like):
<button type="submit" class="Ghost-btn">Continue</button>
Obviously, there is no ID for this button, so I don't know how to 'click' on it. Is there a way of using the class name, or is there a way to program javascript to edit the HTML and add an ID for the button?
Thanks for your help in advance.
Louis
PS the link for the above button is https://raffle.sneakersnstuff.com/adidas-yeezy-boost-700-salt-EG7487 , and it is the first button you will see, labelled 'continue'.
You can use document.querySelector to use any CSS selector to select an element in JS, for example:
document.querySelector(".Ghost-btn").click();
Read more about this at MDN.
This would also allow you to select the button in other ways, for instance:
document.querySelector("button[type=\"submit\"]").click();
is also valid.
You can use
document.getElementsByClassName("Ghost-btn");
document.getElementsByTagName("BUTTTON");
but be sure that there might be more than one components so have to select the right one.
ID is just a handy and simple way for identifying any DOM element.
You can use other attribute or a set of attributes unique to the document for this purpose.
For example "type" in your example, if this is the only input of type "submit"
Or if there are more than one "submit" buttons, you can use type="submit" and class="Ghost-btn" or even text of the button.
Related
I have a checkbox, with a text including a link as follows:
<div id="agreementDiv" class="cust-pad-bot1">
<input id="inputAgreement" type="checkbox">
<label for="inputAgreement">I have read and agree to the <a target="_blank" href="http://example.com/terms-and-conditions"><u>Terms & Conditions</u></a></label>
</div>
(Please note that this snippet is only a sketch of the actual implementation. CSS classes are removed.)
Using Nightwatch.js I want to automate checking the checkbox. In my UI, clicking on the label text subsequently checks the checkbox.
browser
.useXpath()
.waitForElementPresent(`//*[#id="agreementDiv"]/label`, 10000)
.click(`//*[#id="agreementDiv"]/label`)
But when I try to do it using Nightwatch, it clicks on the link and the link is opened in a new tab. But the checkbox is not clicked. Clicking directly on the checkbox using css/xpath does not work either. I appreciate if anyone can explain how to prevent nightwatch from clicking on the child anchor.
Thank you.
You have written the code to click on label not on checkbox. Change the xpath. But use method browser.useXpath(); before you use xpath selector.
browser
.waitForElementPresent(`//*[#id="agreementDiv"]/input`, 10000)
.click(`//*[#id="agreementDiv"]/input`)
By using css selector (default selector in nightwatch):
browser
.waitForElementPresent(`#agreementDiv>input`, 10000)
.click(`#agreementDiv>input`)
This should solve your problem. If you click on checkbox, checkbox will be selected.
I found a solution using nightwatch-custom-commands-assertions third party module (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). This module adds a set of custom nightwatch commands and among these there was jqueryClick function (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). I called this function providing the xpath of the checkbox and it worked well. Use of the default click function didn't work for me on the checkbox.
The first button is
<button class="btn bid-hotel-btn" type="button" onclick="buyNow(0,false)">Beli Sekarang</button>
and the second button is
<button class="btn bid-hotel-btn" type="button" onclick="buyNow(1,false)">Beli Sekarang</button>
The difference is only the onlick event on HTML and I want to automatically click one button.
Try to use XPath
//button[#onclick="buyNow(0,false)"]
for first button. And
//button[#onclick="buyNow(1,false)"]
for second
I do not know much about javascript, but you can still use this example below as a reference:
you can locate multiple elements that share similar (or identical) attributes using:
twoButtons = find_elements_by_css_selector("button[class='btn bid-hotel-btn']")
Provided this class attribute is unique, if it is not unique, you can combine more attributes together to narrow it down. E.g.
twoButtons = find_elements_by_css_selector("button[class='btn bid-hotel-btn'][type='button']")
twoButtons should contains two web element of the buttons you want to click.
Then you address each one button in this twoButtons list, e.g.:
twoButtons[0].click() //click the first button
twoButtons[1].click() //click the second button
What did I mean by "first" and "second" above?
First button will appear above second button in their HTML hierarchy.
The button I need the script to click is setup like this:
<div id="closer" style="visibility: visible;">
<input style="height:32px" type="button" onclick="javascript:showIt('hide');" value="Click here to return to AdventureQuest">
</div>
The thing that I can't figure out is how to reference the button as a variable, since the button has no id the getElementByID() won't work. I think that in order to reference the button I need to reference the <div> element somehow.
Your question is confusing.. you need a selector to find the button? $('#closer>input[type=button]') ...
and in the question title you say clicks on a button automatically? trigger a click on it:
$('#closer>input[type=button]').trigger('click');
You can use
getElementByTagName(input);
This will give you back an array of all input tags on the page.
If this is the only input tag use
getElementByTagName(input)[0];
If you use jQuery, you can access it easier by fetching the div first and then selecting the input. Use the .trigger() to trigger actions.
Is there a Way with Javascript to add Help bubbles over an input Box?
For example when you you hover over an input for Name: _____ it would say like First Name????
Thanks
An example is this https://edit.europe.yahoo.com/registration?.intl=uk
When you go over the name field it says First name in a bubble
Do you mean the title attribute?
<input type="text" title="First Name" />
As said in another answer you can add a title attribute to a html tag to have a tool tip display.
Or if you are after the behaviour where information is displayed somewhere on the page telling you about the text box you have selected you can; dynamically add to a div using document.createElement() and appendChild() when you hover over the element and removing it with removeChild() upon moving your mouse away or change the innerHTML of the html tag on those two events.
Edit:
Unfortunately because I am a 'new' user I can't include all the hyperlinks to each part of the mozilla developer site, but simply search for those functions there for more explnation.
With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.