为什么Cypress会跳过某些命令

Question

​

​

下面的测试是扫描和认证二维码，并使用接收到的认证令牌。将跳过最后两个命令(.type)。有人知道为什么吗？我已经被困在这里一段时间了。

getUrlVars是一个助手函数，它返回我用来生成令牌的字符串。我

谢谢

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

Answer 1

你能试试这个吗？问题可能是因为javascript的异步性质，这是首先执行的：

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

然后是：

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

因此，令牌是未定义的。我们必须使用then()来告诉cypress同步运行所有内容。

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

Answer 2

这解决了我的问题。感谢大家的帮助。

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