Experience Sitecore !

Just have released a new version of Onero. So, what's new?

• Re-worked UI - removed buttons from main screen in favour of main menu
• Introduced Testing (settings) profiles - now settings, rules, forms etc. are individual for a profile
• Created a base for future multiple browser supports (not only FF like now), currently on testing
  
• Multiple bug fixes and minor improvements

Introduction

In this blog post I am going to demonstrate how you can test any custom website with Onero Page Runner. For our experiment I've decided to pick up Transport for London website located at https://tfl.gov.uk. 

1. Creating a profile for a new website
2. Populating Pages to process from a XML sitemap file
3. Configuring Rules
4. Configuring Forms
5. Running and getting the results

1. Creating a profile for a new website

Onero configuration is based on testing profile. Using profiles it now becomes possible to create a combination of settings, rules and forms unique for for each individual profile and immediately switch between them just by selecting a profiles from a drop-down on a Settings dialog. Usually you would create a profile for one (or few) websites you would like to test with these settings. For our test we'll create a profile called Transport for London. 

Once created, the new profile immediately becomes active. You may change active profile by selecting a profile name from a drop-down as on a image below:

2. Populating Pages to process from a XML sitemap file

On the next step we are going to load the list of pages to be tested. It can be also manually pasted into Page to process textbox, but we prefer to load links automatically from a XML sitemap file. Usually it is called sitemap.xml and is placed at the root of website. TFL website has such a file, and as soon as you specify address of that file into Load from xml sitemap textbox and hit Load Links button, Onero will process request and extract list of all the rages out of it. Sitemap file https://tfl.gov.uk/sitemap.xml references 1,374 pages and all they pre-populate the list, as per screenshot below. Also, as you may see, current profile name is displayed at реу window header.

3. Configuring Rules

Despite is was already possible to run all the pages at the previous step, we now are going to add additional checks to ensure page is correct apart from it just loads correctly. This can be achieved through adding custom verification rules applicable to a specific (or all) pages. Clicking Rules button on the main window brings you the following dialog with all rules (for the current profile) listed.

Check-box on a screenshot below indicates whether a rule is enabled - only enabled rules are executed. [ALL] / [Incl] indicate a scope of rule execution - this is explained below.

This screenshot shows three rules and all they are enabled. The first one has [ALL] execution scope and thus will be executed on every single page; [Incl] for the second and third means that there are certain conditions that specify where exactly these rules are to be executed. Let's now create and configure these rules.

Rule in fact is a JavaScript code that returns a boolean or integer value. Rules is successful when condition clause returns boolean true or integer more than zero. For example you may return amount of elements satisfying some selector, so if more than one found - rule becomes successful. 

For websites that are run with jQuery you may benefit from writing conditions with its powerful selectors, as shown on screenshots below.

First two rules just return is amounts of element found are more than zero. The last rule return more complex combined condition, that checks if an element with specific id presents on a page and then compares the content of that element with expected message.

Please pay attention to Execution scope dropdown box - the one specifies where the rule will be executes. Three options are:

• Everywhere - runs on every single page
• Include - runs only on the pages from URL patterns field below
• Exclude - runs on all the pages except those satisfying URL patterns field below

URL patterns to match store one oк multiple (comma separated) URL substrings to match. If URL has at least one of these patterns as a substring, Onero will run the rule for that page then. 

Please pay attention to a trailing '$'-dollar sign at the en of second and third patters; '$' means end of string. Thus a pattern https://tfl.gov.uk$ will match only landing page with this URL but does not match https://tfl.gov.uk/about. However, if you remove this trailing dollar sign - it will match all the pages on that domain name (because they all contain that URL pattern as a substring).

You can also delete any existing rules from that screen.

4. Configuring Forms

Similar to the rules, forms have their Forms List window, called by clicking Forms button at the main screen. It looks and functions exactly in the same manner. Double-clicking the form name opens it for edit.

Saying "forms" in his context means ability of Onero to find and populate on specific pages, submit them and analyze the results - whether form submission was successful. The last means that if form submission resulted with a confirmation message on a page - Onero is able to address that message and also check if its content matches expected. Alternatively, if form on a page redirects to a confirmation page, Onero can verify that as well and compare with expected redirect URL pattern.

Forms Editor has three logical sections: General (where to submit), Fields (what to submit) and Result match (how to verify).

URL Pattern works same as in rues - matching substring in URL will enable Onero to find and submit a form on that page.

Fields section set fields to find and populate. Field selectors have same syntax as CSS oк jQuery selectors - if it starts with # then it is ID of element, . specified class name, and omitting starting character will prompt Onero that it's an element tag name. In the last case Onero will ask you to confirm that behavior is desired, as it is less frequently used and very likely to be a mistakenly forgotten '#'or '.'

5. Running and getting the results

Onero updates the links with green / red color depending on results, as it processes them. There is also a progress-bar at the right bottom showing overall progress. 

Double clicking green or red link opens Page results for that specific URL, showing also which rules and forms have been executed on that page and their result codes. This is quite handy for cases when you see a URL turning red and would want to find out why exactly it becomes failed. The screenshots below show Page results for first three pages. You would probably notice different rules executed of each of them - that happens because of conditional URL pattern set previously at step (3).

Previewing results immediately is not the only way of inspecting results. At the end of testing process Onero generated report file with all the statistics for that test run. You may find that in reports.csv file located at Results folder within a folder with current settings profile name (Transport for London in our case). The quickest way to access this folder is to click Settings button from main screen and then Open folder button - it will open resulting folder in a separate Explorer window.

1. Enable Item's WebAPI
2. Creating pages in Sitecore and forms
3. Configuring Onero
4. Running and getting the results

Sitecore Web API requires to be explicitly enabled on your Sitecore instance. If you haven't done this yet, enable it at Sitecore.ItemWebApi.config file. You will end up having something similar to below:

        StandardSecurity
        Read
        false

In order to test if Web API works - just paste http://your.host.name/-/item/v1/ into browser and you will get a response:

{"statusCode":401,"error":{"message":"Access to site is not granted."}}

No worries about error message - it is just telling that no anonymous access allowed to you Web API endpoint, which itself is working well and just served this request. Simply changing itemwebapi.allowanonymousaccess to true will return you valid response with data.

Once you paste this list link into Onero and hit Load Links button - you have everything ready o start the test.

When you click Load Links button, Onero calls Item Web API in Sitecore instance and populates Pages to process box with preview links out of the response. At the moment only items in preview mode are available.

More information about item Web API can be found in the official documentation.

Now let's go into Sitecore Content Editor and prepare for more complex testing. I have got a clean Sitecore 8.1 just installed instance here. I use Experience Editor to create 2 web forms on Home page (of course, WFFM for Sitecore 8 should be installed as well)

To make things even simpler, let's take two pre-existing forms coming with WFFM package and set first form to display Success Message while the second to redirect to Success Page. Also create a confirmation page located at /Home/thanks to be referenced by Success Page mode and do not forget to publish website to bring these forms and pages into web database. If everything was done correct at this step, page will look something similar to below:

Now we want to test forms submission to ensure they function correctly. In Onero hit Forms button, then Add New. It will open Forms Editor where you need to set fields and values to submit the form with, also find and assign submit button and finally specify the results so that Onero can verify whether the page has been submitted correctly.

Also do not forget to check. If you want to delete or modify a form - double click its name.

.

Clicking each or already processed URL opens Page results dialog, where all the rules and forms being executed on that specific page are listed:

Double clicking a rule or form opens its editor so it is quite convenient to preview and analyze what went wrong:

At the end of testing process Onero generated report file with all the statistics for that test run. You may find that in reports.csv file located at Results folder within a folder with current settings profile name (Transport for London in our case). The quickest way to access this folder is to click Settings button from main screen and then Open folder button - it will open resulting folder in a separate Explorer window,

First column shows pages being executed, the second - rules and forms run on that specific pages with corresponding statuses at third column. Addons statuses column shows overall status for rules and forms executed and Page Status column shows the statuses for the page itself. They may not match, for example the page has loaded correctly and has Successful Page status, while one of its rules broke resulting Addons status to fail. Time to load shows time in milliseconds taken for page to load, rules and form are not mentioned in that figure.

Hope this guide was helpful enough!