VS Code Cypress Snippets

Is a collection of small snippets of predefined code that covers different features and use cases common in UI tests coded with Cypress.

Installation

To install the snippets in Visual Studio Code, you must first open the command palette (Ctrl + Shift + X or Cmd ⌘ + Shift + X). In the command palette, find "Cypress Snippets" and select it.

Supported Languages (file extensions)

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Snippets

Cypress Test Project: cyProject

describe('This is your test project title', () => {
   beforeEach(() => {
       cy.visit('url');
   })
   it('test case description', () => {
       // code here
   })
})

Request Get: cyRequestGet

cy.request('url')
  .then((response) => {
   expect(response.status).to.have.eq(200);
   // assertion code here
});

Request Post: cyRequestPost

cy.request({
    method: 'POST',
    url: 'url',
    body: {
      parameters: 'value'
    },
  }).then((response) => {
    expect(response.body).to.have.property('parameters', 'value');
  });

Request Put: cyRequestPut

cy.request({
    method: 'PUT',
    url: 'url',
    body: {
      parameters: 'value'
    },
  }).then((response) => {
    expect(response.body).to.have.property('parameters', 'value');
  });

Request Delete: cyRequestDelete

cy.request({
    method: 'DELETE',
    url: 'url',
  }).then((response) => {
    expect(response.status).to.eq(204);
  });

Intercept: cyIntercept

cy.intercept(
    'method',
    'url'
   ).as('name');

Intercept Fixture: cyInterceptFixture

cy.intercept(
    'method',
    'url',
    {
      fixture: 'example.json',
    },
   ).as('name');

Intercept Status Code: cyInterceptStatusCode

cy.intercept(
    'method',
    'url',
    {
      statusCode: 500,
    },
   ).as('name');

Command Add: cyCommandAdd

Cypress.Commands.add('Name', (Parameters) => {
   // code here
  });

Describe: cyDescribe

describe('test description', () => {
   // code here
})

Context: cyContext

context('Context', () => {
   // code here
});

Before: cyBefore

before(() => {
   // code here
});

BeforeEach: cyBeforeEach

beforeEach(() => {
   // code here
});

It: cyIt

it('Test description', () => {
   // code here
});

After: cyAfter

after(() => {
   // code here
});

AfterEach: cyAfterEach

afterEach(() => {
   // code here
});

Visit: cyVisit

cy.visit('url');

Get: cyGet

cy.get('selector')

Check: cyCheck

.check()

Uncheck: cyUncheck

.uncheck()

Contains: cyContains

.contains('content')

Find: cyFind

.find('selector')

Type: cyType

.type('text')

Clear: cyClear

.clear()

Click: cyClick

.click()

Click: cyDblClick

.dblclick()

Click: cyRightClick

.rightclick()

Wait: cyWait

cy.wait('');

Wait Element: cyWaitElement

.wait('')

Each: cyEach

.each((el, index, list) => {
   // code here
});

Log: cyLog

cy.log();

Pause: cyPause

cy.pause();

Screenshot: cyScreenshot

cy.screenshot('');

Debug: cyDebug

cy.debug();

Viewport: cyViewport

cy.viewport(width, height);

Go Back: cyGoBack

cy.go('back');

Go Forward: cyGoForward

cy.go('forward');

Select: cySelect

.select('')

Select File: cySelectFile

.selectFile('')

Clear All Cookies: cyClearAllCookies

cy.clearAllCookies();

Clear All LocalStorage: cyClearAllLocalStorage

cy.clearAllLocalStorage();

Clear All SessionStorage: cyClearAllSessionStorage

cy.clearAllSessionStorage();

Force: cyForce

{ force: true }

License

MIT