UI-Test with QUnit, JQuery and an iframe - how to wait until new page is loaded?

Question

I am using QUnit and JQuery and want to test user interface of my website. My webapp resides in an iframe. I want to click on a navigation-Link, then wait until the new page is loaded and then I want to select a few items via JQuery to make sure that the correct page was loaded. How to achieve this? I read about setTimeout(), delay(), ajaxSetup(), setInterval(), up to now: no success. Here is a code snippet: ``` // Klick auf Unternehmen und vergleiche h1-Ueberschrift. test("Klick Unternehmen, checke Ueberschrift", function() { var mes = "test: Klick Unternehmen, checke Ueberschrift;"; var exp = "Unternehmen"; jQuery.ajaxSetup({ async: false }); //turn off async so tests will wait for ajax results jQuery('#testframe').attr('src', './../index/unternehmen/').delay(3000); var t = setTimeout('doNothing()', 2000); //alert('now'); var act = jQuery('h1').eq(1); //var act = "Unternehmen"; //console.log(mes); equal(act, exp, mes); }); ``` UPDATE: I was able to call the ressource by ajax. Anyway…

Accepted Answer

You should try

```
$("#yourIframeID").load(function(){
    //do your testing stuff here..

})
```

There's also a way for async testing in `QUnit`, but I'm nor sure it applies to your case (`asyncTest( name, expected, test )`)

UI-Test with QUnit, JQuery and an iframe - how to wait until new page is loaded?

Solution

Problem