This article discusses "events" that occur in the process of loading a webpage. Its purpose is to help you develop test scripts that take advantage of these types of events.
Catchpoint also provides an "Events API" which allows you to post events from your change management or Devops system to Catchpoint. You can learn more about the Events API here.
What are events?
Events are things that happen during the process of loading a webpage (like finishing loading the page), or actions taken by the user (like clicking on a button).
Any event can have an event listener which will be triggered when that event occurs.
Where do we find events associated with an element of a webpage?
As an example, we'll look at the event listeners associated with the the search bar of the Google search page.
Right click on the element (Google Search Bar in the below example) and click on Inspect. Navigate to the Event Listeners tab as shown in the below screenshot.
How to make use of these events in our Scripts?
When you need your script to perform an action on an element, certain events must be triggered. For example, to input credit card details in a field, the focus event must first be triggered to select the field.
To find the list of events, follow this fire-event commands link.
Syntax to trigger an event in a Catchpoint script: fireEvent("xpath","event listener")
Example 1: Trigger change event on an element with the class as codeail:
fireEvent("//*[@class='codeail']", "change")
Example 2: We can also make use of runScript command to execute JavaScript and trigger custom events:
runscript( var element = document.getElementById("Identifier");
var evt = document.createEvent("HTMLEvents");
evt.initEvent("mouseover", false, true); element.dispatchEvent(evt);)
Note: Please replace the Identifier with the relevant id in the above code block, this will ensure that the event is triggered on the correct element.
You can also make use of document.getElementsByClassName() or document.getElementsByName() to select an element. The above example triggers mouseover event, we can change it to trigger any other event on the page.
Example 3: Simulate an enter/return key press using key codes.
runScriptAndWait("var event = document.createEvent("HTMLEvents");
event.initEvent("keypress", true, false); event.keyCode=13;")```
**Note**: The above code block can be changed to simulate any key based on the requirement.
**Example 4**: A sample script to demonstrate the difference between **type** and **typeKeys** command in regards to events:
// Step-1
open(https://docs.google.com/forms/d/e/1FAIpQLSd2b2M4H7ydQW8FTH1V401CebFpuUQLpCfzlB7-s9ONNRbqNA/viewform)
setStepName(Step1-Testing Fire Events)
waitForUrl(https://docs\.google\.com/forms/d/e/1FAIpQLSd2b2M4H7ydQW8FTH1V401CebFpuUQLpCfzlB7\-s9ONNRbqNA/viewform, 3000)
click(//*[@name="entry.1103447754" or @class="quantumWizTextinputPaperinputInput exportInput"])
type(//*[@name="entry.1103447754" or @class="quantumWizTextinputPaperinputInput exportInput"], hello)
click(//*[@class="freebirdFormviewerViewFormContentWrapper"])
In the above screenshot, we can see that the text is appended in the DOM with the type command. This does not trigger any events while typing the test in the input field. So the screenshot still shows the placeholder text.
A similar use case is when entering a credit card number, the site automatically chooses whether the card is Visa or MasterCard based on the input. Such use cases require certain events to be fired so that JavaScript functions will be invoked and execute code.
To fulfill such requirements, we will have to make use of certain events, for example: the "keyUp" event.
Catchpoint has a command called "Typekeys" which will simulate keystroke events on the specified element, as though you typed the value key-by-key. This is a convenient method for calling keyDown, keyUp, keyPress for every character in the specified string
// Step-1
open(https://docs.google.com/forms/d/e/1FAIpQLSd2b2M4H7ydQW8FTH1V401CebFpuUQLpCfzlB7-s9ONNRbqNA/viewform)
setStepName(Step1-Testing Fire Events)
waitForUrl(https://docs.google.com/forms/d/e/1FAIpQLSd2b2M4H7ydQW8FTH1V401CebFpuUQLpCfzlB7\-s9ONNRbqNA/viewform, 3000)
click(//*[@name="entry.1103447754" or @class="quantumWizTextinputPaperinputInput exportInput"])
typeKeys(//*[@name="entry.1103447754" or @class="quantumWizTextinputPaperinputInput exportInput"], hello)
click(//*[@class="freebirdFormviewerViewFormContentWrapper"])
To record a script in Edge browser, you can make use of our Catchpoint Script Recorder Extension.
Monitor Events
From the console itself, we can get the XPath of the element and Events that the input field or button has. Use the following commands to get the events in the console:
-Inspect an element (see screenshot). Now that it has been inspected, there is a $0 variable available in the console.
-you can just type this into the console:
monitorEvents($0, 'mouse')
Which, if you have the body selected in the Elements panel, is equivalent to typing:
monitorEvents(document.body, 'mouse')
