Tips on using JS Steps

One of the advantages of Autify is that you can use it without coding, but if something cannot be verified using Autify's features, you may be able to verify it using a JS Step.
On this page, you will find examples of when to use JS Steps and some useful tips.

Introduction

When should you use JS Steps?

You can use JS Steps for actions that cannnot be recorded using the Autify Recorder or for complex verifications.
For example, a JS Step is an effective solution in the following situations:

• Verify the absence of a specific element (other than a string)
• Validate the style of an element
• Run an external API in a scenario

However, it can be challenging to know what you can and can't do with a JS Step until you get used to it.
If you are unsure if something can be verified using Autify's features or if a JS Step is appropriate, please contact our support team.

How to use JS Steps

Please read the following article to learn more about JS Step's functionality and how to add them to your test scenarios:
JS Step

Prerequisites

To try the methods described on this page, you'll need to be able to get CSS selectors using tools such as Chrome's Developer Tools.
If you do not know how to get CSS selectors, please read the following document first:
How to get CSS selectors
Using CSS selectors effectively

Examples of using JS Steps

To illustrate how you can use JS Steps, we will show you a test that uses a JavaScript snippet provided by Autify.
*The following examples assume that you have already created a test scenario. If you have not done so, please record a new scenario before proceeding.

1. Click element

If you cannot click an element for some reason, you can use a JS Step to do so.
For example, let's try using a JS Step to click on the "Request a Demo" button on Autify's homepage.

1. Get a CSS selector.
First, we need to get the selector of the element we want to click.
In this example, we've used Chrome's Developer Tools to get the selector.

The selector for this example was:

#requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button

2. Add a JS Step.
Add a JS Step to the appropriate location.

3. Add the snippet code for "click element" to the JS Step.
Copy the snippet code for click element and paste it to the JS Step you created in step 2.

4. Edit the content of the JS snippet.
In this snippet, there's a section that says <TODO: REPLACE SELECTOR>. Rewrite this section as follows:

"#requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button"

Once you save the scenario, you can check that the action written in the JS Step is performed by using Local Replay or by running the scenario.
In this example, we know that the "Request Demo" button was clicked as intended because errors have appeared in the required fields.

2. Use data of an element in another step

2-1. Use data of an element as an input value in another step

You can get data of an element and use it as an input value in other steps.
This is useful in situations where a unique number of displayed data (e.g., application number) is used to search for data.
In this example, we will get the text of the "Ready to Autify your web app testing?" element using a JS Step and use it as an input value for the "Last Name" field.

1. Get the CSS selector of the element from which you want to get the data
As with the first example, I have used Chrome's Developer Tools to get the CSS selector.

In this case, the selector I got was:

#requestdemo > div > h3

2. Add a JS step.
Add a JS Step that gets the element's text.

3. Add the snippet code of "get text content" to the JS Step
Copy the snippet code of Get text content and paste it into the JS step you created in step 2.

4. Edit the content of the JS snippet.
In this snippet, there's a section that says <TODO: REPLACE SELECTOR>. Rewrite this section as follows:

"#requestdemo > div > h3"

5. Record a step that enters the value to the appropriate element.
*The input value can be any value - we will changed it later.

6. Open the edit screen of the step you added in step 5 and specify that the input value should be the value from the JS Step.
Select "Other step's result" in the Input Value section, and specify the JS Step to which you added the "Get text content" snippet.

After saving the scenario, you can check that the action written in the JS Step was performed by using Local Reply or running the scenario:

2-2. Use an element's data as an expected value in another step

You can get an element's data and use it as an expected value in other steps.
This is useful when you want to get a unique number of displayed data (e.g., membership number) and check that it exists on the screen on another step (e.g., page after login).
In this example, we will add a step to the scenario used in section 2-1 to check if the correct value was entered.

1. Add an assertion that validates the value of the target element.
In the scenario we used in section 2-1, add an assertion that checks the value in "Last Name".

2. Open the edit screen of the step you added in 1 and specify the expected value as the one from the JS Step.
In the expected value section, select "Other step's result" and specify the JS Step to which you added the "Get text content" snippet.

After saving the scenario, you can check that the action written in the JS Step is performed by running the scenario:

3. Request API using a JS Step

The JS Step can also be used to send a request to an API.
This is useful if you want to get information from an API or call the API within a scenario.
In this example, we will add a JS Step that executes an API that returns "Hello Autify!" when you send a GET request.

1. Add a JS Step.
Add a JS Step to the appropriate location.

2. Write the code for the "Send GET / POST request synchronously" snippet into the JS Step.

Since we will be using a GET request, please use the "Send GET request to a URL" snippet which can be found in Send GET / POST request synchronously.

3. Change the URL
Rewrite the following part of the snippet so that it's appropriate for the API you're using:

var url = "API URL";

After saving the scenario and using Local Replay or running the scenario, the result from the GET request is output to the browser log:

※Note that the provided JS snippet assumes that the response is in JSON format. Depending on the API response format, the JS Snippet may need to be modified.

Other ways to use JS Step

Debugging JS Step

There are several ways to debug JS Steps. In addition to running the actual scenario and using Local Reply, you can also use Chrome's Developer Tools to debug.
You can easily test the contents of the JS Step you have created, so please try it out.
For example, to test the behavior of the JS snippet we used in "1. Click element" using Chrome's Developer Tools, follow the steps below:

1. Open the page to be tested.
First, open the target page where the JS Step will be executed.
You can do this manually or by using Local Replay.

2. Launch Chrome Developer Tools.
In the example below, Developer Tools is launched by clicking the kebab menu (︙) in the top right corner of Chrome.

3. Open the Console tab.
In the Developer Tools, open the Console tab.

4. Execute the source code of the JS Step in the Console tab.
Execute the source code of the JS snippet in the Console tab.

5. Check that the element was clicked.
We can see that the "Request Demo" button was clicked as intended, because there are input errors in the required fields.

If you have any questions about using JS Steps, please contact our support.