chore: add extra UI test

Author: wswebcreation

tests/specs/matcher.spec.ts

@@ -1,4 +1,5 @@
-/// <reference types="@wdio/visual-service" />
+import { readdirSync } from 'node:fs'
+import { join } from 'node:path'
 import { browser, expect } from '@wdio/globals'
 
 describe('@wdio/visual-service matcher', () => {
@@ -36,4 +37,36 @@ describe('@wdio/visual-service matcher', () => {
             ]
         })
     })
+
+    it(`should NOT save actual image when mismatch is within threshold (#1111) for '${browserName}'`, async () => {
+        const tag = 'threshold-test-1111'
+        const actualFolder = join(process.cwd(), '.tmp/actual')
+        const subtitle = await $('.hero__subtitle')
+        const getActualImageCount = () => {
+            try {
+                return readdirSync(actualFolder).filter(f => f.includes(tag)).length
+            } catch {
+                return 0
+            }
+        }
+
+        // 1. Save the original subtitle as baseline
+        await browser.saveElement(subtitle, tag)
+
+        // 2. Manipulate the subtitle to create a small text difference
+        await browser.execute(
+            'arguments[0].innerHTML = "Test Demo Page";',
+            subtitle
+        )
+
+        const beforeCount = getActualImageCount()
+
+        // 3. Run the matcher with a threshold (90%) higher than the expected mismatch
+        await expect(subtitle).toMatchElementSnapshot(tag, 90)
+
+        const afterCount = getActualImageCount()
+
+        // 4. With the fix: no new actual image should be saved when mismatch is within threshold
+        expect(afterCount).toBe(beforeCount)
+    })
 })