How to use setupMarionette method in Cypress

You will need to enable search inside the shadow-root(s).

Add the option to the test config, or global config (cypress.config.js).

it('tests inside shadow DOM', {includeShadowDom: true}, () => {

  cy.get('ion-card:nth-child(3) input[formControlName="startDate"]')
    .type(myDate)

})

I think I've managed to solve the issue you're having

Rather than using debugger, you can use cy.debug(). But for it to work, you NEED to have your debugger/console open when running the test.

Check out this page for more info: https://docs.cypress.io/api/commands/debug.html

I guess you have to understand that Cypress commands run asynchronously from the javascript in the test.

Move the .type() inside the .then() so it happens after you modify the value

let bankBranch = 'Base Data';

cy.get("#bankBranch").then($el => {
  bankBranch = bankBranch.replace(/\s+/g, '+');
  cy.wrap($el).type(bankBranch)
})

There are other refactors, I recommend playing around.

// replace the space early
let bankBranch = 'Base Data'.replace(/\s+/g, '+')

cy.get("#bankBranch")
  .type(bankBranch)

let bankBranch = 'Base Data';

cy.get("#bankBranch").then($el => {
  bankBranch = bankBranch.replace(/\s+/g, '+');
  // pass on the element
  return $el
}).then($el => {
  // deferring the .type() command
  cy.wrap($el).type(bankBranch)
})

You can do something like:

cy.get('table > tbody > tr:nth-child(1) > td:nth-child(1)', {
    timeout: 15000
}).invoke('text').then((text) => {
    expect(text.length).to.be.at.least(5)
})

Use cy.request rather than fetch.

https://docs.cypress.io/api/commands/request

cy.request({yourUri}).as("response"); // This takes care of the async task. 
 
cy.get("@response").should((response) => { 
   // Carry on with the rest of your test
   cy.get("some selector");

});

(edited and working answer)

Try this:

cy.get('[type="radio"].XyzTypeRadio').check("2")

Or if you don't care which radio button is checked, you could check the first one:

cy.get('[type="radio"].XyzTypeRadio').first().check()

Takeaways:

• The first() function does not understand selectors, that's why we need to pass our selector ".XyzTypeRadio" to get().
• The check() function expects the value or values as its argument, so instead of "value=2" we simply give it "2".
• The check() function does a bit of selecting, ie the result of everything before calling check("2") is a list of inputs and the check("2") function searches and selects the one whose value is "2".
• We could use first().check() if we want to check the first radio button, or we could remove first() and check a radio button with a specific value using check("2").

cy.get(`[aria-label="August 12, 2020"]`).click()

Can you try this? May be the problem is because of javascript asynchronous nature, this is executed first:

const token = totp.generate();
console.log(token);
cy.findByLabelText("Jednorázový kód").type(token);

followed by:

const totp = new OTPAuth.TOTP({
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: getUrlVars(result.data)["secret"],
});

Hence token is coming as not defined. We have to use then() to basically tell cypress to run everything synchronously.

/// <reference types='Cypress' />
import {
  Decoder
} from "@nuintun/qrcode";
const qrcode = new Decoder();
const OTPAuth = require("otpauth");

import Navbar from "../page-objects/components/Navbar";
import UserProfileNav from "../page-objects/components/UserProfileNav";
import BasePage from "../page-objects/pages/BasePage";
import LoginPage from "../page-objects/pages/LoginPage";
import RegistrationPage from "../page-objects/pages/RegistrationPage";
import {
  createEmail,
  getUrlVars
} from "../utils/utils";

describe("test", () => {
  it("ttest", () => {
    cy.visit("/");
    LoginPage.login("test_1608122224686.kkvbvvks@mailosaur.io", "P@ssword1");
    Navbar.navigateToProfile();
    UserProfileNav.twoStepVerificationTab();

    cy.findAllByAltText("2FA QR kód").then(function($img) {
      qrcode.scan($img.prop("src")).then((result) => {
        const totp = new OTPAuth.TOTP({
          algorithm: "SHA1",
          digits: 6,
          period: 30,
          secret: getUrlVars(result.data)["secret"],
        }).then((totp) => {
          const token = totp.generate();
          console.log(token);
          cy.findByLabelText("Jednorázový kód").type(token);
        });
      });
    });
  });
});

Take a look at Deal with window.location.replace. The approach is to rename window.location in the source, before the page is loaded.

How well this works depends on the structure of your app. If you post some details, I can look at giving a more specific example.

it('replaces', () => {

  cy.on('window:before:load', (win) => {
    win.__location = {                           // set up the stub
      replace: cy.stub().as('replace')
    }
  })

  cy.intercept('GET', 'index.html', (req) => {   // catch the page as it loads
    req.continue(res => {
      res.body = res.body.replaceAll(
        'window.location.replace', 'window.__location.replace')
    })
  }).as('index')

  cy.visit('index.html')
  cy.wait('@index')

  cy.contains('h1', 'First page')
  cy.get('@replace').should('have.been.calledOnceWith', 'https://www.cypress.io')
})