How to use ListItemLink method in Cypress

I think the problem is, that you want to do conditional testing. Using cy.wait() is bad practice and is even mentioned in the docs itself.

Anti-Pattern

You almost never need to wait for an arbitrary period of time. There are always better ways to express this in Cypress.

You should not execute different actions upon response. In cypress testing it is expected, that you know the result of your action beforehand.

If user enters invalid email, you might expect form submisson to fail and an error to be displayed.

cy.get("#email-input").type('invalid_email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".email-error").should('be.visible');

In this case cypress will check them DOM until it finds the error or hits the defaultCommandTimeout from cypress config.

On the other hand, if you want to check if user is redirected correclty, you can simply check for a div on the success/redirected page.

cy.get("#email-input").type('valid@email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".success-page").should('be.visible');

However, if you still decide to execute an action depending on the servers response, cypress enables you to declaratively cy.wait() for requests and their responses.

cy.server()
cy.route({
  method: 'POST',
  url: '/myApi',
}).as('apiCheck')
cy.visit('/')
cy.wait('@apiCheck').then((xhr) => {
  assert.isNotNull(xhr.response.body.data, 'api call successfull')
})

This could be bad advice, but can you try the following?

cy.findAllByRole('rowheader').eq(2).click({force: true})

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

Accessing new windows via Cypress is intentionally not supported.

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

1. Write a test to check that when performing the action in your app, the window.open event is called by using cy.spy() to listen for a window.open event.

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'open')
  }
})

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called')

2. In a new test, use cy.visit() to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

cy.visit('http://localhost:3000/new-window')

// Do the actions you want to test in the new window

Fully working test example can be found here.

1. add @istanbuljs/nyc-config-typescript to your devDependencies

2. babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['babel-plugin-istanbul', {
      extends: '@istanbuljs/nyc-config-typescript',
      extension: ['.ts', '.tsx', '.js', '.vue']
    }]
  ]
}

3. delete the nyc.config.js file

4. delete node_modules/.cache

5. restart your server

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.

I was facing the same issue when trying to implement the nodemailer code client side. The reason was because nodemailer doesn't seem to work in the browser (only in node). Moving it serverside (into an express app) solved the issue.

This post regarding the same error (but affecting a different library) also suggests that running the files in the browser is the problem: http://www.ganzhoupress.com/github_/cypress-io/cypress/issues/1981

Hope this helps.

You are returning the value inside your Promise function. Promises however can't return values, they can only resolve with a value. This means you'll have to use Promises throughout your code like this:

function getText(byclassName) {
    return new Promise((resolve, reject) => {
        cy.get(byclassName).invoke('text')
            .then(campaign => {
                cy.log('campaign', campaign);
                resolve(campaign);
            });
    });
}

it('finds the role', function () {
    cy.visit(...);

    return getText('.myClass').then(elementText => {
        cy.log('campaign', elementText);

        expect(elementText).to.equal(...);
    });
})

Bump the wait time on your click(). Is 3 minutes enough?

cy.xpath('//span[normalize-space()="Work Space"]', {timeout:180000})
  .click()