simonsmith/cypress-image-snapshot

Matching image snapshot fails with cy.screenshot() failed because it requires a DOM element

simonsmith opened this issue · 1 comments

Discussed in #40

Originally posted by Fastova November 24, 2023
Hi guys, thank you for your great tool!

I'm facing a problem currently, which I can't overgo. Could you please advise, if I'm missing smth?

I"ve installed a plugin,
configured it and added a command to cypress.config

import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';

addMatchImageSnapshotPlugin(on);

Added types for the plugin in ts.config:
@simonsmith/cypress-image-snapshot/types

In my test the command is available, it runs fine:

cy.matchImageSnapshot('snapshot', {
        failureThreshold: 0.4,
        blur: 10,
        capture: 'viewport',
        diffFilenameExtension: '.wrong',
      });

However it fails with no DOM element:

get #el-id
wrap<div#el-id>
taskMatching image snapshot, Object{12}
screenshotstatistic-card, Object{12}

CypressError
cy.screenshot() failed because it requires a DOM element.

The subject received was:
> null

The previous command that ran was:
> cy.task()

All 3 subject validations failed on this subject.

Am I doing smth wrong?
Regular cy.screenshot() works and saves the screenshot.

@Fastova I'm afraid I can't reproduce this. I've added tests to this repo to validate that it can work with and without a subject and it seems fine:

https://github.com/simonsmith/cypress-image-snapshot/blob/master/cypress/e2e/matchImageSnapshot.cy.ts#L6-L14

Perhaps you can provide a valid reproduction and then I can reopen the issue