How to use projectCt.initializeConfig method in Cypress

1. add @istanbuljs/nyc-config-typescript to your devDependencies

2. babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['babel-plugin-istanbul', {
      extends: '@istanbuljs/nyc-config-typescript',
      extension: ['.ts', '.tsx', '.js', '.vue']
    }]
  ]
}

3. delete the nyc.config.js file

4. delete node_modules/.cache

5. restart your server

Convert the for loop to an .each(). Using .within() on the event will allow internal get commands to be specific to the event, and eliminate the need to check index values.

cy.get("[data-testid='events']").each($event=> { 
  cy.wrap($event).within(() => {
    cy.get("[data-testid='event-status']").each($status => {
      if (isEventActive($status)) {
        cy.get("[data-testid='event-name']").should("have.text", "some value");
      }) else {
        cy.get("[data-testid='event-name']").should("not.exist")
      })
    })
  })
});

Maybe this will also work. Uses closure to get the two inner elements ($status and $name) into a ternary expression, and uses .should("satisfy", callbackFn) to do an either/or check.

cy.get("[data-testid='events']").each($event => { 
  cy.wrap($event).find("[data-testid='event-status']").then($status => {
    cy.wrap($event).find("[data-testid='event-name']")
      .should("satisfy", $name => isEventActive($status)  
        ? $name.text() === "some value"
        : $name.length === 0;
      );
    })
  })
});

See the Cypress documentation:

If your site embeds an <iframe> that is a cross-origin frame, Cypress will not be able to automate or communicate with this <iframe>.

Examples of uses for cross-origin iframes

• Embedding a Vimeo or YouTube video.
• Displaying a credit card form from Stripe or Braintree.
• Displaying an embedded login form from Auth0.
• Showing comments from Disqus.

It's actually possible for Cypress to accommodate these situations the same way Selenium does, but you will never have native access to these iframes from inside of Cypress.

As a workaround, you may be able to use window.postMessage to directly communicate with these iframes and control them (if the 3rd party iframe supports it).

Other than that, you'll have to wait for us to implement APIs to support this (check our open issue), or you can disable web security.

As far as I know, this would be the "Cypress" way to access data stored in a json file.

ref: https://docs.cypress.io/api/commands/fixture.html#Accessing-Fixture-Data

cy.fixture('user').then((user)  => {
    var name = user.name
    var pass = user.password
})

Where 'user' is /fixtures/user.json

{
    "name": "username",
    "password": "password1234"
}

You have to preserve your cookies in beforeEach() to make sure that you stay logged in, in all it() blocks. You can read more in cypress docs.

describe('Dashboard', () => {
  before(() => {
    // log in only once before any of the tests run.
    // your app will likely set some sort of session cookie.
    // you'll need to know the name of the cookie(s), which you can find
    // in your Resources -> Cookies panel in the Chrome Dev Tools.
    cy.login()
  })

  beforeEach(() => {
    // before each test, we can automatically preserve the
    // 'session_id' and 'remember_token' cookies. this means they
    // will not be cleared before the NEXT test starts.
    //
    // the name of your cookies will likely be different
    // this is an example
    Cypress.Cookies.preserveOnce('session_id', 'remember_token')
  })

  it('displays stats', () => {
    // ...
  })

  it('can do something', () => {
    // ...
  })

  it('opens a modal', () => {
    // ...
  })
})

In my case I have to show tooltip while hovering over a button. It is working for me. I am verifying colors, you can edit it according to your requirements. My code is as follow:

describe('color', () => {
  it('should have correct background color', () => {
    cy.get('[data-cy="button"]').realHover();
    cy.get('.mat-tooltip')
     .should('have.css', 'background-color', 'rgb(111, 111, 111)');

  });

  it('should have correct text color', () => {
    cy.get('[data-cy="button"]').realHover();
    cy.get('.mat-tooltip')
    .should('have.css', 'color', 'rgb(255, 255, 255)');
  });
});

The problem is in synchronization: The function invoke returns a Promise, which is executed in async manner. The code cy.log(pin) is executed just right after the invoke is called and before the promise is resolved.

Try this:

cy.get('.pin-field').invoke('text').then(pin => {
    cy.log(pin);  
})

Or you can simulate synchronous behavior with async/await:

async function login(cy) {
    const pin = await cy.get('.pin-field').invoke('text'); // call it synchron
    cy.log(pin); // this code executes when 'invoke` returned
}

Don't forget, the code with await must be closed in an async function.

You have to use cy.wrap()

cy.get("tbody > tr")
  .first()
  .then((el) => {
    cy.wrap(el).find("td.edit > button").click();
  });

I'm fairly new to Cypress but I suggest you try following:

1) The most likely issue/solution - Is that "secondary file" even executed? I remember having some issues when calling my helper functions defined in cypress/support/commands.js file. Is commands.js the "secondary file" you mentioned? Seems you're calling it with register.getClearObjectsButton(). What is register? If you put getClearObjectsButton method into cypress/support/commands.js file, you can then call it in all your test files with cy.getClearObjectsButton()

2) If it is executed, try to execute click in that secondary file as well. Does it work?

3) Also, if you're sure your method is executed, I guess you've expected that yield of cypress .get function stays "active" but it probably isn't the case. Try to save it in a variable and return from your getClearObjectsButton method.