# SeleniumIDE - Timing issue with dropdown

I am very new to the world of QA and selenium. I have been trying to create a number of tests to run and cannot seem to get the commands to work properly on one specific drop down. When I execute the commands individually I am able to get the command in question to input a value correctly and then move onto the next command. This has been fairly frustrating because an error will appear that states that the id I am specifying does not exist but when I execute the command by itself, it the value populates. Also the element ID does indeed exist in DOM.

The id in question is name=braintree_basic[cc_type].

I'm starting to think that there is a lag time with something loading.

Thanks.

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Test</title>
<body>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
<tr>
<td>open</td>
<td>http://chalkfly.com/</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=search</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=search</td>
<td>red pen</td>
</tr>
<tr>
<td>click</td>
<td>css=button.btn-cart.btn</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>xpath=(//button[@type='button'])[3]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=onepage-guest-register-button</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=billing:firstname</td>
<td>john</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:lastname</td>
<td>doe</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:email</td>
<td>joe@cool.com</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:street1</td>
<td>123 fake street</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:city</td>
<td>detroit</td>
</tr>
<tr>
<td>select</td>
<td>id=billing:region_id</td>
<td>label=Michigan</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:postcode</td>
<td>48348</td>
</tr>
<tr>
<td>type</td>
<td>id=billing:telephone</td>
<td>248.123.3456</td>
</tr>
<tr>
<td>click</td>
<td>css=#billing-buttons-container &gt; button.button</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=#shipping-method-buttons-container &gt; button.button</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=cc_type_braintree_basic</td>
<td>label=Visa</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>name=form_submit</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=cc_number_braintree_basic</td>
<td>4111111111111111</td>
</tr>
<tr>
<td>select</td>
<td>id=cc_expiration_month_braintree_basic</td>
<td>label=03 - March</td>
</tr>
<tr>
<td>select</td>
<td>id=cc_expiration_year_braintree_basic</td>
<td>label=2016</td>
</tr>
<tr>
<td>type</td>
<td>id=cc_cvn_braintree_basic</td>
<td>123</td>
</tr>

</tbody></table>
</body>
</html>


It appears on your site that the credit card form is loaded asynchronously meaning it may not be there if you don't have some kind of wait command. In the IDE you can add a command waitForElement and put your dropdown element identifier (id=cc_type_braintree_basic) so that it will wait for the element to be rendered before it tries to interact with it. Running your test in the ide the issues seem to be with the

<tr>
<td>click</td>
<td>css=#billing-buttons-container &gt; button.button</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=#shipping-method-buttons-container &gt; button.button</td>
<td></td>
</tr>


By placing a WaitForElement between these like:

<tr>
<td>click</td>
<td>css=#billing-buttons-container &gt; button.button</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>id=shipnote-note</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=#shipping-method-buttons-container &gt; button.button</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>id=cc_type_braintree_basic</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=cc_type_braintree_basic</td>
<td>label=Visa</td>
</tr>


That seems to work for me. Also there's a quick hint for adding things like that when your recording your test, you can right click on an element you need to wait for then choose "Show All Available Commands". In the second to last group you'll find WaitForElementPresent which will add the step to your test.

When I work with Selenium and drop downs, it usually looks like the following:

<br/>

command: select<br/>
target: id=DropDownId
value: label=label_id or value=Values_name


You have a timing issue. this is very common. For folks just starting out and using the seleniumIDE I recommend you add a sleep ('pause' in the IDE) which will wait for the page to load up the state you are looking for before you check for the element.

This is a great quick short-term fix for a newbie using the seleniumIDE. Be aware however that as you advance your development skills, stop using the IDE and move to programming languages that a fixed sleep (also called an implicit wait) is a bad practice.

You will find over time that you add more and more time to allow for all the differences in devices and browsers that are out there. In doing this your test suite gets slower and slower until it start to become a hindrance to your development rather than a help. Before you reach this point you should start using explicit waits which basically say 'keep checking for this condition (such as element being present) over and over for x many seconds and if-when it is satisfied, stop waiting, up to a maximum of x seconds.

btw if you stay with the seleniumIDE, this waiting strategy is actually available by using the waitForElementPresent that is available in the IDE