Test Designer IDE FAQ
-
How to go to back to the previous step if there is no back button present on the application
-
How to add an assertion to make sure that the button is disabled?
-
Flow Chart for most stable scripts on test designer even with dynamic accessors
-
Can we create a random unique value in this format 7a14b85cd07
-
Take HTML Screenshot takes screenshot of Linux with headless browsers?
How to remove all extra spacing between words
Engine1.replace(/ {1,}/g," ")
The g at the end of the Reg Exp means: global, i.e., match and replace all occurrences.
How to escape single quotes and double quotes in a string?
Ex: For the sentence, Helen said, "This is father's car!" to her brother., we can escape the double quotes and apostrophe in assertion as shown below:
assertExists('Helen said, "This is father\'s car!" to her brother.');
How to get the application URL
Suppose if you want to extract the url of the application. Below are the method to extract it.
_eval("window.location.href")
How to get the Firstday of the month
How to trim a string value from string?
For example: Need only " 14393430" from "Cart saved as Quote : 14393430" use below function:
var quote = eval(_lastAlert())
var quotenum=quote.substring(quote.indexOf(':') + 1)
How to retreive value between 2 characters
var mySubString = str.substring(str.lastIndexOf(":") + 1,str.lastIndexOf(";"));
You can use the above code to retrieve value between ":" and ";"
How to Fetch a row which has a particular Style
If the user wants to click a particular link for with Particular Style
Ex: if the user wants to click link which has Style = background-color:rgb(1,0,0)
Then user can use this in accessor column
cell("style==background-color:rgb(1,0,0)")
How to go to back to the previous step if there is no back button present on the application
To Confirm Browser popup in an Application use setConfirmResponse(true), and use eval(_lastConfirm()) to confirm that it clicked on the specific popup or not
How to add an assertion to make sure that the button is disabled?
Here is the HTML syntax: <button type="button" disabled>Add Comment</button>
Below is the usage in Test designer IDE
Working with console
When typing _ds. in console (in ds3 browser) it will list all the available elements and general APIs ... When typing _ds.pb. -- this will list all the actions used for the playback purposes ... So All the APIs available in ds3 browser's console is supported in Test Designer either as a direct actions in dropdown Action column of IDE or as a store variable usage of getText/getAttribute , etc or can be used in custom JS or _eval(). Explanations on how to use the console is below:
For some of the debugging purposes, you can make use of the console during recording and use them in test designer IDE or java scripting.
In the recording mode of the application, open the console of the browser from where the application is opened, make sure the recording is paused in IDE to make the debugging easier, or if you are playing back a script - use break points, or if you are using record from here option - pause once it reaches the step from where you want to record.
To debug any element (or accessor) on the page, default syntax is
_ds.linkfor links
_ds.span for span elements
_ds.div for div elements
and likewise...
Example:
To get the link on the page:
To get the link on the page based on relational accessors:
in
_ds.span("Products",_ds._in(_ds.link("/products")))
To use in script in Test designer: Make sure _ds. is removed before putting it into the test designer script IDE or JS scripting.
span("Products",_in(link("/products")))
near
_ds.span("Products",_ds._near(_ds.link("/products")))
_rightOf
_ds.cell("Tote",_ds._rightOf(_ds.strong("Type")))
_leftOf
_ds.strong("Type",_ds._leftOf(_ds.cell("Tote")))
_above
_ds.strong("Type",_ds._above(_ds.strong("Size")))
_below
_ds.strong("Size",_ds._below(_ds.strong("Type")))
For working with JQuery selectors inside the console, the standard formats of JQuery selectors are:
- # for id,
- .(dot) for class
can be used.
Also the complex JQuery selectors using parent child relationship can also be used in the console as below:
JQuery selector using Id notation:
ds$("#add-to-cart-button")
JQuery selector using class notation:
ds$(".btn.btn-success")
If there are multiple classes for the same element, each class has to be separated by a .(dot)
To work with Parent child accessors for the elements that does not have a class or an id to use:
- Right click any element
- Click Inspect
- Right Click the element in the console
- Copy
- Copy selector
ds$("#similar_items_by_taxon > li:nth-child(1) > a")
From the console, in terms of JQuery notations, you can work something like the below example:
$(document).height()
The same in Test Designer console page, we use ds$ as the $ notation like the below example:
ds$(document).height()
Both the above shall work fine from the console.
Now the same could be used in Test Designer IDE or in JS using EVAL API, below is the usage.
var data3 = _eval("ds$(document).height()");
In test designer IDE or JS, above mentioned JQuery notations using ds$ can be used as customJS or store it in Eval for future usages.
Fuzzy and Relational Accessor combinations:
Fuzzy locators can be used in console for debugging, Along with fuzzy, relational accessor can also be combined to come up with a more brittle accessors as well or however you want to frame them.
Example below:
Fuzzy alone:
_ds.strong(["Size"])
or Fuzzy in combination with a relational accessor:
_ds.strong(["Size"],_ds._below(_ds.strong("Type")))
In Test designer IDE below is how it is used:
strong(["Size"])
or
strong(["Size"],_below(strong("Type")))
How do I read JSON files as DPL
It is possible to read Json files just like the CSV files to data drive scripts in AppvanceIQ. Below example will show how a scenario is created in AppvanceIQ that reads data from the JSON file and is data driven by the designer script.
All the files can be downloaded from here.
This is done by a setup java script that reads the json file and puts the data in a DPL of type ScenarioWideDPL.
The setup java script looks like the below.
and have the following parameters:
1. json file path from which data will be read. This json file should have the following general format:
[
{ "variablename1":"value1", "variablename2":"value2" }
,
{ "variablename1":"value3", "variablename2":"value4" }
]
where each inside json object corresponds to one set of the data to be passed to a single test designer execution. So if just one set of data then only first inner json object is needed. But if many sets of data are required, can be added as well. In the test designer script the usage of the variables should add a "$" in front of the variable name, So for above json an example would be
AssertContainsText(textbox("data"), $variablename1);
2. URL of the AIQ service
3. Storage named used to create a scenarioWideDPL in resources section of scenario editor
4. Boolean value for verbose adding or reading of scenario wide DPL data
The scenario requires to setup a scenarioWideDPL in the resources section:
Sample working scenario and script is added in the above mentioned project link.
Also, *the java project is added as well *in case you need to modify the way the json is parsed.
Flow Chart for most stable scripts on test designer even with dynamic accessors
Also pdf version of the same can be downloaded from here
How to retrieve only number from a string ?
Suppose there is a pop up like below which has combination of text and Numbers and if we want to retrieve only Numbers
Then we can use the below code to fetch only Numbers
Store the content into a variable and apply replace(/[^0-9]/g, "") to the string and it will fetch only Numbers present in the string
Code Snippet:
Logs from DS3:
Validating string vs Int and the usage of parseint
Below example shows the usage:
Output Logs:
Why double click is not getting recorded in IDE.
Reference: https://api.jquery.com/dblclick/
“It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.”
In Test Designer, we bind event handlers to all the elements in DOM in General , so binding both double-click and click simultaneously for an element is not good.
Moreover we can add the time lag in click event and count the no of clicks done by user in order to invoke double-click but that will unnecessary burden the Test Designer as well as the performance.
how to get length (number of elements on the page)
Identify the element on the page for which you need to find the number of occurrence and use length along with eval as shown below.
Store VariableName _eval("ds$('.product-price').length") where ".product-price" is the accessor.
How to data drive an index inside an accessor in IDE?
Suppose there is a accessor in test designer with an index associated to it, how do I data drive using a csv sheet?
Entries - is the column name from the csv sheet.
Can we create a random unique value in this format 7a14b85cd07
Below is the JS script for the same.
function randomFormat() {
var alphaChars=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
var a1=alphaChars[Math.floor(Math.random() * alphaChars.length)];
var a2=alphaChars[Math.floor(Math.random() * alphaChars.length)];
var a3=alphaChars[Math.floor(Math.random() * alphaChars.length)];
var a4=alphaChars[Math.floor(Math.random() * alphaChars.length)];
log(a1);
var res=Math.floor(Math.random() * 10) + a1 + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + a2 +Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + a3 + a4 + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10);
log(res);
return res;
}
Below is how this could be called in Test Designer IDE.
Take HTML Screenshot takes screenshot of Linux with headless browsers?
takeHTMLSnapshot (takeScreenshot) test designer screenshots on failure leverage html2canvas library to render the browser's HTML into bitmap images, so it should work fine in headless browsers.
How to find XY Coordinates easily when it is required to find (say for example during drag and drop case)?
function alertMousePos(event) {
alert(
"X: " + event.clientX +
" - Y: " + event.clientY);
}
document.addEventListener("click", alertMousePos);
1. Copy and paste the above code in browser's console and press 'Enter' key.
2. Now click any place on the web page - An alert will get displayed with x and y values -- It gets the x,y coordinates of click of mouse pointer.
Note - Any console (Normal browser or test designer browser) should work, but advisable to do use Test Designer browser in maximized state.