How to use makeWebpackConfig method in Cypress

It's because the clipboardy package has type: "module" in it's 'package.json'.

This tells anything that uses the package that you should use import not require to load the package.

Use dynamic imports, as hinted in the error message

Instead change the require of index.js in ... to a dynamic import()

const clipboard = import('clipboardy')

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
  };
}

I have to face this today. If you are getting a raw body response (string) you have to get the link in this way:

            const links = body.split("href=http://my.url.com");
            var activation_link = links[0].match(/\bhttp?:\/\/\S+/);
            activation_link= activation_link[0].replace('"','')
            cy.visit(activation_link)

The basic problem here is that Cypress commands run asynchronously from the test code that creates them. You can see this if you put console logs into your code,

var myID;
cy.get('#MYID')
  .then(($txt) => {
    myID=  $txt.text();
    console.log('1', myID);
  })
 .should('not.equal', null); 

console.log('2', myID);

This prints out

2 undefined
1 myText

You can use an alias to overcome this and pass a value down the command chain.

See this section of the docs which shows a similar pattern of code you are using in the DO NOT USE THIS example.

BUT aliases get cleared down between tests, so you should set up a beforeEach() to obtain a new copy of the required ID for each test.

There's another problem with the way you obtain the text value.

Without a return statement the .then() command passes on whatever subject it receives to the next command. See then- Yields

Additionally, the result of the last Cypress command in the callback function will be yielded as the new subject and flow into the next command if there is no return.

So the .should('not.equal', null) is testing that the element isn't null, not that the text is not null.

A better way is to .invoke('text') which is equivalent to $txt.text() and yields the text value to the .should().

Also .should('not.equal', null) won't test that the content is present, since an empty element returns an empty string from element.text(). Use .should('not.equal', '') instead.

Saving via an Alias

describe('grabbing ID for use in multiple tests', () => {

  beforeEach(() => {
    cy.visit('my-page-1.html')
    cy.get('#MYID')
      .invoke('text')
      .as('mySavedID')
  })

  it('ID should not be null', () => {

    cy.get('@mySavedID')
      .should('not.equal', '')

  })

  it('ID should be found in table', () => {

    cy.visit('app/navigate-to-new-page-2.html');
    cy.get('@mySavedID').then(myID => {
      cy.get('#myTable').find('td').contains(myID);
    })

  })
})

Saving by queuing the setting of the variable

The alias pattern may not be ideal if visiting page #1 is time consuming.

In this case, you can save the variable via a custom command. The difference is that the code you had within the .then() is moved into a command which is queued, so the async problem does not occur.

describe('grabbing ID for use in multiple tests', () => {

  let savedVariable;

  Cypress.Commands.add("saveVariable", {prevSubject: true}, (value) => {
    savedVariable = value;
  });

  it('id should not be null', () => {

    cy.visit('my-page-1')
    cy.get('#someId')
      .invoke('text')
      .should('not.equal', '')
      .saveVariable()

    // OR test the variable separately like this

    cy.wrap(savedVariable)
      .should('not.equal', '')
  })

  it('id should be found in table', () => {

    cy.visit('my-page-2');
    cy.get('#myTable').find('td').contains(savedVariable);

  })
})

NOTE
The above is valid if the two pages are in the same domain, e.g two pages of a SPA. Otherwise, the test runner resets itself when a new domain is encountered, and all javascript variables are lost.

If you assign the parent element handle to a variable, any of the findBy* functions (or locator) will search only in the parent element. An example below where the parent is a div, the child is a button, and we use .locator() to find the elements.

test('foo', async ({ page }) => {
  await page.goto('/foo');
  const parent = await page.locator('div');
  const child = await parent.locator('button');
});

I would suggest the test might look like this

cy.get('#cars_list option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

OR

cy.get('#cars_list').children('option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

OR

cy.get('#cars_list').find('option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

Selecting multiple child elements with cy.get(), then unwrapping them with [...options], mapping to their value with .map(o => o.value) and using a deep equal to compare arrays.

I have not tested this, so the code may need some tweaking.

Cypress clears the alias between tests.

Aliases are reset before each test

Note: all aliases are reset before each test. A common user mistake is to create aliases using the before hook. Such aliases work in the first test only!

Remove the (unnecessary) it() blocks. Why do you have them there?

In similar situation you can use cy.route() which grab the network request and wait for it. In your case, the route will grab the n/w req and wait for the "Find me" request to get processed completely so that you can proceed with the next filter action.

Steps: Open the chrome console, navigate to network tab, filter for XHR request. Now click on the ''Find me'' button in you page. You can see usually a GET request, for example if the request looks as follows, https://example.com.au/v1/api/listview?page=2 Please copy the url from /v1/api/... and add into the url value of cy.route() as below.

note: On click on Find me button, see its a GET or POST request, usually it will be GET request, check if the url has any encoded value, if it has encoded value you have to use decodeURIComponent() and the pass the url inside as follows >> url:decodeURIComponent('**/v1/api/listview?page=2**'),

beforeEach(()=>{
    cy.server();
    cy.route({
     method: 'GET',
     url:'**/v1/api/listview?page=2**',
     delay: 2000
    }).as('getLoadNewView');
  })

    it('Route waiting for loading the new view for filter action', () => {
      cy.get('[data-cy="search"][data-component="input_box"]').type('Find me{enter}')
      cy.get('[data-name="Find me"]').contains('Find me').click()// Should load a new view 
      cy.wait('@getLoadNewView');
      cy.get('[data-cy = "filter"]').click();
      })

Your first attempt was correct. However, it appears that blacking out an SVG element is something Cypress doesn't currently support.

I tried your first approach and stepped through the Cypress code.

cy.screenshot({ blackout: ['svg'] });

• In addBlackout() (source), Cypress finds all SVG elements.
• In addBlackoutForElement() (source), Cypress calculates the dimensions for each SVG element.
• In getElementDimensions() (source), Cypress attempts to read offsetWidth/offsetHeight directly off the SVGElement.

These return undefined, as these properties are only valid for HTMLElement, not SVGElement. Cypress does some math and ends up drawing the blackout with NaN width and height.

Cypress would need to change getElementDimensions() to support SVG as well.