Hello:
In one of my projects, I need to visit one web site and click on some DOM elements to submit some forms to the web server. The web site contains one root page, one main page, and about 100 children pages. All the pages are in hierarchy structure, being the root is the top node, main page is the middle node, and children pages are the lowest level nodes.
All the DOM elements I need to click are in the children pages.
From my testing, I can visit specific child page, and run the following JavaScript to click on certain DOM element, and submit the form.
document.getElementsByClassName('class_name1')[0].click();
document.getElementsByClassName('class_name2')[0].value = 1;
var forms = dom.querySelectorAll('form');
if (forms.length == 2)
{
document.querySelectorAll('form')[1].submit();
}
However, as there are almost 100 children pages, it is not easy to visit each page using browser. Therefore, I want to visit the main page (the middle node), and stay there, but use XHR JavaScript to visit any of the children page, and run the above JavaScript to submit some forms.
I have the following JavaScript to run from the main page:
function child1_submit(child_url1, class_name1, class_name2)
{
let xhr = new XMLHttpRequest();
xhr.open('GET', child_url1, true);
xhr.onload = function()
{
var parser = new DOMParser();
var dom = parser.parseFromString(xhr.responseText, 'text/html');
var button1 = dom.getElementsByClassName(class_name1)[0];
if (button1)
{
console.log(bet1);
button1.click();
}
};
xhr.send();
}
But my code did not work, but I can see the button1 return the correct value of the DOM element.
I used Chrome Developer Tools to check the working JavaScript snippet, and I found that on the child page, the DOM click was initiated by two different extra JavaScript files (mini_js1.js and mini_js2.js), and they are rather big, about 600KB to 1MB in size.
Therefore, I understand the reason why my JavaScript function child1_submit didn’t work, because I have to download the those mini_js1.js and mini_js2.js.
how I can download and set up the small environment with 2 JavaScript files (mini_js1.js and mini_js2.js), in order to make my JavaScript function works. My code works if I visit the child page, as in mini_js1.js and mini_js2.js are there too, but when I used XHR request to load the child page, inside the XHR.onload function, those mini_js1.js & mini_js2.js are missing. In short, how I can set up a mini environment to run my JavaScript code.
Please advice!
In one of my projects, I need to visit one web site and click on some DOM elements to submit some forms to the web server. The web site contains one root page, one main page, and about 100 children pages. All the pages are in hierarchy structure, being the root is the top node, main page is the middle node, and children pages are the lowest level nodes.
All the DOM elements I need to click are in the children pages.
From my testing, I can visit specific child page, and run the following JavaScript to click on certain DOM element, and submit the form.
document.getElementsByClassName('class_name1')[0].click();
document.getElementsByClassName('class_name2')[0].value = 1;
var forms = dom.querySelectorAll('form');
if (forms.length == 2)
{
document.querySelectorAll('form')[1].submit();
}
However, as there are almost 100 children pages, it is not easy to visit each page using browser. Therefore, I want to visit the main page (the middle node), and stay there, but use XHR JavaScript to visit any of the children page, and run the above JavaScript to submit some forms.
I have the following JavaScript to run from the main page:
function child1_submit(child_url1, class_name1, class_name2)
{
let xhr = new XMLHttpRequest();
xhr.open('GET', child_url1, true);
xhr.onload = function()
{
var parser = new DOMParser();
var dom = parser.parseFromString(xhr.responseText, 'text/html');
var button1 = dom.getElementsByClassName(class_name1)[0];
if (button1)
{
console.log(bet1);
button1.click();
}
};
xhr.send();
}
But my code did not work, but I can see the button1 return the correct value of the DOM element.
I used Chrome Developer Tools to check the working JavaScript snippet, and I found that on the child page, the DOM click was initiated by two different extra JavaScript files (mini_js1.js and mini_js2.js), and they are rather big, about 600KB to 1MB in size.
Therefore, I understand the reason why my JavaScript function child1_submit didn’t work, because I have to download the those mini_js1.js and mini_js2.js.
how I can download and set up the small environment with 2 JavaScript files (mini_js1.js and mini_js2.js), in order to make my JavaScript function works. My code works if I visit the child page, as in mini_js1.js and mini_js2.js are there too, but when I used XHR request to load the child page, inside the XHR.onload function, those mini_js1.js & mini_js2.js are missing. In short, how I can set up a mini environment to run my JavaScript code.
Please advice!