donrifad / seera_frontend_automation

Frame Work Setup

This automation framework is based on cypress and javascript

Mainly focused on ui web automation

Pre prerequisites

Install node https://nodejs.org/en/download/

node --version

Project Structure

├── Readme.md
├── cypress
|  ├── downloads
|  ├── e2e                          => All test cases come under here
|  |  └── seera_e2e_spec.cy.js
|  ├── fixtures                     => Test data related to testing
|  |  ├── bookingdata.json
|  |  └── localization.json
|  ├── screenshots                  => Auto generated folder for cypress reporting
|  |  └── login_spec.cy.js
|  ├── support                      => Plugins and reusable commmands
|  |  ├── commands.js
|  |  ├── e2e.js
|  |  ├── pageObjects               => Pages and it's identifiers
|  |  └── utils                     => Utils or helpers related to testing
|  └── videos                       => Auto generated cypress videos
|     └── login_spec.cy.js.mp4
├── cypress.config.js               => All configurations and related env's
├── mochawesome-report              => Custom reporter adittions to cypress reporting
└── package.json                    => Project dependencies and execution commands

Configurations
All configurations related to run time available on cypress.config.js
You can add your additional url's and enviroments here

env: {
    url: "https://almosafer.com/",
    lang: "arabic",
  },

Project set up
Clone the project from the repo

Open the project from the editor

Go to terminal and install all required dependencies using package.json

Most of the time editor will install the dependencies automatically

npm install

Execute the tests locally in cypress dashboard

• Navigate to root folder of your project
• Run the below command, It will open the cypress dashboard click the spec file it will run the file

npx cypress open

Execute the tests

• All good, after all dependancies are downloaded good to run the tests
• I have provided custom commands at paackage.json file,those commands readily available for use.These commands automatically generate a report on mochaawesome folder
  • Commands run on chrome with arabic language

    npm run chromeheadTestAR
    

  • Commands run on chrome with english language

     npm run chromeheadTestEN
    

  • Commands to run headless english and arabic

     npm run headlessTestAR
    

    npm run headlessTestEN
    

• Also you can refer to the package.json for different commands available
• Also you can build your own command eg below . Also visit https://docs.cypress.io/guides/guides/command-line#cypress-run

npx cypress run -b {browser} --headed --spec {your spec file} --env lang={language} --env url={url} --reporter mochawesome

View the results on cypress dash board

• Add your project id at cypress.config.js

  projectId: "a5zbka",

• Also add your project key at package.json file

    "recordDashBoardTest": "npm run test -- --record --key {provideyourkey} --reporter mochawesome",

• after that run the following command

npm run recordDashBoardTest

• After completing the execution login to your cypress dashboard and view the result https://dashboard.cypress.io/

Mocha reports

• This report will be availble at mochaawesome-report folder in your local execution node
• After completing the test run mocha awesome reports looks like below.