Difference in state of checkbox or radio button not being detected as a mismatch

[ecastor]

The page I am testing has a check box. On my base image the checkbox is ticked, then on my script I unticked the checkbox then executed a visual test. The problem is it passed and it wasn't able to detect the difference in the checkbox.

I am sure that my folder configuration is correct, since I tried changing a large chunk of elements in the page and it detects the mismatch on it.

I am currently using CodeceptJS - Playwright and I used ResemblerJS as a plugin for my visual testing.

Versions:

"codeceptjs": "^3.4.1"
"codeceptjs-resemblehelper": "^1.9.7"

codecept.conf.js

helpers: {
   ResembleHelper: {
      require: "codeceptjs-resemblehelper",
      screenshotFolder: "./output/screenshots",
      baseFolder: "./visual-test/base/",
      diffFolder: "./visual-test/diff/",
      prepareBaseImage: false
    }
}

script.js

Scenario("Navigate to page", ({ I }) => {
  I.amOnPage("https://formstone.it/components/checkbox/");
  I.wait(5);
  I.saveScreenshot("VT-Checkbox.png");
  I.seeVisualDiff("VT-Checkbox.png", { prepareBaseImage: true, tolerance: 1 });

  I.click("//input[@id='checkbox-1']/parent::div");
  I.click("//input[@id='radio-2']/parent::div")
  I.saveScreenshot("VT-Checkbox.png");
  I.seeVisualDiff("VT-Checkbox.png", { prepareBaseImage: false, tolerance: 1 });
});