使用 Cypress 扫描二维码：需要指导

Question

“我正在 Cypress 中运行一些测试，其中一个步骤是我必须完成注册过程，然后它要求我扫描二维码。为此，我执行以下几行代码来扫描二维码并生成 OTP。”

我正在使用以下库：@nuintun/qrcode

import import {qrcode, decodedQr} from "@nuintun/qrcode";

cy.get('img[alt="QR Code"]').then(async (image) => {
        const src = image.prop('src');
        console.log('Image source:', src);
        const decoded = await qrcode.scan(src);
        const totp = OTPAuth.URI.parse(decoded.data);
        const generateOTP = totp.generate();
        cy.get('input#code').type(generateOTP);
    });

执行测试后出现以下错误： 类型错误：无法读取未定义的属性（读取“扫描”） 在 Context.eval (webpack:///./cypress/e2e/tests/invitation-portal-invitation.cy.js:76:37)。

Answer 1

看看你导入的内容，你会发现它是

undefined

。

import { qrcode } from "@nuintun/qrcode";
console.log(qrcode)   // undefined

如果你去掉大括号，你会发现有一个

Decoder

类，还有一些其他的东西。

import qrcode from "@nuintun/qrcode"
console.log(qrcode)   //   { Decoder, Encoder, ...}

因此，按照文档 - 解码

import { Decoder } from '@nuintun/qrcode';

const qrcode = new Decoder();

qrcode
  .scan('https://nuintun.github.io/qrcode/examples/qrcode.jpg')
  .then(result => {
    console.log(result.data);
  })
  .catch(error => {
    console.error(error);
  });

你大概想要这个

import {Decoder} from "@nuintun/qrcode"
const qrcode = new Decoder();

it('tests my qrcode', () => {
  cy.get('img[alt="QR Code"]').then(image => {
    const src = image.prop('src')
    qrcode.scan(src).then(result => {
      ...

不要在 Cypress 回调中执行

async/await

。也许它有效，但也许 Cypress 会抛出一个错误，因为您从回调内部返回了一个承诺。

保持简单，按照文档使用

.then()

。