AET

Suite Generator

Client side application that can be used for generating suite.xml files used in AET testing. The app is written using React + Redux.

WARNING: Currently the app doesn't work on Edge/IE and Safari

Development environment

To run the app locally you need:

• Node.js with npm package manager
• Webpack installed globally: npm i webpack -g

Running web application locally

1. Navigate to app's main directory.
2. Run npm i to install required npm modules.
3. To start the app run npm start

Known bugs

1. URL name parameter is being ignored.
2. App doesn't work on Edge/IE and Safari due to usage of File constructor. Potentially Blob can be used as fallback

How to set up Dockerised version (WIP)

1. Install Docker Windows version - docker install guide. Ommit this step if already installed.
2. Navigate to app's main workspace folder.
3. Run docker-compose up -d --build

Please remember that the Suite Generator is based on and uses limited features of the AET solution made by Cognifide. For further info, please read the AET Wiki.

User Guide

Please read the short description on how to use the basic features of the generator.

Test suite setup.

1. After the tool is successfully built (using Docker), in order to use it, open localhost:3000 in web browser.
2. On first run of the Suite Generator tool, user is asked to fill out the test suite information:
3. Hit SUBMIT button.
4. The page is built around 3 sections:
   • Left side panel containing all available instructions from the AET features library.
   • Main section with current test where the instructions will be drag & dropped.
   • Right side panel where the list of created test cases for the test suite are listed. Also, it holds the buttons to Load Suite, Download Suite and Run Suite.

5. Explanation of the main section structure:

   • Collect This tag contains list of collectors and modifiers which will be run. It specifies what pages' data should be collected and it allows for some data modification before collection step. All collect steps are processed in defined order. Following elements are available in collect element:

     • Open
     • Collectors
     • Modifiers

   • Compare This tag contains list of Comparators. Screen comparator takes collected screenshot of the page or just part of it and runs it against comparator.

   • URLs element lists all urls which will be processed within the current test. It contains one or more url elements.

How to create a working test.

All instructions can be dragged & dropped from the left-side panel to the main section.

During dragging the components, generator will mark the places those instructions can be placed. After it’s dropped we can: open wiki page with description of the component, edit its parameters or delete it:

Let’s create a simple test as a presentation of the tool features.

1. In Collectors section you need to add Open parameter, which is not editable.
2. The Cookie instruction (from Modifiers) is used when we need to close an overlay (like newsletter popup or legal disclaimer) before we take the screenshot. It uses parameters like: action, Cookie Name or Cookie Value. Each site can use different parameters so please use it carefully.
3. Next modifier we need to use is WaitForPageLoaded. As the name states - it will wait until the page is fully loaded.
4. We need to tell the runner to set the proper viewport. We use Resolution modifier for that.
5. Now it’s time to use Screen collector which holds the following parameters: screen Name, XPath/CSS selectors (used when we want to take a screenshot of a specific component on the page), Timeout (how long will the runner wait for specified selector to be available before it takes a screenshot) or Exclude Elements (this will tell the runner which specified components are to be ignored by screen comparator).
6. Next step is to add Screen comparator - type should be set to layout. We can also set thresholds: pixel or percentage type - this will tell the runner how many differences (in pixels or in screen percentage) are acceptable.
7. Last thing to add here is the URL - we can add here the path to the tested page.
8. Now the only thing left to do is to hit Run Suite button - overlay with progress and further options will appear: We can either close the overlay or show the report - let’s use the latter - you will be redirected to AET report.

IMPORTANT: AdBlock needs to be disabled in order to display the report.

9. After the Run Suite link is clicked - AET report will open:

Exemplary test.

<?xml version="1.0" encoding="utf-8"?>
<suite name="TestSuite" company="Cognifide" domain="https://agency-starterkit.unileversolutions.com/us/en" project="ShipIT">
  <test name="PDP">
    <collect>
      <modify-cookie action="add" cookie-name="__ric" cookie-value="true" cookie-domain=".unileversolutions.com"/>
      <open/>
      <wait-for-page-loaded/>
      <scroll css=".bv-content-container"/>
      <resolution width="1920" height="1080"/>
      <screen name="PDP" css="" timeout="15000" exclude-elements=".olapic.component.section.initialized"/>
    </collect>
    <compare>
      <screen comparator="layout" percentageThreshold="0.5"/>
    </compare>
    <urls>
      <url href="/products/skin-care/protect/flex-hand-balm--shoppable-.html"/>
    </urls>
  </test>
  <test name="SignUp">
    <collect>
      <modify-cookie action="add" cookie-name="__ric" cookie-value="true" cookie-domain=".unileversolutions.com"/>
      <open/>
      <wait-for-page-loaded/>
      <click css=".formButton>div>button" timeout="15000"/>
      <resolution width="1920" height="3500"/>
      <screen name="test2" css="#content"/>
    </collect>
    <compare>
      <screen comparator="layout" percentageThreshold="0.5"/>
    </compare>
    <urls>
      <url href="/sign-up.html"/>
    </urls>
  </test>
</suite>