Welcome to our demonstration of Transaction Scripting using the Catchpoint UI.
For this demonstration, we'll be using the Transaction Test Type and building a script from scratch. Let's step through the user journey we'll be emulating with our test script for this example.
First we will navigate to www.catchpoint.com. Next we will click on the link "eBooks, Papers, Reports". We will then search for an ebook and click on the first search result. Lastly, we will fill out the form and go to the downloads page.
To summarize the user journey in steps:
Step - 1 : Catchpoint Home page
Step - 2 : Ebooks page
Step - 3 : Form
Step - 4 : Download page
Let's go ahead and create our first transaction.
A transaction always begins with an open command.
// Step - 1
open("http://www.catchpoint.com/")
In addition to marking the beginning of a transaction test. The open commands tells the scripting engine to wait for the entire page to load. This is done by waiting for the document complete event to be fired on the page. After the page has loaded, the agent waits an additional two seconds to make sure everything is downloaded on the page.
There may be instances where even after the default wait time, requests are being made in the background. To make sure everything is fully downloaded and captured, we may need to specify additional wait time. This is one of the best practices suggested with transaction scripting. To specify additional wait time we use the waitForNoRequest() command.
waitForNoRequest("3000")
waitForNoRequest() takes in one parameter, the wait time. The wait time is specified in milliseconds and can take up to a maximum of 5000 milliseconds. This action tells the agent to wait for a specified amount of time for no HTTP requests on the network before continuing onto the next command.
Another best practice is to assign a name to the step using the setStepName() command.
setStepName("1 - Catchpoint Home page")
Setting step names helps us with understanding the flow of the transaction at a quick glance, and makes troubleshooting easier in case a transaction step fails.
For now, we will go ahead and run the transaction we have created so far, using the Chrome monitor, one node, and capturing screenshots and headers.
Let's take a look at the test results.
For this run, we see one of the requests exceeded the allowed file size. To drill further and locate the request with the high downloaded bytes, we can sort the request by its file size.
We can see here there was one request which was a video file (.webm) that was more than 8 MB. This caused the test run to fail. We will go ahead and block this video (and the video fallback request) to continue with our demonstration.
To block requests, expand the requests section and add a custom header. Choose request block and as this is a child host, choose child host and provide the URL.
Let's go ahead and script the remaining transaction. The second step begins with the clickAndWait() command.
// Step - 2
clickAndWait("//a[contains(text(),'eBooks, Papers, Reports')]")
This command takes one parameter and that is the xpath. This specifies which element to click on. In this scenario, it is an anchor tag that contains the text "ebooks, papers, and reports". After clicking on this element, the agent will wait until the entire page is loaded. Once it is done it will move on executing the next command.
Next we will add waitForNoRequest() as a best practice to make sure that we finish downloading any pending requests after Document Complete. Finally we set a name for this step.
waitForNoRequest("3000")
setStepName("2 - Ebooks page")
Now let's do the same in the browser as well. We will open the Catchpoint site and click on the ebooks link. This takes us to the ebooks page. Now we have a text box and we need to type in value so let's do this together.
As we type, Catchpoint provides a list of supported commands to choose from. For this particular scenario to type in input we can choose type() or typeKeys() command. The type() command will take in the provided value and then append it to the html source attribute value for that particular element. typeKeys() will do the same but will also trigger all the keyboard events, like keyDown, keyPress and keyUp. If there were any ajax calls to be made after inputting the value those will be triggered as we trigger all the keyboard events. for this I will be using typeKeys().
typeKeys() takes in two parameters. The locator which is the XPath, and the value itself.
To get the xpath of a particular element, we can use the browser development tools. First inspect the particular element, then right click on the element, then copy its xpath.
Once we have the xpath copied, simply place it within the command.
The second parameter is the value to be typed in.
typeKeys("//*[@id='q']", "http2")
On our next step we will click on the first search result, later fill in the form and then click the download now button on step 4.
// Step - 3
clickAndWait("//div[@class='image-div']")
To click on the first search result we use clickAndWait(). By using the XPath of the first search result, this will ensure we click the correct element and then wait for the entire page to load.
waitfornorequest(3000)
setStepName("3 - Form")
After this, we allow extra time to make sure everything on the page is downloaded. Then we set the step with a name.
If you notice, on the next page, we have a form to fill out. The first 4 are text boxes and we need to input a value.
To do this we will be using the type() command. Type takes in 2 parameters, first the xpath of the element, and then the value itself. You may get the xpath by inspecting the element, and going to the developer tools and copying the xpath itself.
type("//*[@id='FirstName']", "Test")
type("//*[@id='LastName']", "test")
type("//*[@id='Email']", "catchpointtest@catchpoint.com")
type("//*[@id='Company']", "catchpoint")
The same can be done for clickAndWait() commands as well.
At the bottom of the form, we have a drop down where you can select one value from. To accomplish this, we will be using the select() command.
select("//*[@id='Title']", "label=DevOps")
select("//*[@id='Industry']", "label=eCommerce")
select("//*[@id='Industry']", "label=SaaS")
select("//*[@id='State']", "label=NY")
The **select() **command takes in 2 parameters. First the xpath that will point the element we are referring to and the second part which is the option we are referring to.
If you take a look at the HTML select element. We can use different options to point the value we are referring to.
The label would be the text within the option. We can also use value, or the index value of all the options in the label here. So the agent will choose one of the available options.
//Step 4
clickAndWait("//button[@class='mktoButton']")
waitForNoRequest(3000)
setStepName("4 - Download page")
Next we will click the the "Download now" button, wait for no requests and set the step name accordingly.
Another command to notice is the assert() command. This helps us to validate that the correct page has loaded.
For this demonstration, we will be using **asserttextpresent() **command and looking for the text DOWNLOAD EBOOK.
assertTextPresent("DOWNLOAD EBOOK")
If the text is present after the page is loaded, the test run will be marked as successful. Otherwise, if the text cannot be found, the test run will fail.
Now we have completed our transaction script, and can schedule it to run repeatedly for ongoing monitoring of our users' experience of this particular journey. (See full script below).
The full script:
// Step - 1
open("http://www.catchpoint.com/")
waitForNoRequest("3000")
setStepName("1 - Catchpoint Home page")
// Step - 2
clickAndWait("//a\[contains(text(),'eBooks, Papers, Reports')\]")
waitForNoRequest("3000")
typeKeys("//\*\[@id='q'\]", "http2")
setStepName("2 - Ebooks page")
// Step - 3
clickAndWait("//div\[@class='image-div'\]")
waitForNoRequest("3000")
type("//\*\[@id='FirstName'\]", "Test")
type("//\*\[@id='LastName'\]", "test")
type("//\*\[@id='Email'\]", "catchpointtest@catchpoint.com")
type("//\*\[@id='Company'\]", "catchpoint")
select("//\*\[@id='Title'\]", "label=DevOps")
select("//\*\[@id='Industry'\]", "label=eCommerce")
select("//\*\[@id='Industry'\]", "label=SaaS")
select("//\*\[@id='State'\]", "label=NY")
setStepName("3 - Form")
//Step 4
clickAndWait("//button\[@class='mktoButton'\]")
waitForNoRequest("3000")
assertTextPresent("DOWNLOAD EBOOK")
setStepName("4 - Download page")
With request block to the following 2 video files:
https://daks2k3a4ib2z.cloudfront.net/56cb8c11ec643036133277f5/56e8218a06aad4f413f7ef67_cpbackground-transcode.webm
https://daks2k3a4ib2z.cloudfront.net/56cb8c11ec643036133277f5/56e8218a06aad4f413f7ef67_cpbackground-transcode.mp4