Putting delay until next page is loaded fully in Selenium IDE

Question

I am trying to automate a test case using selenium IDE. I have installed this add-on on firefox. I am trying to login using admin/admin credentials in one of the websites and after that it takes couple of seconds to load the next page fully.

<tr>
    <td>type</td>
    <td>id=username</td>
    <td>admin</td>
</tr>
<tr>
    <td>type</td>
    <td>id=password</td>
    <td>admin</td>
</tr>
<tr>
    <td>click</td>
    <td>css=button.btn</td>
    <td></td>
</tr>
<tr>
    <td>waitForPageToLoad</td>
    <td>30000</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=span.ncs-tree-nav</td>
    <td></td>
</tr>

waitForPageToLoad is not working, ideally it should wait for 30 seconds but as soon as login button gets clicked, test case throws error as it is not able to find next element on the page.

Here is the output from IDE :-

[info] Executing: |open | /login.html | |
[info] Executing: |type | id=username | admin |
[info] Executing: |type | id=password | admin |
[info] Executing: |click | css=button.btn | |
[info] Executing: |waitForPageToLoad | 30000 | |
[info] Executing: |click | css=span.ncs-tree-nav | |
[error] Element css=span.ncs-tree-nav not found 

As soon as login is done, it moved for searching expected navigation and error came. It will be helpful if someone can point out if I missed something.

Answer 1

A pragmatic approach,

If you have some visual condition that gets true just when the page is loaded, you can look for that. Say that the text "Welcome User" gets displayed in a span with id=content somewhere when the page is loaded, you can replace your waitForPageToLoad with

<tr>
  <td>waitForText</td>
  <td>id=content</td>
  <td>Welcome*</td>
</tr>

Possibly you can even be as blunt as

<tr>
  <td>waitForText</td>
  <td>//body</td>
  <td>*Welcome*</td>
</tr>

though I haven't tested the latter myself.

Answer 2

If your page reloads after clicking, you have to use clickAndWait instead of click:

<tr>
    <td>clickAndWait</td>
    <td>css=button.btn</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=span.ncs-tree-nav</td>
    <td></td>
</tr>

If the page does not reload, upper code won't work. In this case wait for a presence of an element that you are going to use on the next step:

<tr>
    <td>click</td>
    <td>css=button.btn</td>
    <td></td>
</tr>
<tr>
    <td>waitForElementPresent</td>
    <td>css=span.ncs-tree-nav</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=span.ncs-tree-nav</td>
    <td></td>
</tr>