How can I import an external .js to my Java test with Selenium in Eclipse?

Question

I want to import my function of JavaScript to my Java project in Eclipse and using it with Selenium, but I can't find the form to do this.

I try making .js file like this to Selenium could recognise this code:

Selenium.prototype.doProve = function() {
    $("#proveDiv > div > div").each(function(i, obj)
    { 
    $(i).click(function(){});
    });
};

Well, as you can see I have 3 divs and what I want to do it's to access to the third div in which I have 2 divs more (this is the clue of the loop). In each div of the loop I want to make a click.

I tried to use this function in my Java project but I can't get any result so I tried to execute this function as a String and then executing the script like this:

String script = "$(\"#proveDiv > div > div" +
                    "\").each(function(i, obj){ " +
                    "$(i).click(function(){});})";

//Executing script

 if (driver instanceof JavascriptExecutor) {
        ((JavascriptExecutor) driver).executeScript(script);
 }

It works, but it's not very useful, because I want to make an external .js which contains all the JavaScript functions and call them from there, not in a String.

Any help would be appreciated. I saw some questions here, but any of them worked for me. Thank you very much!

Answer 1

It works, but it's not very useful, because I want to make an external .js which contains all the JavaScript functions and call them from there, not in a String.

You can achieve this only by loading your external js file into the DOM

var addscript=window.document.createElement('script');addscript.type='text/javascript';addscript.src='http://localhost/somescript.js';document.getElementsByTagName('body')[0].appendChild(addscript);

Note : Most browsers do not allow you to load local resources so put your external js file in local webserver and then access it like http://localhost/somescript.js

After loading the js file into DOM now you can call the javascript functions in the external js file

Example

Lets say we have a external js file named somescript.js which contains the below function

//simple function which sets the value "test" to the search box

window.somefunc = function () {document.getElementsByName("s")[0].value='test';}

Webdriver code :

     driver.get("http://www.jquery.com");

     //Load the External js file into DOM

     ((JavascriptExecutor) driver)
      .executeScript("var addscript=window.document.createElement('script');addscript.type='text/javascript';addscript.src='http://localhost/somescript.js';document.getElementsByTagName('body')[0].appendChild(addscript);");

     //wait for the js to be loaded to the DOM

     ((JavascriptExecutor) driver)
      .executeScript("return typeof(somefunc)").toString().equals("function");


     //Now you call the JavaScript functions in the JS file

     ((JavascriptExecutor) driver)
      .executeScript("somefunc();");

Note : Behind the scenes Selenium wraps your JavaScript code in an anonymous function. So your somefunc function is local to this anonymous function.And due to JavaScript's scoping rules, somefunc doesn't exist outside of that anonymous function. so we have made it a global function by assigning it to window.

EDIT :

And I don't really understand why you use the window statement. And I was searching something like ((JavascriptExecutor) driver).executeScript("here the .js"); But I don't know if it is possible

This is how executeScript method executes the provided javascript

The script fragment provided will be executed as the body of an anonymous function.

Example if we used the below code

((JavascriptExecutor) driver)
      .executeScript("somefunc = function () {document.getElementsByName("s")[0].value='test';}");

((JavascriptExecutor) driver)
      .executeScript("somefunc();");

(function() {
        somefunc = function () {document.getElementsByName("s")[0].value='test';}
    })();

    (function() {
        somefunc();
    });

What do you mean where you say that you want to put the external .js into the DOM?

By DOM i mean Document object model of the page constructed as a tree of Objects (in short your webpage).We use javascript to load the external js to the webpage and then call the functions in the js file and execute them(like in the above example).

In the code that you put in your edit. Both functions are the same?

I just gave an example by that what i meant was each script provided in execute script will be executed in the body of an anonymous function.In our case we haven't used executescript to create the somefunc function rather used it from the external js file in dom we only called it using the executescript method so you can do it with or without the window object

  //simple function which sets the value "test" to the search box

somefunc = function () {document.getElementsByName("s")[0].value='test';}//this will also work

Hope this helps you.Kindly get back if you have any queries.