Looking for something similar? You can insert the code below into your index.html file. By clicking a "Test" button, you can replicate the scenario you described — clicking "buy," entering a name two seconds later, and then clicking "agree" another two seconds after that.
<html><head><title>test</title></head>
<body>
<button class="test" onclick="myFunction()">Test</button>
<button class="buy" onclick="unhide_form()">Click me</button>
<form id="main_form" style="display: none">
<label for="fname">First name:</label><br>
<input class="name" type="text" id="fname" name="fname" value="" placeholder="Your name"><br>
<input type="radio" id="agrees" class="agrees" value="agr">
<label for="agrees">Agrees</label>
<input type="submit" value="Submit">
</form>
<script>
async function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function unhide_form() {
var f = document.getElementById("main_form")
f.style = "display: block"
}
async function myFunction() {
document.getElementsByClassName("buy")[0].click()
await sleep(2000)
document.getElementsByClassName("name")[0].value = "John"
await sleep(2000)
document.getElementsByClassName("agrees")[0].click()
}
</script>
</body></html>
If this isn't sufficient for your specific task, please provide more details such as the site URL, the actions you're automating (fields filled, buttons clicked), and where the process is failing.
UPDATE: I understand now. While navigating JavaScript, I also gained new knowledge in the process :) Here's the code:
function submit_wayback_machine_form(url_to_save) {
elems = document.evaluate('//*[@id="web-save-url-input"]', document, null, XPathResult.ANY_TYPE, null );
elem = elems.iterateNext()
elem.value = url_to_save
elems = document.evaluate('//input[starts-with(@value, "SAVE PAGE")]', document, null, XPathResult.ANY_TYPE, null );
elem = elems.iterateNext()
elem.click()
}
submit_wayback_machine_form("https://google.com")
I have tested it, and it seems to be functioning correctly: https://i.sstatic.net/n4a5x.png
Additionally, here are some valuable resources I used:
- https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
- For quick testing of XPaths, I recommend the "XPath Helper" Chrome extension: https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl
UPDATE 2:
Is there a shortcut in JavaScript to simulate element.click (Xpath)? Why the need for iteration and evaluation?
This is how the process works – we utilize document.evaluate(...) to execute the XPATH expression first and subsequently iterate through the results due to potential multiple matching elements.
To simplify usage slightly, perhaps consider the following functions:
// returns the first matching element
function getFirstElementByXPATH(xpath) {
elems = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
elem = elems.iterateNext()
return elem
}
// returns an array of all matching elements
function getAllElementsByXPATH(xpath) {
elems = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null)
results = []
while (1) {
elem = elems.iterateNext()
if (elem != null) {
results.push(elem)
} else {
break
}
}
return results
}
Then, use them like so:
getFirstElementByXPATH("//li/div/button/span").click()
//or
getAllElementsByXPATH("//li/div/button/span")[0].click()
//or
element = getFirstElementByXPATH("//my_custom_expression_1")
element.click()
elements = getAllElementsByXPATH("//my_custom_expression_2")
elements[0].click()
elements[1].value = "abc"
Hoping this provides added convenience!