How to use getAllStringMatcherFields method in Cypress

Edit: Since the reference didn`t work I suggest approaching it with an allias

const savedVariableCallback = (variable) =>
    console.log(`Variable saved ${variable}`);

describe(() => {
...
    it("Sample input type", () => {
        cy.fixture("example.json").then(({ email }) => {
            actionsPage
                .selectSampleInput()
                .then((input) => {
                    checkAmountOfElements(input, 1);
                    checkVisiblity(input);
                })
                .type(email)
                .then((input) => {
                    checkIfValue(input, email);

                    let fixValue = "Nice work";
                    savedVariableCallback(fixValue);
                    cy.wrap(fixValue).as('fixValue')
                });
        });
        cy.get('@fixValue')
            .then(fixValue => {
                cy.log(`fixValue is: ${fixValue.value}`);
            })
    });
})

You must set the value to a number not a percent. You should take a look at the element and see what values are valid. Usually there is a min and max attribute on the element.

Notice those attributes on your element

<input id="sum_slider" class="input-range js-inv-calc-input-sum-range js-input-range" type="range" name="investmentsum" min="20000" max="150000" value="20000" step="1000" title="Investitionsbetrag" style="background: -webkit-linear-gradient(left, rgb(255, 196, 0) 0%, rgb(255, 196, 0) 0%, rgb(119, 119, 119) 0%) no-repeat;">

So with your element, the value you set must be between 20000 and 150000. The following should work:

cy.get('input[type=range]')
  .invoke('val', 20001)
  .trigger('change')

I have updated our recipe for static resource loading, see https://github.com/cypress-io/cypress-example-recipes/pull/363

To check if an image has finished loading, the simplest way is to check the image's naturalWidth or naturalHeight property.

// we can wait for the <img> element to appear
// but the image has not been loaded yet.
cy.get('[alt="delayed image"]')
.should('be.visible')
.and(($img) => {
  // "naturalWidth" and "naturalHeight" are set when the image loads
  expect($img[0].naturalWidth).to.be.greaterThan(0)
})

Alternatively, you can use performance entries to confirm that any static resource has finished loading, see the above pull request for the details.

So to generate a random number between min (included) and max (included) you have to use this:

Math.floor(Math.random() * (max - min + 1)) + min

So now your cypress code will be:

cy.get('optionsselector')
  .its('length')
  .then((len) => {
    cy.get('optionsselector')
      .eq(Math.floor(Math.random() * ((len-1) - 0 + 1)) + 0)
      .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);
        });
      });
    });
  });
});

It works for intercepting external network requests,

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
    <script>
      fetch('https://jsonplaceholder.typicode.com/todos/1')
    </script>
  `,
  test: `
  cy.intercept('https://jsonplaceholder.typicode.com/todos/1', req => {
    req.reply((res) => {
      let { body } = res;
      body.newProperty = "new";
      console.log(res.body);
      return body;
    });
  })
  `
}
it('test', () => {
  cy.runExample(test)
})

This logs

{
  completed: false,
  id: 1,
  newProperty: "new",           // added by intercept
  title: "delectus aut autem",
  userId: 1
}

Can you explain the api server and client ports in more detail?

I set up your server, and found it works ok.

The only thing I changed was to add a no-store header to the server response (stops browser seeing status code '304').

Without it every second refresh of the Cypress test cy.intercept() did not trigger. That may actually be fixable in the test by adding a full route matcher to cy.intercept() instead of just the url.

app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store')
  next()
})

app.get("/", (req, res) => {...

I also modified the script in the app to console.log in .then(), otherwise you just get the promise object.

<script>
  fetch('http://localhost:3000/spoons')
    .then(res => res.json())
    .then(res => console.log('app', res))
</script>

This is the spec I used.

it('test', () => {
  cy.intercept('http://localhost:3000/spoons', req => {
    req.reply((res) => {
      let { body } = res;
      body.newProperty = "new";
      console.log('intercept', res.body);
      return body;
    });
  })
  cy.visit('../app/intercept-mod-response-local-server-2.html')
})

I see your problem, and I'm not sure why your "fix" worked, haha.

You need to start the cy.intercept() before the click, like this:

cy.intercept('**/pragma**').as('getPragmaDocuments');
cy.get('[data-test=invoices]').click();
cy.wait('@getPragmaDocuments');

Using dataTransfer const, we can get what we need to achieve;

describe("Main Page", () => {
  const dataTransfer = new DataTransfer;
  it("Drag & Drop elements", () => {
      cy.get('.schedule-movie-list > .schedule-movie-list__item')
        .first()
        .trigger('dragstart', { dataTransfer });

      cy.get(schedulerPerformancePanel)
        .first()
        .trigger('drop', { dataTransfer })
        .wait(3000);

Looks like only one param is handled. But you can always pass in an object with the vars as properties.

 on("task", {
    async "rename"({var1, var2, var2}) {

 }

and in the .spec call it as

cy.task('rename', {var1: 'val1', var2:'val2', var3: 'val3'}, ()=>{
            console.log('renamed');
       })