Actions are individual steps that a user would take within your application to perform a certain task.
An action is comprised of an event, value (optional) and selector.
An event can be one of: click, type, hover or select and the value can be anything you want.
The selector is the CSS selector of the element you want to target, eg. #signin-btn or .content h2
You can add as many actions as you like in any order in the test editor.
A simple action flow would look like:
Type [email protected] into
Type password into
Ensuring that your test executes successfully will require some thought about how to structure your actions.
Avoid using generic markup in your application like a list of inputs all using a bare <input> tag. While this will work for a real user, Firelab needs to be able to target a unique element on your page, so using a selector like <input> could result in the value being added to multiple input fields.
Instead, use attributes to uniquely identify your elements, like this:
<input type='password' name='password' />
This will enable you to use a specific selector in Firelab to target this input. Your Firelab selector is then:
CSS class modules should be avoided as these will change every time your application builds, so future tests may fail when the class name changes.
Instead, use a combination of HTML attributes, IDs, pseudo selectors or static CSS class names. You can combine these in nested selectors just like you would in a CSS stylesheet. If you want to be safe and create a robust testing environment, give test elements a unique ID within your application so targeting them with Firelab is easy and reliable. For example, use:
<button class='button_module_x64Y7w' />
Always ensure you specify all the actions required to trigger the desired response from your application.
For example, don't forget to create an action to click the submit button on your form or your test will time out if the form is never submitted.