Creating an Object Repository

Continuing from what we have created in Getting Started section, we will try to improve the tests by adding an object repository to manage the page objects.

What is an Object repository

It's a CSV (Comma Separated Value) file with a specific structure. You can find a sample empty (sample.csv) object repository inside the "<project_root>/repository/" folder. You can have any number of object repositories within the "repository" folder. System will automatically read them and create the object repository at the run time. Any duplicate objects will be ignored.

In a complex project, it's recommended to break down your object repository into multiple files to ensure you organize your page objects in a logical manner that suites your current context.

Structure of a Objet Repository CSV file

As mentioned in the previous section you can have any number of repository .csv files within the "repository" folder. The only condition is that All the files have to adhere to a specific structure. As shown in the "sample.csv", the structure is: elementKey,selectionMethod,value

• elementKey - Is an unique identifier for the page object you are creating. Selecting a meaningful phrase here will greatly improve test readability (Ex: "Google Main Search Text Box", "Search Button", "Second Result Element")
• selectionMethod - This specify what method is used to identify the page object within the DOM. At present the following methods are supported.
  • id - UI element is identified by using its Id property
  • css - UI element is identified by using its CSS class
  • xpath - UI element is identified by using its xpath
  • model - UI element is identified by using its Angular model name
  • binding - UI element is identified by Angular binding
• value - Value that is associated with the method of selection (i.e. element "id" value or xpath value)

now, let's modify our google cats and dogs search to use a object repository.

Creating an Object repository for Google Search example

Step 1: Rename sample.csv to google.repo.csv

Navigate to "<project_root>/repository/" folder and issue the following command

mv sample.csv google.repo.csv

Step 2: Replace the content of google.repo.csv file with the following

elementKey,selectionMethod,value
"Google Main Search Text Box","id","lst-ib"
"Search Button","id","_fZl"
"Second Result Element","xpath","//*[@id='rso']/div[1]/div/div[2]/div/div/h3/a"

• Note that I've defined 3 page objects which we will be using within our tests

Step 3: Modify the sample.feature file to use the simplified grammar

CodeSpecJS provide a set of simplified grammar to be used with a object repository. The simplified grammar set improves the readability of the tests and decouple the feature specification from the object definitions. I.e. in case an xpath or id value of an page object changes, we only have to modify the object repository.

navigate to "<project_root>/features" folder and modify the "sample.feature" so that it looks like below

Feature: As a user I want to test google search so that I can search for cats and dogs
    Scenario: Search google for cats
        Given Navigate to "http://www.google.com"
        And Wait for "Google Main Search Text Box" to appear
        Then I enter "Cats" to the "Google Main Search Text Box"
        And Click on "Search Button"
        And Wait for "Second Result Element" to contain text "Cats Protection"
         
    Scenario: Search google for Dogs
        Given Navigate to "http://www.google.com"
        And Wait for "Google Main Search Text Box" to appear
        Then I enter "Dogs" to the "Google Main Search Text Box"
        And Click on "Search Button"
        And Wait for "Second Result Element" to contain text "Complete Guide to Caring for Dogs | Dog Breed Information, Dog ..."

Save the file, and run the tests by issuing the following command in at the <project_root>

npm run tests

Summary

• Object repositories are just csv files with a definition of page objects that we are going to use within our tests
• Once we define a page object in an object repository, we can directly use the simplified CodeSpecJS Grammar to specify a test
• you can have any number of csv files within the "repository" folder. All of them should adhere to the same defined structure.