You can see your webpack logs by running cypress in debug mode documentation

Mac/Linux

DEBUG=cypress:* cypress run

Windows

set DEBUG=cypress:*
cypress run

It is quite a bit of output, as there's logging from everything cypress does - one of which is cypress:webpack, which can give you the full message.

Update: document.body.click will work in a browser, but for jsdom you need to manually create the event:

document.body.addEventListener('click', function() {
  console.log('test');
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.body.dispatchEvent(evt)

The above code is working for me in Jest and should work with "solo" jsdom as well.

Autumn 2018 holiday update ????

The tools around simulating events have gotten a great deal better. I've currently shifted my approach to use the excellent react-testing-library to render my components and dispatch events:

import {render, fireEvent} from 'react-testing-library'

test('example', () => {
  const handleClick = jest.fn()

  const {getByText} = render(<div><button onClick={handleClick}>Click Me</button></div>)
  fireEvent.click(getByText('Click Me'))

  expect(handleClick).toHaveBeenCalled()
})

While I still believe in end to end tests with something like puppeteer or selenium (or cypress!) provide the highest level of confidence that something actually works, this provides a huge amount of value without polluting tests with manual event creation.

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.

If you want to use the :has() pseudo-selector, you should do so on the outer of the .each() loop.

But please beware, :has() pseudo-selector will fail if there are zero buttons already clicked.

let myArray: any = []

cy.get('li[class="xyz"]:has(button[aria-label="remove"])')  // implied filter
  .each($li => {
    // only element with remove attribute inside here
    cy.wrap($li)
      .find('div[class="theText"]')
      .invoke('text')
      .then(text => {
        myArray.push(text)
      })
  })
}).then(() => {
  cy.wrap(myArray).as('myArray')
})

To answer straight, opening/ peeking the direct declaration of custom commands is not supported (May be, some one can correct if this supports). I would usually follow grouping of custom commands in separate files. For instance,

File: cypress/support/sample_command.ts

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

import * as PageElements from "../resources/selectors.json";
import * as Pages from "../resources/urls.json";

let xml: XMLDocument
let data: HTMLCollection

Cypress.Commands.add(
  "getWorkflowXML",
  (wfPath: string): Cypress.Chainable<HTMLCollection> => {
    var url = Cypress.env("url") + wfPath;

    return cy.request({
      log: true,
      url: url,
      auth: {
        user: Cypress.env("userName"),
        pass: Cypress.env("password")
      }
    }).then(response => {
      expect(response)
        .property("status")
        .to.equal(200);
      xml = Cypress.$.parseXML(response.body);
      data = xml.getElementsByTagName("java");
      return data;
    });
  }
);

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Get Workflow XML through XHR call
       * @memberof Cypress.Chainable
       * @param wfPath
       */
      getWorkflowXML: (wfPath: string) => Cypress.Chainable<HTMLCollection>;
    }
  }
}

Then, in the the cypress/support/index.js file I would import the command file,

import './sample_command'

This way gives me better traceability, instead of declaring all the commands straight under index.d.ts.

Reference:

1. https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax
2. https://github.com/cypress-io/add-cypress-custom-command-in-typescript

You should ensure your server is running before calling cypress run using a utility like wait-on or start-server-and-test.

Cypress's check on the baseUrl is a final courtesy check just so you don't run through your whole test suite on a server that is not running.

For tips on ensuring your server is running before running Cypress, check out the Cypress docs here: https://on.cypress.io/continuous-integration#Boot-your-server

You can't use while/for loops with cypress because of the async nature of cypress. Cypress doesn't wait for everything to complete in the loop before starting the loop again. You can however do recursive functions instead and that waits for everything to complete before it hits the method/function again.

So you can do something like this instead and it'll work:

clickVisibleButton = () => {
        cy.get( 'body' ).then( $mainContainer => {
            const isVisible = $mainContainer.find( '#idOfElement' ).is( ':visible' );
            if ( isVisible ) {
                cy.get( '#idOfElement' ).click();
                this.clickVisibleButton();
            }
        } );
    }

Then obviously call the this.clickVisibleButton() in your test. I'm using typescript and this method is setup in a class, but you could do this as a regular function as well.

I think you want to click the element <a href="/Public/app/#/calendar"> since it has the href.

There's lots of ways to target it, the one to use depends on what is unique on the page

cy.contains('a', 'Calendar').click()  // if the word Calendar only appears on this link

cy.get('a[href="/Public/app/#/calendar"]').click()  // specifies by the link itself

cy,get('i.site-menu-icon').parent().click()  // if the icon is the unique thing

You can set the scrollBehavior globally or per test(-suite).

I'm disabling it on a per tests basis like so:

it('check something w/ autoscroll disabled', { scrollBehavior: false }, () => {
  cy.get('.tab').click();
  // do something else ...
});

Docs: https://docs.cypress.io/guides/references/configuration#Actionability