cypressqr-code

Is there a way to scan a QR code from a PNG file

I am trying to write a test for scanning a QR code from a PNG file. I followed an explanation from this YouTube tutorial and copied the exact same code, except I changed the name of the PNG file in my tests.

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

import { Decoder } from '@nuintun/qrcode'

it('decodes QR code', () => {
  cy.fixture('frame.png', 'base64')
    .then((base64) => `data:image/png;base64,${base64}`)
    .then((imageSrc) => {
      const qrcode = new Decoder()
      return qrcode.scan(imageSrc)
    })
    .its('data')
    .then(cy.log)
    .should('include', 'cypress.tips')
})

However, while running this code I am getting an error:

TypeError
qrcode.scan is not a function

What am I doing wrong in this code? Is there any way that I can scan a QR code without firstly screenshotting it from a website, since it will not be present on it?

Solution

  • There is in fact a scan() method on qrcode, but it's on the version 3.3.5, which is the latest published by nuintun on Github.

    But if you run yarn add @nuintun/qrcode the version posted there is 4.4.1 which does not have scan().

    If you install 3.3.5 specifically yarn add @nuintun/qrcode@3.3.5, your code works, with the exception of the final .should().

    This is broken because the previous .then(cy.log) is changing the subject, so .should() does not see the data.

    This is my working version

    cy.fixture('qr1.png', 'base64')
  .then((base64) => `data:image/png;base64,${base64}`)
  .then((imageSrc) => {
    const qrcode = new Decoder()
    return qrcode.scan(imageSrc)
  })
  .its('data')
  .then(data => {
    Cypress.log({ displayName: 'qrcode',  message: data })  // use sync logging method
  })
  .should('include', 'http://en.m.wikipedia.org')

    enter image description here

    You can also pass in just the path to the fixture (it must be relative to the node_modules package)

    const qrcode = new Decoder()
const qr = qrcode.scan('../../cypress/fixtures/qr1.png')
cy.wrap(qr)
  .its('data')
  .then(data => {
    Cypress.log({ displayName: 'qrcode',  message: data })
  })
  .should('include', 'http://en.m.wikipedia.org')