How to use fetchUserData method in Cypress

Cypress have promises (Cypress.Promise), but they are not real promises, more like duck typing. In fact, Cypress isn't 100% compatible with real promises, they might, or might not, work.

Think of Cypress.Promise as a Task or an Action. They are executed sequentially with all other cypress commands.

To get your function into the Cypress pipeline you can use custom commands. The documentation doesn't state it, but you can return a Cypress.Promise from them.

Cypress.Commands.add('resetDb', function () {
  var apiServerUrl = Cypress.config().apiServerUrl;
  return new Cypress.Promise((resolve, reject) => {
    httpRequest('PUT', apiServerUrl + "/api/test/reset/")
      .then(function (data) {
        resolve();
      })
      .catch(function (err) {
        reject(err);
      });
  });
});

That command can then be executed from the test itself, or as in my case from before().

describe('Account', function () {
  before(() => {
    cy.resetDb();
  });

  it('can login', function () {
    // test code
  });

})

I'm not sure about your Wordpress site, but the following worked for the Material-UI site referenced in Cypress scrolling behaviour on get and relative positionning

.scrollIntoView() offset should be negative

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})
}) 

use native scrollIntoView

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  cy.contains('Elvis Presley')
    .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom
})

make header transparent

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.get('header').invoke('css', 'opacity', '0')
  cy.contains('Elvis Presley').scrollIntoView()
})

using .scrollTo()

This command applies to the scroll container, not the element you target, so the positioning may not come out correctly every time.

function getScrollParent(node) {
  if (node == null) return null;

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley')
    .then($el => {
      const scrollParent = getScrollParent($el[0])
      cy.wrap(scrollParent).scrollTo('center')
    })
})

Cypress clears all cookies before each test

Cypress.Cookies.defaults({
  preserve: "adminhtml"
})

see: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-preserve-cookies-localStorage-in-between-my-tests

fyi: adminhtml cookie stores admin's session id

EDIT

It appears that in magento 2 admin session id is stored in a cookie named "admin"

Cypress.Cookies.defaults({
  preserve: "admin"
})

Please check if your file has a triple-slash directive at the top of it, like

/// <reference types="Cypress" />

If it's the case, try to add a tsconfig.json inside your cypress folder. From cypress documentation a tsconfig.json with the following configuration should get intelligent code completion working.

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": [
      "cypress"
    ]
  },
  "include": [
    "**/*.*"
  ]
}

You can do something like this. This will iterate through all the .course classes and inside that click on the button with text as Register one by one.

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').contains('Register').click()
})

OR

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').eq(1).click()
})

cy.get(`[aria-label="August 12, 2020"]`).click()

Make sure that you return that promise inside Cypress.Commands.add callback. It's a bit confusing to deal with promises in Cypress context, since a lot of async behavior is magically handled within cy. commands.

Cypress.Commands.add("login", () => {
  return AuthLib.signIn(username, password).then((data) => {
    cy.setLocalStorage("accessToken", data.accessToken);
  });
});

Other solution:

Cypress.Commands.add("login", () => {
  return AuthLib.signIn(username, password);
});

before(() => {
  cy.login();
  cy.setLocalStorage("accessToken", data.accessToken);
});

You can patch the standard describe() function, which will add the hook transparently.

const originalDescribe = global.describe
const describe = (title, callback) => {
  originalDescribe(title, () => {
    before(() => {
      console.log('describe', title)
    });
    callback();
  });
}

describe('Main', ()=> {
  
  describe('Sub', () => {
    it('some tests', ()=> {
      console.log('it', 1)
    })
    
    it('some tests2', ()=> {
      console.log('it', 2)
    })
  })
  
  describe('Sub 2', () => {
    it('some tests', ()=> {
      console.log('it', 3)
    })
  })
})

Or another (simpler) approach is just to call you beforeDescribe() hook at the start of each describe() block.

const beforeDescribeHook = () => {
  const title = Cypress.mocha.getRunner().suite.title;
  console.log('describe', title)
}

describe('Main', ()=> {

  before(beforeDescribeHook)
  
  describe('Sub', () => {

    before(beforeDescribeHook)

    it('some tests', ()=> {
      console.log('it', 1)
    })
    
    it('some tests2', ()=> {
      console.log('it', 2)
    })
  })
  
  describe('Sub 2', () => {

    before(beforeDescribeHook)

    it('some tests', ()=> {
      console.log('it', 3)
    })
  })
})

You could do something like this

Cypress.Commands.add(
  'selectNth',
  { prevSubject: 'element' },
  (subject, pos) => {
    cy.wrap(subject)
      .children('option')
      .eq(pos)
      .then(e => {
        cy.wrap(subject).select(e.val())
      })
  }
)

Usage

cy.get('[name=assignedTo]').selectNth(2)