How to use getNextJsBaseWebpackConfig method in Cypress

This answer provides most of the information needed (thanks CRayen for pointing me to another question (which was a duplicate of another)).

Basically you can put a .eslintrc file into any subfolder in which you want to override rules. Then you need to add a section like the one in the answer:

"overrides": [{
  "files": [ "*.spec.js" ],
  "rules": {
    "no-unused-expressions": 0
  }
}]

where you explicitly turn off the rules you don't want to be used to check the files listed by setting them to 0.

A few changes should achieve what you are looking for. Here's a breakdown of steps taken to solve this question...

First off, instead of stubbing out MyDataTransfer, just construct a new DataTransfer object, which comes packed with the necessary properties and methods needed for drag events:

const dataTransfer = new DataTransfer;

Next, it's best to trigger native drop and drag events, as opposed to draggable and dropzone. Selenium Easy is listening for dragstart, dragend, and drop (you can see this inside of their drag-and-drop-demo.js source file). Put these inside of a helper function, to be called later inside the test:

function dndIt() {
  cy.get('#todrag span:first-of-type')
    .trigger('dragstart', { dataTransfer });

  cy.get('#mydropzone')
    .trigger('drop', { dataTransfer });

  cy.get('#todrag span:first-of-type')
    .trigger('dragend');               // <-- seleniumeasy listens for this...
}                                      // otherwise, draggables are copied.    

A beforeEach block is helpful for setting the viewport and visiting the application:

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});

And finally, the test block calls the helper function, and asserts that the item was dragged and dropped:

it('Check whether the drag and drop of an item is working fine', function() {
  dndIt();

  cy.get('#droppedlist')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

Here's the solution in its entirety:

describe('Verify the drag and drop test', function() {
  const dataTransfer = new DataTransfer;

  function dndIt() {
    cy.get('#todrag span:first-of-type')
      .trigger('dragstart', { dataTransfer });

    cy.get('#mydropzone')
      .trigger('drop', { dataTransfer });

    cy.get('#todrag span:first-of-type')
      .trigger('dragend');               // <-- seleniumeasy listens for this...
  }                                      // if left out, draggables are copied.

  beforeEach(function() {
    cy.viewport(1000, 600);
    cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
  });

  it('Check whether the drag and drop of an item is working fine', function() {
    dndIt();

    cy.get('#droppedlist')
      .should(($el) => {
        expect($el.children()).to.have.lengthOf(1)
      });
  });
});

The drag_n_drop_spec.js provided in the cypress-example-recipes repo was a helpful resource.

Using the Plaid demo page as a test app and following the steps in Working with iframes in Cypress, I managed to get a consistently working test.

From the blog, I used this sequence to ensure the iframe body has fully loaded

iframe -> body -> should.not.be.empty

The page loads a placeholder first while is waits for a GET request to complete, so just getting a loaded iframe body is not sufficient.

placeholder

<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>

We need to wait for the "Continue" button, which takes a bit of time to show so give it a long timeout.

Using .contains('button', 'Continue', { timeout: 10000 }) actually returned two button, although there is only one visible.

I changed the button selector to use an id and all works consistently.

The test

cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');

cy.contains('button', 'Launch Demo').click()

cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {

  cy.wrap(iframe)                   // from Cypress blog ref above
  .its('0.contentDocument.body')
  .should('not.be.empty')           // ensure the iframe body is loaded
  .as('iframeBody')                 // save for further commands within iframe.body

  //.contains('button', 'Continue', { timeout: 10000 })     // returns 2 buttons!

  .find('button#aut-continue-button', { timeout: 10000 })   // this is the best selector

  .click()

  cy.get('@iframeBody')
    .contains('h1', 'Select your bank')  // confirm the result of the click()


})

In Puppeteer you have the option to talk to DevTools and throttling the page with CDPSession class, consider the following example:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  // Create a new tab
  const page = await browser.newPage()

  // Connect to Chrome DevTools
  const client = await page.target().createCDPSession()

  // Set throttling property
  await client.send('Network.emulateNetworkConditions', {
    'offline': true,
    'downloadThroughput': 200 * 1024 / 8,
    'uploadThroughput': 200 * 1024 / 8,
    'latency': 20
  })

  // Navigate and take a screenshot
  await page.goto('https://sometest.windows.net/home')
  await page.screenshot({path: 'screenshot.png'})
  await browser.close()
})

You can directly use .contains() once the dropdown is in the opened state to select the option. Add {matchCase: false} to disable the check for case sensitivity.

cy.get('.css-g1d714-ValueContainer').trigger("mousedown")
cy.get('.css-g1d714-ValueContainer').trigger("mouseup")
cy.contains('Start', { matchCase: false, timeout: 6000 }).click()

Cypress code is executed asynchronously. It will execute at a different time than your synchronous (read: regular JS) code. The expect from Chai is a synchronous command, so it is executed sequentially after updating your selected variable.

To avoid sync/async issues, you could include your synchronous JS code in the Cypress chain.

let last_selected; // removing from the iterations to avoid any sync/async issues
for (let i = 0; i < 4; i++) {
  cy.wrap(i).then(() => {
    selected.push(i);
    last_selected = selected[selected.length - 1];
  })... // rest of your Cypress commands.
}

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)

That means there's an issue with your cy.visit() command. The page is not being loaded before the test that's why

You should just be able to eliminate the cy.wrap().

uploadexcel() {

  cy.get('#excel')
    .should('be.visible')
    .click({force:true})

  const csvfile = 'TestData_csv.xlsx';
  
  return cy.get('#fsp-fileUpload')   // return last command
    .attachFile(csvfile)    
    .trigger('input')
    // .trigger('change')   // or this trigger
}

Strictly speaking, the return isn't necessary, but may be useful if you want to add a .then() inside the test like this

uploadfile.uploadexcel().then(() => {
  // do something after upload completes
})

so just return the last command to eliminate the nesting in uploadexcel()