How to use normalizeModuleOptions method in Cypress

This has been asked a few times, and the short answer is to use jQuery, e.g

cy.visit(...)
cy.wait(1000)  // in case the page is initially slow to load

const text = Cypress.$('div').text();
if (text.trim().startsWith('Processing') {
  cy.wait(1000)
  cy.reload()
}

That gets you one reload, but I guess you want to repeat that until 'Success...', for which recursion seems to be the only way to repeat stuff until the right DOM appears.

function waitForText(attempt = 0) {

  if (attempt > 100) {   // choose cutoff point, must have this limiter
    throw 'Failed'
  }

  cy.wait(1000);
  const text = Cypress.$('div').text();
  if (text.trim().startsWith('Processing') {
    cy.reload();
    waitForText(attempt + 1) 
  }
}

cy.visit(...)
waitForText()

Now cy.server is deprecated, you can use cy.intercept instead:

cy.intercept('http://api.company.com/', (req) => {
  req.headers['authorization'] = `token ${token}`
})

More info in the docs.

had the same problem as you. I used a then to push in an array my result instead of assert with a should.
Then assert the result in another then. It worked, but I really feel to hack the Cypress API which isn't made for this, shame.

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

I'm not sure about your Wordpress site, but the following worked for the Material-UI site referenced in Cypress scrolling behaviour on get and relative positionning

.scrollIntoView() offset should be negative

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})
}) 

use native scrollIntoView

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  cy.contains('Elvis Presley')
    .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom
})

make header transparent

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.get('header').invoke('css', 'opacity', '0')
  cy.contains('Elvis Presley').scrollIntoView()
})

using .scrollTo()

This command applies to the scroll container, not the element you target, so the positioning may not come out correctly every time.

function getScrollParent(node) {
  if (node == null) return null;

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley')
    .then($el => {
      const scrollParent = getScrollParent($el[0])
      cy.wrap(scrollParent).scrollTo('center')
    })
})

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.

You can make use of the task shown in this question How can I verify if the downloaded file contains name that is dynamic

/cypress/plugins/index.js

const fs = require('fs');

on('task', {
  downloads:  (downloadspath) => {
    return fs.readdirSync(downloadspath)
  }
})

This returns a list of the files in the downloads folder.

Ideally you'd make it easy on yourself, and set the trashAssetsBeforeRuns configuration. That way, the array will only contain the one file and there's no need to compare arrays before and after the download.

(Just noticed you have a task for it).

You can use jquery via Cypress.$ to check if any exist.

const listItemTitle = '[data-cy-component=list-item-title]';
if (Cypress.$(listItemTitle).length > 0) {
  cy.get(listItemTitle).each(($el, index, $list) => {
    cy.wrap($el).then(($span) => {
    const spanText = $span.text();
    cy.log(`index: ` + index + ' ' + spanText);
    });
  });
}

Try this instead:

cy.wrap(null).then(()=>{cy.log(array.length)})