JQuery script for iframe is not working with Selenium3

Question

I have create a JQuery script that works in the browser console, but it is not working in the selenium3 automation. The exception I'm receiving is unknown error: $ is not defined. I read that the problem is the second argument in the selector. I have tried to escape the $ character but it is not working.

This is the excript I have executed in the browser console:

$('input[type=file]', $('#fonto').contents()).css('display','block')

But when I executed during my test case, is not working. This is the line of code:

((JavascriptExecutor) getDriver()).executeScript("$('input[type=file]', 
$('#fonto').contents()).css('display','block')");

I need the second argument because the input is inside an iframe.

This problem occurs in firefox and chrome browsers.

Which is the proper way to execute this script?

EDIT The JQuery is not loaded. I need to know how to enable the JQuery before execute my script.

Answer 1

Firstly you should switch to iframe. Than include jquery like this:

            browser.SwitchTo().Frame("your_iframe");
            var jqueryLoad = "if (typeof(jQuery) == 'undefined')";
            jqueryLoad += "{";
            jqueryLoad += "var iframeBody = document.getElementsByTagName('body')[0];";
            jqueryLoad += "var jQuery = function(selector) { return parent.jQuery(selector, iframeBody); };";
            jqueryLoad += "var $ = jQuery;";
            jqueryLoad += "}";

            IJavaScriptExecutor jsExe = browser as IJavaScriptExecutor;
            jsExe.ExecuteScript(jqueryLoad);

            jsExe.ExecuteScript("Your jquery code here !");

You can execute your jquery code now. If you have nested iframes you should configure code again.

Answer 2

Finally I have solve the problem, but I have two different approaches:

1. Follow the point 2 in this link. That means add a new file into your project and it has a very useful example about how to check is it is enable or not. In this case the script should remove the iframe part, because we are already into the iframe. Something like this $('input[type=file]').css('display','block')
2. The problem was that the iframe hasn't the JQuery active, but the main content, the default frame, has the JQuery active. Then I can change my current frame to the default one, execute the full script with the iframe selector ($('input[type=file]', $('#fonto').contents()).css('display','block')). And after that return to the iframe.

My choice, because I have many projects that execute scripts, I will follow the second one.