JS Steps
  • 23 Oct 2024
  • 3 Minutes to read
  • Contributors
  • Dark
    Light

JS Steps

  • Dark
    Light

Article summary

We like to say that we are a no-code solution. However, that does not mean that you can’t code! You can cover a broad spectrum of testing natively within Autify, but some of our clients have more advanced testing needs and want to go beyond Autify’s native capabilities; In those instances, clients can utilize JavaScript to greatly expand the scope of their testing.

What is a JS Step?

[JS Step] is a function that allows you to execute JavaScript within Autify’s [Scenario].
This function enables capabilities that are unsupported by Autify’s standard functions.

Given its powerful nature, we have provided a detailed explanation below.
After the section on how to use this function, you will find specific use cases in the latter part of this article. We hope they are useful!

JS step will fail when a page is reloaded

This failure happens because the page reload destroys the current execution context, leading to the loss of the JS step execution context.

How to Add a JS Step in Your Scenario

  1. Go to the Scenario Details Page where you want to add the JS Step

  2. Move the cursor in between the steps where you want to add the JS Step
    inset-js-step.png

  3. Click the + icon and and select Insert Step. Select JS Step from the menu that appears.
    Screen Shot 2022-07-21 at 18.22.07.png

  4. Type your JavaScript code in the text editor. The code will already be wrapped in a function, so no need to include that syntax.
    Screen Shot 2022-06-13 at 5.56.28 PM.png

  5. You can optionally name your JS Step, as well as include a Memo, such as a description of what is happening on this particular step
    Screen Shot 2022-06-13 at 6.07.15 PM.png

  6. Click Save

Use a value obtained or generated in a JS Step in other steps

In [JS Step], you can obtain information from elements displayed on the page or generate values. return allows you to use this information in subsequent steps. The actual return value can be seen on the test result.

return-value-en

If you have not return in JS step, this value will be null.

not-return-en

Only strings and numbers can be used in subsequent steps.

Used in the operation and assertion step

  1. In the Scenario Details Page, click on the step you wish to insert the return value in
  2. In the Text to assign dropdown, select Other step's result and select the desired JS Step whose data you wish to insert
    js-step-text-to-asign.png

Use as Arguments of a JS Step

Values returned by a JS step can be used as arguments for other JS steps. Details are explained in the section "Using Arguments in JS Step" below.

Using Arguments in a JS Step

  1. Click on the thumbnail of the JS Step, which you want to pass in an argument for.

  2. Click on the + icon within the parenthesis of the function
    js-step-adding-arguments.png

  3. Enter the name of your argument and click Add
    js-step-arg-name.png

  4. In the Argument Values, select the type of value you'd like to pass in

    • Given value allows you to hardcode in a string
    • Test email address allows you to select a pre-created test email address
    • Data allows you to select the columns of data in the scenario
    • Other step's result allows you to pass in the return value of a previous JS Step or Dynamic Value
    • Variable allows you to select the key set in the Import variables
      en-js-argument-value.png
JS Step arguments are defined as String

Even if you assign a numerical value to an argument in the UI, it is defined as a String in the code.
You need to explicitly convert it to a Number if you want to use it in calculations. For instance, you can declare it with Number().

  1. To delete or rename an argument that has already been added, click on the target argument and make the necessary edits
    rename-arg.png

JavaScript Snippets

For your convenience, we have compiled dozens of the most commonly used JS code snippets when testing with Autify; You can find a link to our JS Snippets here.

How to use JavaScript Snippets

  1. Add a JS step to the scenario

  2. In the Autify JS Snippet database, select the snippet you wish to use
    Screen Shot 2022-06-21 at 5.39.07 PM.png

  3. Copy the JS snippet by hovering over it and clicking the "copy" icon on the top right corner of the snippet
    Screen Shot 2022-06-21 at 5.40.44 PM.png

  4. Paste the snippet into your JS Step and make the necessary changes to the code to suit your test
    Screen Shot 2022-06-21 at 5.44.10 PM.png

JS Steps Use Cases

There are many different ways you can use JS Steps to test with Autify. Here are some example use cases:

  • API calls
  • Handling cookies
  • Custom assertions

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.