Please don't do this!
Dynamically generated IFRAMEs can complicate testing for the page.
Click on the Go buttons in the order they are numbered so that all frames turn green.
To my knowledge, there is no trivial way to write a Selenium script for this page without the use of complicated JavaScript evaluation. Using WebDriver may work too but with complex logic.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
| /* global $ */ | |
| $(function () { | |
| function loadFrames() { | |
| for (var j = 0; j < 4; j++) { | |
| // Frames may not be added in order | |
| setTimeout(addIframe, Math.random()*1000, j); | |
| } | |
| } | |
| function addIframe(i) { | |
| var frameSize = 80; | |
| var $frame = $('<iframe />') | |
| .width(frameSize) | |
| .height(frameSize); | |
| $(document.body).append($frame); | |
| $frame.css({ | |
| position: 'absolute', | |
| left : frameSize*i + 'px' | |
| }); | |
| // Simulate loading of this frame | |
| setTimeout(finishLoadingFrame, Math.random()*1000, $frame, i); | |
| } | |
| var frameReady = []; | |
| function finishLoadingFrame($frame, i) { | |
| var frameBody = $frame.get(0).contentWindow.document.body; | |
| var $button = $('<button id="go_' + i + '">GO ' + i + '</button>') | |
| .appendTo(frameBody); | |
| $button.on('click', function () { | |
| if (i === 0 || frameReady[i - 1]) { | |
| frameReady[i] = true; | |
| $(frameBody).css('background', 'green'); | |
| } else { | |
| $(frameBody).css('background', 'red'); | |
| } | |
| }); | |
| } | |
| loadFrames(); | |
| }); |