How can I make part of my test reusable so that it can be used or called again in other future tests using Cypress Javascript

Cypress.Commands.add("login", (username, password) => {
  cy.visit('http://www.demoapp.com')
  cy.contains('Log in')

  // Check that the user has indeed landed on the login page
  cy.url().should('include','/login')

  // Make a school selection
  cy.get('#school-selector-search-box')
    .type('Bristol Free School')
    // Click the suggestion
    .get('.suggestions > .ember-view.suggestion:nth-of-type(1) > .suggested-school- 
   name').click()

  // Enter a username at this step
  cy.get('#identification')
    .type(username)
    .should ('have.value', username)

  // Enter a password at this step
  cy.get('#password')
    .type(password)
    .should ('have.value', password)

  // Proceed to login to account
  cy.get('.actions > .btn').click()

  // Assert that Dashboard is visible
  cy.get('h1.main-header-title')
  cy.contains ('Dashboard')
})

Then you can call it from your test like this, notice that I used beforeEach, which will run the login before each test without you having to write it multiple times:

describe('Create Homework', function() {
  beforeEach(() => {
    cy.login('gdawson_4319c', 'demo');
  })

  it('Create New Assignment', function() {
    // Now only your test logic goes here
  })
})

kernowcodeAnswered 1 years ago · Answer 2

As well as custom commands you can just create a js function and reuse it where you like. For example

const login = () => {
     //... your 'describe' and 'it' syntax if you like
}

describe('thing that uses login', () => {
    it('logs in', () => {
         login();
    });
});

This way you can output meaningful test script steps, if you are interested in the detail of what is happening in the reused section.

ProgrammerAnswered 1 years ago · Answer 3

After adding a new project, Cypress will automatically scaffold out a suggested folder structure. By default it will create:

/cypress
  /fixtures
    - example.json

  /integration
    /examples
      /1-getting-started
        - todo.spec.js
      /2-advanced-examples
        - actions.spec.js
        - aliasing.spec.js
        - assertions.spec.js
        - connectors.spec.js
        - cookies.spec.js
        - cypress_api.spec.js
        - files.spec.js
        - local_storage.spec.js
        - location.spec.js
        - misc.spec.js
        - navigation.spec.js
        - network_requests.spec.js
        - querying.spec.js
        - spies_stubs_clocks.spec.js
        - traversal.spec.js
        - utilities.spec.js
        - viewport.spec.js
        - waiting.spec.js
        - window.spec.js

  /plugins
    - index.js

  /support
    - commands.js
    - index.js

Any files downloaded while testing an application's file download feature will be stored in the downloadsFolder which is set to cypress/downloads by default.

/cypress
  /downloads
    - records.csv

If screenshots were taken via the cy.screenshot() command or automatically when a test fails, the screenshots are stored in the screenshotsFolder which is set to cypress/screenshots by default.

/cypress
  /screenshots
    /app_spec.js
      - Navigates to main menu (failures).png

Any videos recorded of the run are stored in the videosFolder which is set to cypress/videos by default.

/cypress
  /videos
    - app_spec.js.mp4

You can define behaviors in a before or beforeEach within any of the cypress/support files:

beforeEach(() => {
  cy.log('I run before every test in every spec file!!!!!!')
})

ProgrammerAnswered 1 years ago · Answer 4

describe("pow", function() {

  it("raises to n-th power", function() {
    assert.equal(pow(2, 3), 8);
  });

});

<!DOCTYPE html>
<html>
<head>
  <!-- add mocha css, to show results -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
  <!-- add mocha framework code -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
  <script>
    mocha.setup('bdd'); // minimal setup
  </script>
  <!-- add chai -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <script>
    // chai has a lot of stuff, let's make assert global
    let assert = chai.assert;
  </script>
</head>

<body>

  <script>
    function pow(x, n) {
      /* function code is to be written, empty now */
    }
  </script>

  <!-- the script with tests (describe, it...) -->
  <script src="test.js"></script>

  <!-- the element with id="mocha" will contain test results -->
  <div id="mocha"></div>

  <!-- run tests! -->
  <script>
    mocha.run();
  </script>
</body>

</html>

function pow(x, n) {
  return 8; // :) we cheat!
}

describe("pow", function() {

  it("raises to n-th power", function() {
    assert.equal(pow(2, 3), 8);
    assert.equal(pow(3, 4), 81);
  });

});

describe("pow", function() {

  it("2 raised to power 3 is 8", function() {
    assert.equal(pow(2, 3), 8);
  });

  it("3 raised to power 4 is 81", function() {
    assert.equal(pow(3, 4), 81);
  });

});

How can I make part of my test reusable so that it can be used or called again in other future tests using Cypress Javascript

Write an answer

Recent Questions on javascript

Programming Languages

How can I make part of my test reusable so that it can be used or called again in other future tests using Cypress Javascript

Write an answer

Questions related to 'How can I make part of my test reusable so that it can be used or called again in other future tests using Cypress Javascript'

Recent Questions on javascript

Programming Languages