How to load JavaScript files to enable DOM element click

[zydjohn]

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!

 

[ggriffit]

you are probably better using some kind of tool like Selenium or JMeter to automate the action rather than Javascript for this as you are likely to have all sorts of issues (see Same Origin Security Model) making interactions from one site to another.

If you have control of both sites, i would suggest using an IFrame to load the second site in and then you can use the DOM model to traverse from your main page into the other page for population and submission, but you may encounter access issues as mentioned above.

another option is to look at what is being submitted and then replicate the submission package (usually a HTML Form) in your own code pointing at the same destination as the client site one.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/