How to use manipulationTarget method in Cypress

From your description the only step missing is the support file import.

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

I also have a .babelrc with the following, but I believe you can do without it if just covering e2e tests.

{
  "plugins": ["istanbul"]
}

Let me know if that's not it, I will give you step-by-step.

To check each element, you can use .each:

cy.get('img').each($el => {
  cy.wrap($el).should('have.attr', 'alt')
}

instead of

cy.get('input').type('now')

try

cy.get('.input').type('now')

because you are looking for the class name not for the tag

I managed to solve this by using a Promise;

Doing some further reading, I found out the then function I am executing is synchronous (I'm new to JS, pls don't hurt me).

I refactored the then function to the following:

.then((response) => {
        return new Promise(resolve => {        
            expect(response).property('status').to.equal(200)
            expect(response.body).property('id').to.not.be.oneOf([null, ""])
            const respBody = response.body;
            boardId = respBody['id']
            resolve(boardId)
        })

It's probably not entirely correct or best practice, but it will do for my demo

This error is caused by the presence of modern keywords like "import" and "export" when Cypress runs in the browser. Unlike Selenium or Protractor -- it actually runs inside the browser. Since browsers don't support modern JS yet, you'll need to use webpack or browserify to transpile your code.

https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

Here is a fantastic blog post on how to get Cypress to work with modern JS and Typescript using webpack: https://glebbahmutov.com/blog/use-typescript-with-cypress/

^^ The post is focused on TypeScript, but the configuration options for Javascript will be similar.

The following npm packages must be installed and in your package.json:

"@cypress/webpack-preprocessor": "^4.1.0",
"cypress": "^3.3.1",
"ts-loader": "^6.0.3",
"typescript": "^3.5.2",
"webpack": "^4.34.0"

Webpack should be installed using:

npm install --save-dev webpack typescript ts-loader
npm install --save-dev @cypress/webpack-preprocessor

The following should be present under the "compilerOptions" section of a file called tsconfig.json in your root directory, with "allowJs" set to true for non-typescript users:

"module": "es6",
"target": "es6",
"types": ["cypress"],
"allowJs": true

A file called "webpack.config.js" should be present in your root directory with the following:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

And these exports should be present under cypress/plugins/index.js:

const webpack = require('@cypress/webpack-preprocessor')
module.exports = on => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {}
  }

  on('file:preprocessor', webpack(options))
}

Note this final bit at the end of the Cypress plugins file,

on('file:preprocessor', webpack(options))

That is where Cypress is told to process your modern JS code in such a way as to make it Cypress-runnable.

There's some examples in the documentation, for example

cy.request('POST',"localhost:8080", {...})
  .its('body').should('include', 'HELLO WORLD%')

An live example for @jjhelguero

cy.request({
  method: 'POST',
  url: 'https://jsonplaceholder.typicode.com/posts',
  body: "Hello World", 
  header: "Content-Type:application/json"
})
.its('body')
.should('have.property', 'id', 101)

If I'm reading this correctly, you can do this by declaring the variable in an outer context, the variable will be a "closure" variable.

describe('New experience test', () => {

  let oc_token;

  before(() => {
    cy.request({...}).then((response) => {
      oc_token = response.body.access_token; // set outer ("closure") variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        w.sessionStorage.setItem('jwt', oc_token)
        w.sessionStorage.setItem('other_jwt', oc_token)
      })
    ...
  })
})

The only problem you might have is if Cypress resets the browser, but it's unlikely if you are visiting baseUrl set in configuration.

There are other methods such as alias

describe('New experience test', () => {

  before(() => {
    cy.request({...}).then((response) => {
      cy.wrap(response.body.access_token).as('oc_token');  // alias variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        cy.get('@oc_token').then(oc_token => {     // retrieve alias value
          w.sessionStorage.setItem('jwt', oc_token)
          w.sessionStorage.setItem('other_jwt', oc_token)
        })
      })
    ...
  })
})

or environment variable

describe('New experience test', () => {

  before(() => {
    cy.request({...}).then((response) => {
      Cypress.env('oc_token', response.body.access_token); // env variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        w.sessionStorage.setItem('jwt', Cypress.env('oc_token'))
        w.sessionStorage.setItem('other_jwt', Cypress.env('oc_token'))
      })
    ...
  })
})

This seems like a job for a fixture

cy.intercept("/uploads/test.png", { fixture: "logo.png" })

By default, you would place your logo.png file into the cypress/fixtures directory however you can configure it to use another location

You can achieve this by using cypress custom commands. Here is the doc - https://docs.cypress.io/api/cypress-api/custom-commands.html

You can create custom commands under cypress/support/commands.js

An example from the cypress doc of how a login function can look like:

Cypress.Commands.add('typeLogin', (user) => {
  cy.get('input[name=email]')
    .type(user.email)

  cy.get('input[name=password]')
    .type(user.password)
})

Now in the tests, you use the above custom command as:

cy.typeLogin({ email: 'fake@email.com', password: 'Secret1' })