End to end testing with Cypress.io - nimbletank/nimbletank-coding-standards GitHub Wiki

Getting Started

Once the appropriate project is pulled from bitbucket all you need to do is go to the command line and input:

cd /your/project/path npm run test

After a moment the Cypress Test Runner should launch.

If the project has not got Cyrpess as an npm dependency then the following command will make it so:

cd /your/project/path
npm install cypress --save-dev

Writing tests

• Step 1 is to visit a page using cy.visit:

describe('My First Test', function() {
  it('Visits the Kitchen Sink', function() {
    cy.visit('https://example.cypress.io')
  })
})

• Step 2 is to find an element, either using cy.get or cy.contains:

describe('My First Test', function() {
  it('finds the content "type"', function() {
    cy.visit('https://example.cypress.io')

    cy.get('element.name').click()

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

cy.get will find elements using their class name or id

cy.contains will find elements based on what is visible on the page

.click() will click the element found, but this will fail if there is more than one element that is found; .first(), .next(), .last() and .prev() allow for more refined element querying in this situation

• Step 3 is making an assertion using .should()

The most basic assertion is checking that the page changes to the correct url when a navigation button is clicked:

describe('My First Test', function() {
  it("clicking 'type' navigates to a new url", function() {
    cy.visit('https://example.cypress.io')

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

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

Code structure

describe("first Cypress section", function() {
  it("first test, normally checking the page title is correct", function() {
    cy.visit("https://www.website.com");
    cy.title().should("include", "website");
  });

  context("second Cypress section, first page", function() {
    beforeEach(function() {
      cy.visit("https://www.website.com");
    });
    it("first test", function() {
      cy.get("element.name").click();
      cy.url().should("include", "partOfUrl");
    });
    it("second test", function() {
      cy.get("element.name").click();
      cy.url().should("include", "partOfUrl");
    });
  });
  context("third Cypress section, second page", function() {
    beforeEach(function() {
      cy.visit("https://www.secondwebsite.com");
    });
    it("first test", function() {
      cy.get("element.name").click();
      cy.url().should("include", "partOfUrl");
    });
    it("second test", function() {
      cy.get("element.name").click();
      cy.url().should("include", "partOfUrl");
    });
  });
});

More detail at https://docs.cypress.io/guides/overview/why-cypress.html# and https://docs.cypress.io/api/introduction/api.html#