Why does Cypress skip certain commands

Question

The below test is supposed to scan and authenticate a QR code and use the authentication token received. The last two command(.type) is being skipped. Does anyone have an idea why? I have been stuck here for some time already.

getUrlVars is a helper function returning the string I use to generate the token. I

Thanks


        /// <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"],
            });
            const token = totp.generate();
            console.log(token);
            cy.findByLabelText("Jednorázový kód").type(token);
          });
        });
      });
    });

I added a partial screenshot of the runner logs, I can't disclose more. — honzaB, Dec 16 '20 at 17:18
The code you have posted does not match the partial bit of code in the screenshot. In the screenshot the `console.log(token)` is nested inside a block. — , Dec 16 '20 at 19:03
Moving `cy.findByLabelText("Jednorázový kód").type(token);` inside that block should solve your problem (presuming you have verified `token` in the console). — , Dec 16 '20 at 19:04

score 0 · Answer 1 · answered Dec 16 '20 at 18:00

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);
        });
      });
    });
  });
});

score 0 · Answer 2 · answered Dec 17 '20 at 17:43

This fixed my problem. Thanks everyone for trying to help.

     cy.findAllByAltText("2FA QR kód").then(async function ($img) {
            await qrcode.scan($img.prop("src")).then((result) => {
              const totp = new OTPAuth.TOTP({
                algorithm: "SHA1",
                digits: 6,
                period: 30,
                secret: getUrlVars(result.data)["secret"],
              });
              token = totp.generate();
            });
    
            cy.findByLabelText("Jednorázový kód").type(token);
            cy.findByRole("button", { name: "Uložit" }).click({
              force: true,
            });
            cy.findByText("Zařízení bylo úspěšně nastaveno.").should("be.visible");
          });

Why does Cypress skip certain commands

2 Answers2