Cypress End to End Testing

Hi!! friends in this blog we are going to see the end to end testing framework cypress

Cypress

Cypress is a end to end testing framework for the web applications. It allows our developers and testers to write and run tests in a browser, it simulate the user interactions and verify the behaviour of the web applications

Cypress Studio

Cypress studio recordings is the way to create test scripts without creating the manual coding

Cypress Installation:

npm install cypress --save-dev

Experimental Studio

• Open the ‘cypress.json’ file in the text editor
• Add configuration inside the cypress.json file adding a new key-value pair

{
  "experimentalStudio":true
}

Once if we made this configuration changes in the cypress.json file the experimental studio feature will be enabled in the cypress

Selectors Hub:

Selectors Hub is a CSS Selector plugin it is a smart editor to write the CSS selector and it can be autogenerate

Example:

describe('template spec', () => {
  it('test', function() {
    cy.visit('XXX'); // Visiting the link
    cy.wait(2000)
  //Login to your application
    cy.get('#username').type('XYZ');
    cy.get('#password').type('xyz');
    cy.wait(2000)
    cy.get('.btn').click({force:true});
  //Selecting the particular
    cy.get('#ag-75-input').check();
    cy.get('.ag-body-viewport input.ag-checkbox-input')
  //Confirming the po
    cy.get('.d-sm-inline').click({force:true});
    cy.get('#confirmQty').clear().type('1');
    cy.get('.ng-input').click();
    cy.get(".ng-dropdown-panel-items .ng-option:nth-child(2)").click() 
    cy.get('.d-sm-inline').click({force:true});
  //Navigating to confirmed po tab
    cy.get('.mt-3 > .nav > :nth-child(2) > .nav-link').click();
    cy.get('.input-group > .form-control').clear('2');
    cy.get('.input-group > .form-control').type('2239');
    cy.wait(5000)
  //Selecting the Confirmed Po
    cy.get('.ag-cell-wrapper').click({force:true});
    cy.get('.d-sm-inline').click();
    cy.get('#Date').type('2023-10-20') // Selecting date 
    cy.get('.ng-input').click({force:true});
    cy.get('.ng-dropdown-panel-items .ng-option:nth-child(2)').click();
    cy.get('#Contact number').type('9876543210');
    cy.get('#xyz').type('Tester'); 
    cy.get('#abc').type('Tester');
    cy.get('#Date').type('2023-07-14');
  //Create & Confirm the Shipment
    cy.get('.d-sm-inline').click();
  //Returnable material Screen
    cy.get('.btn-danger').click();
    cy.get(':nth-child(5) > .nav-item > .nav-link').click({force:true});
  //Profile and Logout
    cy.get('.cursor-pointer').click();
  });
});

Notes:

cy.get(selector) — method is user to interact with the elements on a web page

Using the CSS Selector

cy.get(‘.my-class’) // Selects elements with class “my-class”

cy.get(‘#my-id’) // Selects an element with ID “my-id”

cy.get(‘button’) // Selects all <button> elements

cy.get(‘[data-testid=”my-test-id”]’) // Selects elements with a specific data-testid attribute value

cy.get(‘.my-button’).click() // Clicks on an element with class “my-button”

cy.get(‘#my-input’).type(‘Hello, Cypress!’) // Types text into an input element

cy.get(‘.my-element’).should(‘be.visible’) // Asserts that an element is visible

cy.visit(): Loads a web page by visiting its URL.

cy.visit(‘https://example.com') //Visiting the URL page

cy.click()- Triggers a click event on the selected element.

cy.get(‘.my-button’).click()

cy.type()- Enters text into an input field.

cy.get(‘#my-input’).type(‘Hello, world!’)

cy.should()- Makes assertions about the selected element’s state

cy.get(‘.my-element’).should(‘be.visible’) // Asserts that an element is visible

cy.get(‘.my-element’).should(‘have.text’, ‘Hello’) // Asserts that an element has specific text

cy.contains(): Selects an element containing specific text.

cy.contains(‘Submit’).click() // Finds an element containing the text “Submit” and clicks on it

cy.wait() — Pauses test execution for a specified duration.

cy.wait(2000) // Waits for 2 seconds

Thank You!!!