Documentation

Cypress Tailored Commands

Thank you for using this Cypress library. I hope you find it useful

  • Created: 23 November, 2023
  • Update: N/A

Installation

Follow the steps below to install and setup the repo on your local machine:

  1. Make sure you have NodeJS installed. Use node --version. Node v14 and above are preferred.
  2. If you have not yet installed Cypress use the following command npm i -D cypress.
  3. Install the package by running the following command: npm install cypress-tailored-commands
  4. Locate the commands.js file and import the library using the following import import 'cypress-tailored-commands'
  5. You can enable types by adding this line in your test files /// <reference types="cypress-tailored-commands"/>

Our Purpose

Our purpose is to introduce a new approach to project automation for the community, leveraging the power of Cypress.io. Our purpose is to ease the process of automation, ensuring that it becomes an accessible and engaging task for all team members. By adhering to best practices, we aim to not only facilitate workflows but also elevate the overall quality of our projects automation.

Who is this for?

This project is dedicated to every QA and developer that is interested in implementing automation with cypress within their projects. This framework seeks to facilitate the tests creation by providing pre developed commands that adjust to all components, making the test coding a seamless process to everyone

Custom Methods

Each method has been carefully crafted to provide the best experience when automating test cases or components. This will be very helpful to acheive complete automation even if you don't have experience.

cy.form()

This method was developed to simplify form automation. With the help of a specific configuration, entering text into a form field, selecting an option from a dropdown, or clicking on a checkbox can be done seamlessly. For a better understanding, please refer to the options provided below.

Supported Inputs:

Input Description Code Example
text Use this for text, password, and email inputs. Each input configuration must have the following params:
  • type
  • selector
  • data
 

cy.form([
    {
      type: 'text', 
      selector: '.parent_selector input[type=name]', 
      data: 'John Doe'
    },
    {
      type: 'email', 
      selector: '.parent_selector input[type=email]', 
      data: 'john@doe.com'
    },
    {
      type: 'password', 
      selector: '.parent_selector input[type=password]', 
      data: 'MyP4ssw0rd*.-!'
    },
  ]);
radio Use this for radio and checkbox. Each input configuration must have the following params:
  • type
  • selector
 

cy.form([
    {
      type: 'checkbox', 
      selector: '#terms_conditions'
    },
    {
      type: 'radio', 
      selector: '#gender_1', 
    }
  ]);
select Use this to choose an option from a list or a dropdown menu. This only supports <select> tags. If the menu has the <input> tag, check the dropdown option instead. Each input configuration must have the following params:
  • type
  • selector
  • option
 

cy.form([{type: 'select', selector: '#language]', option: 'Ruby'}]);
dropdown Use this to choose an option from a list or a dropdown menu. This only supports <input> tags. If the menu has the <select> tag, check the select option instead. Each input configuration must have the following params:
  • type
  • selector
  • option
 

cy.form([{type: 'dropdown', selector: '#age', option: '26'}]);
alert Use this to check if an alert message is visible and compare its text content with your own source. Each input configuration must have the following params:
  • type
  • selector
  • text
 

cy.form([
  {
    type: 'alert', 
    selector: '.email_error', 
    text: 'This email address is already registered.'
  }
  ]);
submit Use this to submit a form. Each input configuration must have the following params:
  • type
  • selector
  • url
  • onSubmit (optional)
Please note that onSumbit is a callback that receives a parameter containing the information of the request. By invoking this callback, you can access all the data retreived with the request. 

cy.form([
  {
    type: 'submit', 
    selector: 'button.submit',
    url: 'https://request-url.com/api' ,
    onSubmit: (xhr) => {
      // --> Here comes the logic of your function
      expect(xhr.response.statusCode).to.eq(200)
      // --> You can also log xhr to see what comes inside.
      console.log(xhr)
      
    }
  }
  ]);

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0.3 (27 Nov, 2023)

  • Added The new form method.