What is JS Step?

[JS Step] is a function that allows you to write JavaScript within Autify’s [Test scenario].
This function opens up various functions that are not possible with Autify’s standard functions.

You can see snippets here for frequently asked cases.

This is a powerful feature so we have provided a detailed explanation below.
After the section on how to use this function, there are specific use cases in the latter part of this article. We hope they are useful!

How to use: the basics

Add a [JS Step] to a [Test scenario]

1. Open the Scenario Details Page.
2. Move the mouse cursor between the steps where you want to add a [JS Step].
   
   
3. Click the + icon and select Insert [JS Step] from the menu.
   
   
4. Enter the JavaScript code.
   
   
5. Click Save.

Notes for use

• Hard tabs cannot be used. Please use space instead.
• If you plan to run it in the IE environment, please use / * comment * / for any comments. If you use // comment for comments, it will fail in IE.
  (There will be no problems in environments other than IE.)

• JavaScript code written in the JS step will be executed without any polyfill or transpile processing added. In relation to this background, warnings will be displayed for ES6 and later grammars, but you can use any grammar supported by the browser you are testing against.

• Template literals will not be used. If you want to put the value of a variable in a string, please use + to concatenate the strings.

• It is not possible to wait for asynchronous processing to complete or to retrieve the result. If you need to get a response before moving on, please use synchronous processing.

Use a value obtained or generated in [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.

Only strings and numbers can be used in subsequent steps.

1. return the values within [JS Step].
    
2. Select Other step's result in the Text to assign section in another step (the step must be after the [JS Step]).
   

This is supported in most operation steps and Assertion steps that use strings.
The main steps are the following:

• Operation step
• Input step
• URL transition step
• Assertion step
• Assertion for the page title
• Assertion for the page URL
• All text on the page

Using the [Argument function]

The value returned from [Data] and other [JS Steps] can be used within a [JS Step] by assigning it as an argument.

1. In the Scenario Details Page, click the thumbnail of the [JS Step] to which you want to add an argument. The step details will open.
2. Click the + icon next to function.
   
   
3. Enter the argument name and click Add.
   
   
4. [Argument values] pane is displayed after you add an argument, on the right side of the step details.
   
   
5. Given value allows you to directly enter a string.
   [Data] allows you to use the column in the scenario.
   Other step’s result allows you to use the value returned in a preceding [JS Step].
   The screenshot below shows what it looks like if you select [Data].
   
   
6. If you want to delete or rename a variable that has already been added, click the target variable.
   

Specific use cases

Generate a unique string in each execution

For example, when testing a flow such as user registration, using the same email address or user ID will result in a duplicate error. In these cases, you will want to generate a different value each time.

We recommend that you generate a random number or obtain a timestamp in the [JS Step] and return the value. Then, you can input this value in the registration form.

Related article:
    Can I use the current date and time, random numbers, etc. as variables?

Perform mouse operations such as right-click, double-click, and mouseover

Right-click and double click

In Autify, normal clicks (left clicks) during recording will be recorded as a click step. However, right clicks and double clicks are not yet supported as standard functions.

If right-clicking or double-clicking is required for testing, please use [JS Step].

Related snippets:
    Right-click snippet
    Double-click snippet

Mouseover

You can record mouseover by right-clicking on the element during recording and selecting [Add hover step]. Tests that involve clicking on the menu displayed by hovering the mouse are possible without using [JS Step].

However, if you want to perform text verification on the contents of the tooltip that is displayed only during mouseover, [JS Steps] will be needed. This is because the tooltip cannot be fixed while it is displayed, and it is difficult to add a verification step.

Related article:
    Mouseover snippet

Set and delete Cookies

Cookies may be used for switching display languages and A/B tests.
By using [JS Step], you can set the Cookie value as follows:

document.cookie = 'cookie_name=cookie_parameter';
document.cookie = 'lang=en'; /* Common language settings */

If you want to delete the cookies that have been set, it's possible with the following code:

document.cookie = 'cookie_name=; max-age=0';

Call APIs

You can call external APIs synchronously using this snippet.

Related snippet:

    XHR Post snippet

Make assertions using [JS Step]

If identifying the target element using standard Autify functions is not working correctly, or there is no verification command, it is possible to verify using a [JS Step]. If you add throw new Error ('error message') in the [JS Step], Autify can identify it as failed and the error message will be displayed on the test result screen as the error content.

The following section describes frequently asked cases where [JS Step] is currently required. We plan on adding these to Autify's standard functions in the future.

Click here for Autify’s standard assertion commands.

Check that a certain element is not found

There are several ways to check that a certain element is not found.

• If the target is a string, you can use the standard assertion command. Please click here for further information.
• If the target does not have a string, please use a [JS Step].
  
  • If you want to check that an element does not exist on a page
    

var selector = "<TODO: REPLACE SELECTOR>"; //Please replace
var element  = document.querySelector(selector);
if (element) {
    throw new Error('Error: There is an element that shouldn’t exist (' + selector + ').');
}

• • If you want to check that an element is not displayed on a page (the element exists in the invisible state)
    • Contents coming soon…

Perform various operations and verifications on the Nth element

For elements displayed as a list or tile, there are mainly two cases, depending on the test case:

1. If you always want to target the element of a specific string
2. If you want to target the element at a specific position such as "first" or "third from the left"

In most cases, the former can be handled by the standard functions click or adding verification commands. [JS Step] is needed for the latter.

Related article:

    What if I want to click on the Nth item in the list?

Other articles

• No scroll is recorded. Is it possible to scroll to a specific position?
• Is it possible to update (reload), back and forward the screen?