This topic is aimed at adding a very basic HostSurfer Screen Rule to identify the "BlueCard Login" screen.
To navigate to this screen from the first one, just press the <Enter> key.
The following screen is the "Blue Card" screen:
As you can see, the ruleSelected event has been triggered with a null argument, indicating there are no rules with a 'match' criteria that satisfies the current screen.
In order to make HostSurfer identify a screen, we must:
| • | Create a screen rule containing a 'match' property with a text pattern to be found on the screen. |
| • | Register the rule in the HostSurfer instance. |
Example:
hs.register(
{
id: "bluecardLogin",
match: [{text: "USERNAME", row: 19, col: 55}]
}
);
Please note that the rule object contains only two properties: 'id' and 'match'. The 'match' property sets the criteria on which screens will be compared to.
As we have set the 'match' property to search for the literal string 'USERNAME' at row 19 and column 55, the rule criteria will be met by the screen depicted in the previous image.
The following JSFiddle example allows you test the example code:
The web browser will display the contents depicted below, after running the example application and pressing the <Enter> key in the first screen:
Please note that when the second screen is displayed, 'Rule selected' plus the 'id' of the matching rule is written to the "log". Additionally, as expected, the rule handler writes the text 'This is the BlueCard Login Screen' in the log.
In order to extend the current example, we'll add a new screen rule to identify the next screen (the 'Main Menu' screen) and display an identifying text on the log.
The following JSFiddle example allows you test the example code:
The HostSurfer application flow can now be described as follows:
When the terminal-based demo application shows the first screen, pressing the <Enter> key causes a navigation to the "Blue Card Login", as well as a text indication below it.
Pressing <Enter> key again, causes the application to go to the next screen (which is the one titled 'Main Menu'), because this screen layout satisfies 'bluecardMainMenu' rule 'match' property. This rule is now selected.
As a result, the web page now shows 'This is the Main Menu' text indication as the last message in the log.
The browser windows contents are represented in the following image:
