How to use getFixtureFn method in Cypress

You can do this assertion like so:

cy.get('<element-selector-here>').should('not.be.visible');

Also, you can assert the element exist & it's not visible like so:

cy.get('<element-selector-here>').should('exist').and('not.be.visible');

As the message says, .select() is the command to use

cy.get('[name^=shopveg]').select('Bananas')

That's because <select> behavior is implemented by a web component (see slot tag), not javascript, so there's no click handler available.

While investigating to post the question, I came up with a simple solution to this problem. The subject is an object which has a selector, so you can use that selector with cy.get(subject.selector) to get the Dom Element:

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

I think this is not a lot of clear and more people may have this issue, so I leave my solution here.

It is very difficult to test a situation where an action has not occured. With this type of assertion, you can really only say:

"The XHR request was not made within the 400ms that Cypress looked for this XHR request to have been made (or whatever you set your timeout to be)"

This doesn't really confirm that the XHR request was never called.

That being said, Cypress offers a way to retrieve all XHR requests made using the undocumented cy.state('requests'). You could check the length of that, filter them by alias, etc to probably determine what you want.

Figured out the answer using cy.stub() method as advised by Richard Matsen:

describe('Test an alert and the text displaying', function() {
it('Verify alert and its text content', function(){
    cy.visit('http://www.seleniumeasy.com/test/javascript-alert-box-demo.html')    

    const stub = cy.stub()  
    cy.on ('window:alert', stub)
    cy
    .get('button').contains('Click me!').click()
    .then(() => {
      expect(stub.getCall(0)).to.be.calledWith('I am an alert box!')      
    })  

    })

})

I've got Cypress tests running for several environments, one of those has issues with the login state. Deleting cookies helps sometimes, but not always. So to keep the tests stable I decided to create an if statement (what in itself isn't a best practice) to go to the known application state as fast as possible.

What I do is using the custom command below in every beforeEach() that could use a login:

Cypress.Commands.add('login', function () {
    cy.get('body').then($body => {
        if ($body.find('.user-profile-name').length === 1) {
            cy.log('Already logged in')
        } else {
            cy.get('.login-button').click()
        }
    })
})

What is does is checking if the browser is already logged in, since .user-profile-name should exist. If it does not exist the browser isn't logged in, so Cypress needs to click the .login-button button.

Using dataTransfer const, we can get what we need to achieve;

describe("Main Page", () => {
  const dataTransfer = new DataTransfer;
  it("Drag & Drop elements", () => {
      cy.get('.schedule-movie-list > .schedule-movie-list__item')
        .first()
        .trigger('dragstart', { dataTransfer });

      cy.get(schedulerPerformancePanel)
        .first()
        .trigger('drop', { dataTransfer })
        .wait(3000);

Please see chaijs .a(type[, msg])

Asserts that the target’s type is equal to the given string type. Types are case insensitive.

expect(undefined).to.be.an('undefined')

The .a() or .an() is doing a typeof check that returns a string, so you just need to quote the "undefined" type

cy.wrap(user).should('not.be.a', "undefined")

or drop the .a to do a reference check instead

cy.wrap(user).should('not.be', undefined)

It's possible to use the old plugins/index.ts in the new cypress.config.ts by importing it.

This is the simplest example (with no new config in cypress.config.ts)

import { defineConfig } from 'cypress'
import legacyConfig from './cypress/plugins/index.js'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234',
    setupNodeEvents(on, config) {
      return legacyConfig(on, config)  // call legacy config fn and return result
    }
  }
})

The typescript and modules may cause you grief about typings etc. I've not tried it in a typescript project, but it does work in a javascript project.

Alternatively, copy/paste everything from plugins/index.ts instead of calling the legacy function. This might be better as you add more plugins in the future.