How to use createTempFiles method in Cypress

I don't think aliases are required. Here is my solution that I tested locally. I kept most of the code in Alapan Das' answer so it's easier to compare. To me, it seems more concise and easier to read without aliases.

describe('Store and compare a value', () => {
    it('store and compare', () => {  
        cy.login()
        cy.visit('url2')
        cy.get('.total-count-results').invoke('text')
            .then((previousText) => {
                cy.get('.medium.col100 > .filterwrapper > input').type('Test Dummy',{force: true})
                cy.get('.medium.col100 > .filterwrapper > input').type('{enter}')
                cy.get('.total-count-results').invoke('text').should("eq", previousText)
            })
    })
})

    class DndSimulatorDataTransfer {
  constructor(){
      this.data = {};

      this.dropEffect = 'move';
    
      this.effectAllowed = 'all';
      this.files = [];
      this.items = [];
      this.types = [];
  }
 

  clearData(format) {
    if (format) {
      delete this.data[format]

      const index = this.types.indexOf(format)
      delete this.types[index]
      delete this.data[index]
    } else {
      this.data = {}
    }
  }

  setData(format, data) {
    this.data[format] = data
    this.items.push(data)
    this.types.push(format)
  }

  getData(format) {
    if (format in this.data) {
      return this.data[format]
    }

    return ''
  }

  setDragImage(img, xOffset, yOffset) {}
}
  Cypress.Commands.add('reactDnd', {
    prevSubject: 'element',
  }, (sourceSelector, targetSelector, options) => {
    const dataTransfer = new DndSimulatorDataTransfer();
    const opts = {
      offsetX: 100,
      offsetY: 100,
      ...(options || {})
    };
    cy.wrap(sourceSelector.get(0))
      .trigger('dragstart', {
        dataTransfer,
      })
      .trigger('pointercancel', {
        dataTransfer,
        force:true,
      })
      .trigger('drag', {
        force:true,
        dataTransfer,
      })
      .trigger('dragenter', {
        force:true,
        dataTransfer,
      })
      .wait(100);
    cy.get(targetSelector).then($el => {
      const {
        x,
        y,
      } = $el.get(0).getBoundingClientRect();
      cy.wrap($el.get(0))
      .trigger('dragenter', {
        dataTransfer,
      })
      .trigger('drag', {
        dataTransfer,
      })
      .trigger('dragover', {
        dataTransfer,
      })
        .trigger('drop', {
          dataTransfer,
          clientX: x + opts.offsetX,
          clientY: y + opts.offsetY,
          force: true
        })
        .wait(1000);
        cy.wrap(sourceSelector.get(0)).trigger('dragend', {
          dataTransfer,
          force: true

        });
    })
  });

To anyone looking for how to solve this like I was:

For some reason Cypress(I am using 3.8.2 and I am not sure what version cypress-sql-server author was using) doesn't see the custom property of 'db'.

One method(you can do this many ways) is to just require the cypress config in the plugins file and reference your custom property from there.

To do this just change the plugins/index.js to look like this:

const sqlServer = require('cypress-sql-server');
const dbConfig = require('../../cypress.json');

module.exports = (on, config) => {
  tasks = sqlServer.loadDBPlugin(dbConfig.db);
  on('task', tasks);
}

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

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

By default, Cypress plugins file is run in the Node that's bundled alongside with Cypress's Electron app.

Youcan work around this in two ways:

1. Auto-compile files imported into the plugins file, by using @babel/register plugin. Remember, this workaround won't work for the plugins file itself.

   First, install it:

   npm install -D @babel/register @babel/plugin-proposal-object-rest-spread
   

   Then, on top of your plugins/index.js, do (babel@7):

   require("@babel/register")({
       plugins: [ "@babel/plugin-proposal-object-rest-spread" ]
   });
   

   https://babeljs.io/docs/en/next/babel-register.html

2. Run the plugins file using your system's Node executable.

   Cypress allows you to set nodeVersion configuration, which controls this behavior.

   E.g., set in cypress.json:

   {
       "nodeVersion": "system"
   }
   

   Note: this of course works only if your system's Node already supports that feature.

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};

Yes, there is. It is called cypress conditional testing according to the docs.

There are a number of ways to get this done as seen in the docs depending on what you may want.

Below is something we can do

  cy.get('input[name="email"]').then(($btn) => {
    if ($btn.length) {
      // do something if it's active
      $btn[0].click();
    } else {
      // do something else
      cy.get('input[id="email"]').as('email').click();
    }
  })

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