A Front-End Web Developer’s Guide to Testing/

...

/

Cypress Proficiency: Studio, Plugins, and API Testing

Cypress Proficiency: Studio, Plugins, and API Testing

Learn about low-code GUI testing in Cypress, plugins like Cucumber for BDD, and built-in API testing using the cy.request method.

We'll cover the following...

Cypress Studio

Similar to component testing, Cypress Studio is under development. This capability is evolving and is aimed at providing a low-code option for front-end developers and SDETs. It comes with a recorded GUI-based test that automatically generates JavaScript test specs.

To use this feature, it needs to be enabled within the cypress.config.js file. Simply include the following line in that file: 

{
    "experimentalStudio": true
}
Enabling Cypress Studio

Cypress Studio supports the .click(), .type(), .check(), .uncheck(), and .select() commands. 

const { defineConfig } = require("cypress");

module.exports = defineConfig({
    e2e: {
      experimentalStudio: true
    },
});
Cypress tests for creating Todo items via POST requests on Docket API

  • Line 5: We instruct Cypress to visit the URL https://www.saucedemo.com/.

  • Line 6: lear the input field with the data-test attribute value of username.

  • Line 7: We simulate typing standard_user into the input field with the data-test attribute value of ...