How to use this.initializePlugins method in Cypress

To answer your original question, the cypress.env.json file needs to be placed inside the root of your project, right next to the cypress.json file.

By creating a separate cypress.env.json file you're able to access nested values, like so:

//cypress.env.js
{
    "user": {
        "username": "Jane",
        "password": "SuperPassword",
        "someOtherData": "veryImportantData"
    }
}

and then

//somewhere in myCypressTest.spec.ts
Cypress.env("user").username      //returns "Jane"
Cypress.env("user").password      //returns "SuperPassword"
Cypress.env("user").someOtherData //returns "veryImportantData"

It's not really documented accurately anywhere unfortunately. I didn't need to change any paths, just moved the cypress.env.json outside the Cypress folder where I had originally placed it, and it started working.

While investigating to post the question, I came up with a simple solution to this problem. The subject is an object which has a selector, so you can use that selector with cy.get(subject.selector) to get the Dom Element:

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

I think this is not a lot of clear and more people may have this issue, so I leave my solution here.

You can achieve this with a custom command. You said you tried one and it didn't work, but I am doing something similar successfully in my tests.

Cypress.Commands.add("check403", () => {
  cy.get('[data-qa="http-error.section"]')
    .should('exist')
    .should('contain', '403'); // I changed this - you didn't mention that it
      // didn't work, but it would have been returning an element, not asserting
});

The Cypress log is saying you have a .click() two lines above the scrollIntoView(), but it is not in the posted test code.

You should split the long command after that first click, it is most likely causing the re-render.

Whatever you selected above click #1 should be selected again after it.

I can't tell what the context is, only a mention of DevExtreme. If you provide more information about the control (select, input, dropdown) it would be more useful.

Also the correct check for attachment is isAttached() not visible or exist.

.then(($el) => {
  expect(Cypress.dom.isAttached($el).to.eq(true)
})

You can use addContext. In cypress/support/commands.js you have to put this code:

import addContext from 'mochawesome/addContext';
Cypress.Commands.add('addContext', (context) => {
  cy.once('test:after:run', (test) => addContext({ test }, context));
});

After that you can use the command cy.adContext in your test:

cy.get('p').invoke('text').then(($text) => {
  cy.addContext($text);
});

I think the step .invoke('attr', 'href') is just returning the first, see .attr()

Get the value of an attribute for the first element in the set of matched elements

So, maybe

cy.get('[foo="bar"] a')
  .then($els => {
    const hrefs = [...$els].map(el => el.getAttribute('href'))
    cy.writeFile('./cypress/downloads/results.txt', hrefs)
  })

Tracking through the error in the console, it's clear that Cypress is not handling the export const getInternationals construct correctly, but cannot tell why at a glance.

NOTE: re-basing the import doesn't work, left for continuity of discussion

You can dodge the problem by spying like this in your test

const spyBase = {
  getInternationals: internationals.getInternationals
}
cy.spy(spyBase, "getInternationals");

expect(spyBase.getInternationals).to.be.called;

If you can alter the source code, add a default export to the module

export const getInternationals = ...

export default {
  getInternationals
}

and import it like so

import internationals from "../../../src/api/Internationals";

You have to use then() instead of should() -

cy.get('p.text-lg').invoke('text').then((text) => {
    var splitText = text.split(' ')[5]
    expect(splitText).to.equal(291)
})

If the pattern is consistent, i.e the parent <td> contains two divs and at least one of those divs should have the search term, then work with the parent.

cy.get('[data-cy="person-name"]').should('be.visible')
  .each(($item) => {
    cy.wrap($item)
      .parent()
      .should('contain', 'SearchtermF')  // checks all children of <td>
  })
})

You may just be able to get the cells directly if there are no others on the page

cy.get('td').should('be.visible')
  .each(($td) => {
    cy.wrap($td)
      .should('contain', 'SearchtermF')  // checks all children of <td>
  })
})