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

user_8798283 0
Viewed 6615

Background

Hi, I am new to cypress and I have the following code which allows a specified user type (out of 4 total) to login.

As this is one of the main tests, instead of having to copy and paste this same code into each of my new tests, I would like to make them re-usuable so that in future tests, they can be used or "called" again.

It will be easier to keep these tests in a separate folder and separate files, so that they be maintained on their own but have the ability to call them when necessary in any future test files that I created.

For example, if I have a future test relating to a teacher, I can call the function that does the teacher login and then start writing the rest of the script that actually deals with the test without needing to mess about copying and pasting it each time.

The block of code that does the login part is below (and is pretty much the same for all other types of users)

I have been trying to research how to create methods and functions, but am not too sure about the structure I should use, and have looked at the documentation but I am a bit puzzled.

describe('Create Homework', function() {
  it('Create New Assignment', function() {
  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('gdawson_4319c')
  .should ('have.value','gdawson_4319c')

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

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

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

Outcome

Be able to wrap the above code into something (like a function) that would make it reusable so that I can use these steps in another test without needing to manually copy and paste it. This means I could move these into a seperate file, and only call them when I need to use these steps which will save me time.

cypress unit-testing javascript
2 Answers

You can accomplish this with Custom Commands.

Add this to your cypress/support/commands.js file:

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
  })
})
user_28831290

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.

user_20886730
Related