How to use util.getOsVersionAsync method in Cypress

You probably just want to make a .type() variation

Cypress.Commands.add('typeIfNotEmpty', { prevSubject: true }, (subject, textToType) => {
  if (textToType) {
   cy.wrap(subject).type(textToType)
  }
  return subject  // allow further chaining
})

cy.get('#username')
  .typeIfNotEmpty(username)
  .should(...)               // some assertion on '#username' element

You can simply use should to assert it doesn't exist, and Cypress will wait for the element until it's removed from DOM. If you need to override the default 4s timeout, you can pass it to the previous command:

cy.get( selector, { timeout: 10000 }).should("not.exist");

From https://docs.cypress.io/api/cypress-api/custom-commands.html

Put this in your support/commands.js file:

Cypress.Commands.add('subValues', (a, b) => { return a - b });

Put this in your support/index.js file, if it isn't already there (it should be):

import "./commands";

Call it in your test like so:

describe ('Calling a function', function(){
  it('Call the Subtract function and asert the calculation', function(){
    cy
      .subValues(15, 8)
      .should('eq', 7) // true        
    });
});

So to generate a random number between min (included) and max (included) you have to use this:

Math.floor(Math.random() * (max - min + 1)) + min

So now your cypress code will be:

cy.get('optionsselector')
  .its('length')
  .then((len) => {
    cy.get('optionsselector')
      .eq(Math.floor(Math.random() * ((len-1) - 0 + 1)) + 0)
      .click()
  })

Essentially the fetch() and subsequent .then() and .catch() are not running on Cypress queue, so it does not know when the test has finished.

You can convert the fetch() to cy.request() to get around that.

But to continue with fetch, use Mocha's done() method inside the catch block to signal end of test

it('Fetch Data', (done) => {
  fetch('https://mocki.io/v1/82b25ba1-615a-4ff6-8c5d-c9f464f8c843')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Something went wrong!');
    } else {
      return response.json();
    }
  }).then((res) => {
    expect(res.message).to.contain('success');
    cy.log('result => ', res);
    done()
  })
  .catch((err) => {
    throw new Error(err);
    done()
  })
})

Removing the catch clause will also allow the test to fail.

it('Fetch Data', () => {
  fetch('https://mocki.io/v1/82b25ba1-615a-4ff6-8c5d-c9f464f8c843')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Something went wrong!');
    } else {
      return response.json();
    }
  }).then((res) => {
    expect(res.message).to.contain('success');
    cy.log('result => ', res);
  })
})

The process you described can surely be tested with react-testing-library as an integrated test. From the docs/faq, it encourages testing a component high enough up the component tree, without mocking child components, in order to simulate and test what an actual user interaction would be like.

Also check out this Kent C. Dodds blog post .

By nature, Cypress gives you native Javascript access to the DOM.

In your case, you could do something like this:

cy.get('#search-simple').then(elem => {
    elem.val('some text');
});

The JS function for checking if a string contains another string is includes.

if (baseUrl.includes('localhost')) {
  // code
} ...

After a plentitude of being angry at my keyboard, I have found the winning solution.

Using invoke you can store the value of an attr like src, as shown here: https://docs.cypress.io/api/commands/invoke.html#Arguments-are-automatically-forwarded-to-the-function

So, after a few tweaks to the above attempts, I found this to work perfectly:

    cy.get('.image-root img').invoke('attr', 'src').then((firstSrc) => {
      const src1 = firstSrc

        /**
         * File drop 2mb jpg
         */
        cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
          cy.get(".dropzone").upload(
            {
              fileContent,
              fileName: "sampleimage.jpg",
              mimeType: "image/jpeg"
            },
            { subjectType: "drag-n-drop" }
          );
        });

        cy.wait(16000);

      cy.get('.image-root img').invoke('attr', 'src').then((nextSrc) => {
        expect(nextSrc).to.not.equal(src1)
      });
    });