Houston I have a problem

Action Step Commands

Follow

The StillAlive Script Editor has many types of steps that you can use to navigate, perform actions and check things on your website.

The commands are broken down into three main categories, navigation, action and validation. This docuemnt explains the different type of Action Commands you can use to get StillAlive doing something on your website such as fill in a form, follow a link, click a button or the like.

There are seven available action steps;

When I follow "LINK NAME, ID OR TEXT"( within "CSS#SELECTOR")

The most common action on a website is following a link. This allows StillAlive
to navigate around your website just like a user would. For example:

When I go to http://example.com/
And I follow "login"
Then I should see "Please enter your username and password"

Sometimes your wbsite will have more than one link of the same name, to handle
this StillAlive does two things. First, it will select the first match it finds and
secondly, it allows you to specify a CSS selector to narrow which link it follows.

For example:

When I go to http://example.com/
And I follow "login" within "div#LoginBox"
Then I should see "Please enter your username and password"

Will follow the login link that is in the CSS selector div#LoginBox

Sometimes you will have a link that has no text, ID or class name. You might even have
several of these in a list, something like:

<div id="products">
  <a href="/product1.html"><img src="image1.jpg" /></a>
  <a href="/product2.html"><img src="image2.jpg" /></a>
  <a href="/product3.html"><img src="image3.jpg" /></a>
</div>

If you wanted to follow the second link on the page within the div#products group,
you could write the following script:

When I follow "div#links a:eq(2)"
Then I should be on "/products2.html"

Note with the :eq() CSS pseudo operator, you should not that any CSS list starts
start at 1, not 0. If you wanted to follow the last link in that list you could
do:

When I follow "div#links a:last"
Then I should be on "/products3.html"

When I press "BUTTON NAME, ID OR TEXT"( within "CSS#SELECTOR")

This is used to be able to submit a form or click a button element on your website. It is very similar to the follow link step except that it operates on HTML button or input[type=submit] elements. For example, if you had the HTML:

When I go to http://example.com/login/
And I fill in "username" with "my-name"
And I press "Log in"
Then I should see "Please enter your password to log in"

Again, like the follow link step, you can optionally provide a CSS selector to choose which button you want to press.

Some websites use buttons instead of HTML links. And these buttons can be just an image. To follow these, use the same method as the follow link step by specifying a clear CSS selector and leaving out the link name for example given the HTML:

<form action='/login_page.html'>
  <input type='submit' />
</form>

You could use the step:

When I press "form input:first"
Then I should be on "/login_page.html"

When I fill in "FIELD NAME OR ID" with "TEXT VALUE"( within "CSS#SELECTOR")

When ever you have a form for the user to fill out and you need to input some value into text or text area fields, this is the step you should use. Again, it behaves like the previous steps allowing you to enter data into a form field. For example, if you had a form that looks like this:

<form id="main" action='http://127.0.0.1:59150/'>
  <label for='given_name'>Name</label>
  <input type='text' name='given_name' value='Given Name' class='textField'>
  <input type='text' name='family_name' value='Family Name' class='textField'>
  <input type="submit" value="Submit" />
</form>

You could use the steps:

When I fill in "Given Name" with "Mikel"
And I fill in "family_name" with "Lindsaar"

To put in your first and last name. Note that the first step is using the label text and the second is using the actual name of the input element.

As with other elements, you can narrow your selection using CSS selectors.

When I select "VALUE" from "FIELD NAME OR ID"( within "CSS#SELECTOR")

Choosing an item from a select list is another common action in a form. To do this with StillAlive, you can use this step. If you had the HTML of:

<form id="main" action='select.html'>
  <label for='select_box'>Test Select</label>
  <select name='select_box' id='select_box'>
    <option value='1' selected='selected'>Option 1</option>
    <option value='2'>Option 2</option>
  </select>
</form>

Then you could use the following steps to select the second option:

When I go to http://example.com/signup/
And I select "Option 2" from "Test Select"
And I press "Sign up"
Then I should see "Thank you for selecting Option 2"

Like the other selectors, you can use the name, id or label of the select box and narrow your search with CSS selectors.

When I check "FIELD NAME OR ID"( within "CSS#SELECTOR")

StillAlive can check a form's checkbox by using this step. The checkbox needs to be declared by label name or ID, for example if you had the HTML of:

<form action='/submit.html'>
  <label for="receive_email">Receive email offers</label>
  <input type='checkbox' id="receive_email" name='receive_email'>
  <input type='submit' value='Sign up' />
</form>

Then you could use these steps to check the checkbox:

When I go to http://example.com/signup/
And I check "Receive email offers"
And I press "Sign up"
Then I should see "Thank you for signing up, we won't send you spam emails!"

Again, you can use CSS selectors to narrow your search.

When I uncheck "FIELD NAME OR ID"( within "CSS#SELECTOR")

This step allows you to uncheck a checked checkbox element. The checkbox needs to be declared by label name or ID, for example if you had the HTML of:

<form action='/submit.html'>
  <label for="receive_email">Receive email offers</label>
  <input type='checkbox' name='receive_email' id='receive_email' checked='checked'>
  <input type='submit' value='Sign up' />
</form>

Then you could use these steps to uncheck the checkbox:

When I go to http://example.com/signup/
And I uncheck "Receive email offers"
And I press "Sign up"
Then I should see "Thank you for signing up, we won't send you spam emails!"

Again, you can use CSS selectors to narrow your search.

When I choose "FIELD NAME OR ID"( within "CSS#SELECTOR")

This step allows you to choose a radio button out of a list of radio buttons. For example if you had the HTML of:

<form id="main" action='some_place.html'>
  <label for='field_basic_plan'>Basic Plan</label>
  <input type='radio' name='plan' id='field_basic_plan' value='basic' checked='checked'>
  <label for='field_advanced_plan'>Advanced Plan</label>
  <input type='radio' name='plan' id='field_advanced_plan' value='advanced'>
</form>

Then you could use steps like:

When I go to http://example.com/signup/
And I choose "Advanced Plan"
And I press "Sign up"
Then I should see "Thank you for signing up to the Advanced Plan"

Radio button HTML elements can only have one choice per set. So if you choose one element in the step and then choose a different element, the first one will be unselected.

Again, using CSS selectors can narrow your search

Was this article helpful?
0 out of 0 found this helpful

Comments