Get started

yarn add cypress

yarn run cypress open

Create new test file

// cypress/integration/sample_spec.js
describe('my test', function() {
  it('contains click, get type', function() {
    cy.visit('https://example.cypress.io')

    cy.pause()

    cy.contains('type').click()

    cy.url()
      .should('include', '/commands/actions')

    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]')
  })
})

cy is global object. You can access cy.url() or cy.hash(). Also we can use

cy.window().its('localStorage').invoke('getItem', 'jwt').should('exists')
  • cy.get(css_selector) to grab the element but #id, .class, usually with cy.get('[data-test=email]').
  • cy.contains(text) find element that contains text, cy.contains('h1', 'Sign in') contains element h1 with text.

On element you can call (prevSubject: true):

  • .children()
  • .type(text) insert keys. use joe#{enter} to simulate enter key
  • .debug() to see in console log

Async

  cy.get("body").then($body => {
      if ($body.find('Submit')) {

Adding commands

// cypress/supports/commands.js
Cypress.Commands.add('login', () => {
   cy.visit('/')
   cy.get('#email_id').type("some email");
   cy.get('#password_field').type("some password");
   cy.get('#submit_button_id').click();
});

describe('Preserve the login details for every test', () => {
    beforeEach(() => {
         cy.wait(1000);
         cy.clearCookies();
         cy.login();
         Cypress.Cookies.preserveOnce("some_session");
      });
)

https://blog.testdouble.com/talks/2020-03-12-cypress-vs-capybara/

Create a web scraper with cypress https://egghead.io/lessons/cypress-create-a-web-scraper-with-cypress

I can not enable cookies to log in to gmail, but there are plugins that use puppeteer to fetch cookies https://github.com/lirantal/cypress-social-logins