Test Actions
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
If your UI requires you to hover over an element to reveal something you want to click on, you will need to create a hover action before your click action.
A simple action flow would look like:
- 1.Type [email protected] into
input[name=email] - 2.Type password into
input[name=password] - 3.Click
input[type=submit]
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:
input[name=password]Use the inspector in your browser to identify elements easily.
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.
For optimal performance, add a data-firelab attribute to HTML elements you want to interact with. This will ensure your tests work even after making changes to your code structure.
<button data-firelab='btn-sign-in' />
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 id='btn-upgrade'>Instead of:
<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.
Last modified 2yr ago