How to use stripStream method in Cypress

.select() is for dropdowns (well some of them), but .check() is for checkboxes docs

cy.contains('h2', 'Store')
  .find('[type=checkbox]')
  .check()

There's something a little bit off with the html, the <input> isn't closed. Probably does not matter, but to be safe id the <h2> with the "Store" text, then .find() takes you inside the <h2>.

Why do you want to use a Class? Instead of using a Class you could simply export a JavaScript Object in your helpers.js file like:

export const colors = {
   green: '4bdd33',
   orange: 'ff7900',
   red: 'd92632'
};

And in your Cypress test file you can import colors with:

import { colors } from '../../support/helpers';

Then you can use colors as you already described in the question.

I have updated our recipe for static resource loading, see https://github.com/cypress-io/cypress-example-recipes/pull/363

To check if an image has finished loading, the simplest way is to check the image's naturalWidth or naturalHeight property.

// we can wait for the <img> element to appear
// but the image has not been loaded yet.
cy.get('[alt="delayed image"]')
.should('be.visible')
.and(($img) => {
  // "naturalWidth" and "naturalHeight" are set when the image loads
  expect($img[0].naturalWidth).to.be.greaterThan(0)
})

Alternatively, you can use performance entries to confirm that any static resource has finished loading, see the above pull request for the details.

If I understand correctly, you are looking for

cy.get('a[href="..."]')

Similarly

cy.get('img[src="..."]')

where you should add the appropriate text instead of ...

Of course, follow with .should('be.visible').

If you want to use a partial match, you can use

cy.get('img[src$="bottle.png"]')  // NOTE src$= 

You can accomplish this with Custom Commands.

Add this to your cypress/support/commands.js file:

Cypress.Commands.add("login", (username, password) => {
  cy.visit('http://www.demoapp.com')
  cy.contains('Log in')

  // Check that the user has indeed landed on the login page
  cy.url().should('include','/login')

  // Make a school selection
  cy.get('#school-selector-search-box')
    .type('Bristol Free School')
    // Click the suggestion
    .get('.suggestions > .ember-view.suggestion:nth-of-type(1) > .suggested-school- 
   name').click()

  // Enter a username at this step
  cy.get('#identification')
    .type(username)
    .should ('have.value', username)

  // Enter a password at this step
  cy.get('#password')
    .type(password)
    .should ('have.value', password)

  // Proceed to login to account
  cy.get('.actions > .btn').click()

  // Assert that Dashboard is visible
  cy.get('h1.main-header-title')
  cy.contains ('Dashboard')
})

Then you can call it from your test like this, notice that I used beforeEach, which will run the login before each test without you having to write it multiple times:

describe('Create Homework', function() {
  beforeEach(() => {
    cy.login('gdawson_4319c', 'demo');
  })

  it('Create New Assignment', function() {
    // Now only your test logic goes here
  })
})

By default, Cypress will wait for your page to load all resources before continuing the test. Your cy.wait() shouldn't be necessary. The default timeout for cy.visit() is 60 seconds.

Also, cy.get() will retry finding your element until the element exists. The default timeout is 4 seconds, but you can increase it.

Something like this is generally all you need:

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.get('button').contains('Create').click()

If you find that this isn't working, perhaps because your page takes more than 4 seconds to render after it loads all resources, then you can do something like this:

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    // wait up to 30 seconds for some element to exist before continuing the test
    cy.get('.some-element-in-your-app-that-only-exists-once-page-has-loaded', { timeout: 30000 })
    cy.get('button').contains('Create').click()

In general, you shouldn't ever need to use cy.wait() to delay your tests by a certain number of milliseconds. Doing so is almost always a bad practice.

This code will yield the DOM element with YOUR_BUTTON_CLASS which contains text 'Customer'. Is that what you're looking for?

cy.get('.YOUR_BUTTON_CLASS').contains('Customer');

Here the documentation for .contains cypress command.

cypress-file-upload lacks explicit support for .jar extension, this is the current list of supported extensions

const FILE_EXTENSION = Object.freeze({
  JSON: 'json',
  JS: 'js',
  COFFEE: 'coffee',
  HTML: 'html',
  TXT: 'txt',
  CSV: 'csv',
  PNG: 'png',
  JPG: 'jpg',
  JPEG: 'jpeg',
  GIF: 'gif',
  TIF: 'tif',
  TIFF: 'tiff',
  ZIP: 'zip',
  PDF: 'pdf',
  VCF: 'vcf',
  SVG: 'svg',
  XLS: 'xls',
  XLSX: 'xlsx',
  DOC: 'doc',
  DOCX: 'docx',
  MP3: 'mp3'
});

The default encoding used is therefore utf8. To explicitly pass in the encoding as an option, you need to use raw mode

cy.fixture('sample.jar', 'binary')
  .then(Cypress.Blob.binaryStringToBlob)
  .then(fileContent => {
    cy.get('[data-cy="dropzone"]').attachFile({
      fileContent,
      filePath: 'sample.jar',
      mimeType: 'application/java-archive',
      encoding: 'binary',
      lastModified: new Date().getTime(),
    },
    { 
      subjectType: 'drag-n-drop', 
      force: true
    });
  });    

Note you need to try both subjectType values, as they trigger different events.

Here's the code that shows which shows which events are triggered with force option

export const EVENTS_BY_SUBJECT_TYPE: Record<Required<HtmlSubjectType>, string[]> = {
  [HtmlSubjectType.input]: ['change'],
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
   */
  [HtmlSubjectType.dragAndDrop]: ['dragstart', 'drag', 'dragenter', 'drop', 'dragleave', 'dragend'],
};

If you still get no action, you will need to manually trigger events, e.g chain .trigger('change') after attachFile(). Ideally you can figure out which events from the app source code.

The workaround given by abramenal is incorrect, this is the part of cypress-file-upload that handles the options parameter. If you pass fixture as a string, encoding is ignored

function getFixtureInfo(fixtureInput) {

  // Normal mode
  // fixture name and options passed separately.
  if (typeof fixtureInput === 'string') {
    return {
      filePath: fixtureInput,
      encoding: '',
      mimeType: '',
      fileName: getFileName(fixtureInput)
    };
  }

  // Raw mode
  // If you pass an object, encoding can be specified
  return {
    filePath: fixtureInput.filePath,
    encoding: fixtureInput.encoding || '',
    mimeType: fixtureInput.mimeType || '',
    fileName: fixtureInput.fileName || getFileName(fixtureInput.filePath),
    fileContent: fixtureInput.fileContent,
    lastModified: fixtureInput.lastModified
  };
}

The commented answer above was the clue I needed, but it needs a couple tweaks (at least as of the version I'm using: v3.1.5). The link has all the info, but the answer should be as follows

cy.type('{selectall}')

Note that it's ".type()" instead of ".text()" and the escape sequence is quoted...