Using Cypress Studio

Note: If you are referring to this article now, this for people with cypress version 10 or above studio has been removed and will be revisited later as quoted by the cypress team. However, this article references what we can do in the studio.

Cypress studio provides visuals of tests created within the cypress app by recording interactions against applications under test. .click(), .type(), .check(), .uncheck(), and .select() are crrently supported in the studio  and will generate test cod ebased n the interaction with DOM inside the studio. Assertions can be triggered by right-clicking on an element we need to perform.

 Studio:

Enable the studio recording use by adding this in your cypres.json file.

 {
  "experimentalStudio": true
}

We can also start with a preexisting test and begin doing the operation.
We will be using our traditional programsbuzz site.

1. Let us visit the site.
2. Go to search.
3. Type in cypress.
4. Click the first link.
5. Assert the title.

• Here is the studio. Let us open our studio.spec.js, a preexisting file where we have written only the visit command to navigate to the page.
• Let us launch cypress studio by clicking on the spec file.

• Click on get started.

• We can see the studio with the rec symbol lit on.

• As we manually test through, we can see that the commands are recorded on the left, and tests are automatically written in cypress.

• Once after doing our test cases click on the save command or copy the code to the clipboard.
• Let us copy-paste the command and check it our in vs code.

describe('Test',()=>{

    it('Studio Rec',()=>{

cy.visit('https://www.programsbuzz.com/');

        /* ==== Generated with Cypress Studio ==== */
cy.get('.gv-icon-52').click();
cy.get('#edit-keys').clear();
cy.get('#edit-keys').type('Cypress');
cy.get('#edit-submit').click();
cy.get(':nth-child(1) > h3 > a').click();
cy.get('.page-title > span').click();
cy.get('.page-title > span').should('have.text', 'Cypress Tutorial');
/* ==== End Cypress Studio ==== */

        })
    })

• We can see the recorded test code autoamtically generated, and we have completed our test steps.