Getting Started

Welcome to the CodeSpecJS wiki!

Step 1: Setting up the development environment

1. You need to install NodeJs with NPM . You'll also need to install and configure Git .
2. Latest version of Chrome

Step 2: Clone the project

git clone https://github.com/99xt/CodeSpecJS.git

Step 3: Install node packages

Step inside the project root folder and issue the following command to install node dependencies.

npm install

Step 4: Let's start writing our first UI Automation test

Under the "features" folder create a new file called "sample.feature". copy and paste the specification given 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" with the "id" of "lst-ib" to appear
        Then I enter "Cats" to the "Google Main Search Text Box"
        And Click on "Search Button" with the "id" of "_fZl"
        And Wait for "Second Result Element" with the "xpath" of "//*[@id='rso']/div[1]/div/div[2]/div/div/h3/a" 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 ..."

• The first scenario "Search google for cats" is using what we call the CodeSpecJS Detailed Grammar (Ex: And Wait for "Google Main Search Text Box" with the "id" of "lst-ib" to appear). Here, we are instructing CodeSpecJS to look for an UI element in the DOM model with an "id" value of "lst-ib" and to add it to the system object repository with a unique identifier "Google Main Search Text Box".
• Once we specify a page object using the detailed grammar, we can refer to it directly using the element key (or the unique identifier) for all the future tests.
• Note that detailed grammar is only necessary if you don't specify the page objects using an object repository. Click here to know more about how to create object repositories.
• This is a standard Cucumber feature specification file.
• We are using CodeSpecJS pre-defined grammar to write the test above. A full set of Supported grammar with detail description can be found here

Thats it, you are now ready to run the test. Note that we haven't written any code We just used a set of well defined Gherkin grammar to specify what we want to do. Please refer to Supported Grammar to a full set of grammar you can use in your tests.

Step 5: Running the test

Inside the project root folder, issue the following command

npm run test

Note that first time execution may take few minutes since system need to download browser drivers and configure them You should see your test executed in Chrome browser, Results will be shown in your console log. A detailed HTML report is generated under <project_root>/results/reports. Open the html report and see the detailed results.