Poc

Jenkinsfile

@@ -0,0 +1,15 @@
+pipeline {
+    agent any
+  stages {
+        stage('Build'){  
+            steps {
+                echo "Building the application"
+            }
+        }
+       stage('Testing') {
+            steps {
+                sh "npm i"
+            }
+        }
+  }
+}

cypress.json

@@ -0,0 +1,14 @@
+{
+    "chromeWebSecurity": false,
+    "$schema": "https://on.cypress.io/cypress.schema.json",
+    "projectId": "ioceso",
+    "experimentalStudio": true,
+    "screenshotOnRunFailure": true,
+    "reporter": "cypress-mochawesome-reporter",
+    "reporterOptions": {
+        "reportDir": "cypress/report",
+        "charts": true,
+        "reportPageTitle": "POC-Cypress",
+        "embeddedScreenshots": true
+      }
+}

cypress/fixtures/data-driven/sauceUsers.json

@@ -0,0 +1,29 @@
+[
+    {
+        "name": "should login to inventory page",
+        "username": "standard_user",
+        "password": "secret_sauce",
+        "expected": "Products"
+    },
+
+    {
+        "name": "should display incorrect username message",
+        "username": "incorrect_user",
+        "password": "secret_sauce",
+        "expected": "Epic sadface: Username and password do not match any user in this service"
+    },
+
+    {
+        "name": "should display incorrect password message",
+        "username": "standard_user",
+        "password": "incorrect_password",
+        "expected": "Epic sadface: Username and password do not match any user in this service"
+    },
+
+    {
+        "name": "should display locked out message",
+        "username": "locked_out_user",
+        "password": "secret_sauce",
+        "expected": "Epic sadface: Sorry, this user has been locked out."
+    }
+]

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/fixtures-demo/sauceCredentials.json

@@ -0,0 +1,7 @@
+{
+    "standardUsername": "standard_user",
+    "systemPassword": "secret_sauce",
+    "lockedUsername": "locked_out_user",
+    "dummyUsername": "dummy-test",
+    "dummyPassword": "dummy-password"
+}

cypress/fixtures/intercept/interceptFixture.json

@@ -0,0 +1,17 @@
+[
+  {
+    "title": "Cypress Assertions Video",
+    "completed": false,
+    "id": "1"
+  },
+  {
+    "title": "Page Object Model Cypress",
+    "completed": false,
+    "id": "2"
+  },
+  {
+    "title": "Intercept Cypress",
+    "completed": false,
+    "id": "3"
+  }
+]

cypress/fixtures/profile.json

@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "[email protected]"
+}

cypress/fixtures/read-users.json

@@ -0,0 +1,6 @@
+[
+  {
+    "email": "myUser",
+    "password": "myPassword"
+  }
+]

cypress/fixtures/read-write/read-write.json

@@ -0,0 +1,16 @@
+[
+  {
+    "email": "myUser",
+    "password": "myPassword"
+  },
+  {
+    "title": "test",
+    "completed": true,
+    "id": "1"
+  },
+  {
+    "title": "wash dishes",
+    "completed": false,
+    "id": "2"
+  }
+]

cypress/fixtures/read-writeusers.json

@@ -0,0 +1,6 @@
+[
+  {
+    "email": "myUser",
+    "password": "myPassword"
+  }
+]

cypress/fixtures/users.json

@@ -0,0 +1,6 @@
+[
+  {
+    "email": "myUser",
+    "password": "myPassword"
+  }
+]

cypress/integration/assertions/assert.spec.js

@@ -0,0 +1,63 @@
+//Assertions are the validation steps that determine whether the specified step of the automated test case succeeded or not. 
+// In actual, Assertions validates the desired state of your elements, objects, or application under test
+
+// Cypress bundles the popular Chai assertion library,
+// as well as helpful extensions for Sinon and jQuery, bringing you dozens of powerful assertions for free.
+// --- BDD & TDD Assertions
+
+
+describe('Assertion Demo', () => {
+
+    beforeEach(() => {
+        cy.visit('https://demoqa.com/radio-button')
+    });
+
+    it('TDD Assertions', () => {
+
+        cy.log('-- Length Check');
+        cy.get('input[type="radio"]').should('have.length', 3);
+
+        cy.log('-- Class Check');
+        cy.get('input[type="radio"]').eq(2).should('have.class', 'disabled');
+
+        //Negative Assertions
+        // We recommend using negative assertions to verify that a specific condition
+        // is no longer present after the application performs an action. For example, 
+        // when a previously completed item is unchecked, we might verify that a CSS class is removed.
+        cy.log('-- Exist Check')
+        cy.get('.mt-3').should('not.exist')
+
+        //Multiple Assertions
+        cy.log('-- Text Check');
+        cy.get('input[type="radio"]').eq(0).click({force: true});
+        cy.get('.mt-3')
+        .should('have.text', 'You have selected Yes')
+        .and('include.text', 'Yes')
+        .and('not.contain', 'Test Word')
+
+        cy.log('-- CSS check');
+        cy.get('.text-success').should('have.css', 'color', 'rgb(40, 167, 69)')
+
+    });
+
+    it('BDD Assertions', () => {
+
+        //Should call back & Multiple assertions
+        cy.log('-- Length & Class Check')
+        cy.get('input[type="radio"]').should($element => {
+            expect($element).to.have.lengthOf(3)
+            expect($element).to.have.class('disabled')
+        })
+
+        cy.log('-- Text Check');
+        cy.get('input[type="radio"]').eq(0).click({force: true});
+        cy.get('.mt-3').should($element => {
+            expect($element).to.have.text('You have selected Yes')
+            expect($element).to.include.text('Yes')
+            expect($element).to.not.include.text('No')
+        })
+
+
+    });
+
+});

cypress/integration/commands/commands.spec.js

@@ -0,0 +1,30 @@
+  // Cypress comes with its own API for creating custom commands
+    // and overwriting existing commands. The built in Cypress commands
+    // use the very same API that's defined below.
+
+    //First step is creating a new command file under /support/commands.js
+    //Why there? since it is loaded before any test files are evaluated via
+    //an import statement in your supportFile (cypress/support/index.js by default).
+
+
+    describe('Commands Example', function(){
+
+        beforeEach(function(){
+            cy.visit('https://www.saucedemo.com/')
+
+        })
+
+        it('Success Login Test', function(){
+            cy.typeLogin('standard_user','secret_sauce')
+            cy.get('.title').should('contain.text', 'Products')
+            cy.logout();
+            cy.url().should('eq', 'https://www.saucedemo.com/')
+        })
+
+        it('Failed Login Test', function(){
+            cy.typeLogin('standard_user', 'DummyPassword');
+            cy.get('.error').should('contain.text','Epic sadface: Username and password do not match any user in this service');
+        })
+
+
+    })

cypress/integration/cypress-studio-test/studio-demo.spec.js

@@ -0,0 +1,22 @@
+/* === Test Created with Cypress Studio === */
+it('Web-tables-demo', function() {
+  /* ==== Generated with Cypress Studio ==== */
+  cy.visit('https://demoqa.com/webtables');
+  cy.get('#addNewRecordButton').click();
+  cy.get('#firstName').clear();
+  cy.get('#firstName').type('Joan');
+  cy.get('#lastName').clear();
+  cy.get('#lastName').type('Test');
+  cy.get('#userEmail').clear();
+  cy.get('#userEmail').type('[email protected]');
+  cy.get('#age').clear();
+  cy.get('#age').type('50');
+  cy.get('#salary').clear();
+  cy.get('#salary').type('5000');
+  cy.get('#department').clear();
+  cy.get('#department').type('Sales');
+  /* ==== End Cypress Studio ==== */
+  /* ==== Generated with Cypress Studio ==== */
+  cy.get('#submit').click();
+  /* ==== End Cypress Studio ==== */
+});

cypress/integration/data-driven/json-iteration.spec.js

@@ -0,0 +1,28 @@
+//Data Driven Testing using data from a JSON file.
+
+const tests = require('../../fixtures/data-driven/sauceUsers.json');
+
+describe('Data Driven Test reading data from a JSON file', function(){
+
+    beforeEach(function(){
+        cy.visit('https://www.saucedemo.com/');
+    });
+
+    tests.forEach(test => {
+
+        it(test.name, function(){
+
+            cy.get('[data-test="username"]').type(test.username);
+            cy.get('[data-test="password"]').type(test.password);
+            cy.get('[data-test="login-button"]').click();
+
+            if(test.name === 'Standard User'){
+                cy.get('.title').should('contain.text', test.expected);
+            }else{
+                cy.get('[data-test="error"]').should('contain.text', test.expected);    
+            }
+
+        });
+
+    });
+});

cypress/integration/fixture-demo/fixtures.spec.js

@@ -0,0 +1,42 @@
+describe('Fixtures Demo',  function(){
+    beforeEach(function(){
+        cy.visit('https://www.saucedemo.com/');
+
+        cy.fixture('fixtures-demo/sauceCredentials')
+        .then(credentials => {
+            this.credentials = credentials;
+        })
+    });
+
+    it('Standard User', function(){
+        cy.get('[data-test="username"]').type(this.credentials.standardUsername);
+        cy.get('[data-test="password"]').type(this.credentials.systemPassword);
+        cy.get('[data-test="login-button"]').click();
+
+        cy.get('.title').should('contain.text', 'Products')
+    });
+
+    it('Incorrect Username', function(){
+        cy.get('[data-test="username"]').type(this.credentials.dummyUsername);
+        cy.get('[data-test="password"]').type(this.credentials.systemPassword);
+        cy.get('[data-test="login-button"]').click();
+
+        cy.get('[data-test="error"]').should('contain.text', 'Epic sadface: Username and password do not match any user in this service')
+    });
+
+    it('Incorrect Password', function(){
+        cy.get('[data-test="username"]').type(this.credentials.standardUsername);
+        cy.get('[data-test="password"]').type(this.credentials.dummyPassword);
+        cy.get('[data-test="login-button"]').click();
+
+        cy.get('[data-test="error"]').should('contain.text', 'Epic sadface: Username and password do not match any user in this service')
+    });
+
+    it('Incorrect Password', function(){
+        cy.get('[data-test="username"]').type(this.credentials.lockedUsername);
+        cy.get('[data-test="password"]').type(this.credentials.systemPassword);
+        cy.get('[data-test="login-button"]').click();
+
+        cy.get('[data-test="error"]').should('contain.text', 'Epic sadface: Sorry, this user has been locked out.')
+    });
+})

cypress/integration/intercept/mockApi.js

@@ -0,0 +1,53 @@
+
+//Mock API responses may be useful during development and testing when live data is either unavailable or unreliable.
+// While designing an API, you can use mock APIs to work concurrently on the front and back-end, as well as to gather feedback from developers. 
+
+//Website REPO: https://github.com/filiphric/testing-lists
+
+describe('Intercept Demo', () => {
+
+    it('Intitial Validation', () => {
+        cy.visit('http://localhost:3000/')
+        cy.get('#todo-list li')
+        .should('have.length', 2)
+        .and('contain', 'test')
+        .and('contain', 'wash dishes')
+    });
+
+    it('Mocked API Response', ()=> {
+
+        cy.intercept('GET', '/todos', {
+            fixture: 'intercept/interceptFixture.json'
+        }).as('getTodos-Fixture')
+
+        cy.visit('http://localhost:3000/')
+
+        cy.get('#todo-list li')
+        .should('have.length', 3)
+        .and('contain', 'Cypress Assertions Video')
+        .and('contain', 'Page Object Model Cypress')
+        .and('contain', 'Intercept Cypress')
+
+    })
+
+    it('Mocked a ready todo item', () => {
+
+        const stubExample = [{
+            "title": "Mock API Response", 
+            "completed": true, 
+            "id":1
+        }]
+
+        cy.intercept('GET', '/todos', {
+            body: stubExample
+        })
+
+        cy.visit('http://localhost:3000/')
+
+        cy.get('div label').should('have.css', 'text-decoration', 'line-through solid rgb(217, 217, 217)')
+
+    });
+
+
+
+});