Error: Unsupported image type thrown

[fabianschmider123]

Environment:

• Node.js version: latest
• NPM version: latest
• Browser name and version: Chrome latest
• Platform name and version: Windows 10
• WebdriverIO version: latest
• wdio-image-comparison-service version: latest

Config of WebdriverIO + wdio-image-comparison-service

['image-comparison',
        {
            formatImageName: '{tag}-{logName}-{width}x{height}',
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            isHybridApp: true,
            debug: true,
            tabbableOptions:{
                circle:{
                    size: 18,
                    fontSize: 18,
                },
                line:{
                    color: '#ff221a',
                    width: 3,
                },
            }
        }]

Describe the bug If I take a picture with await expect(await browser.checkElement(await $('[id="root"]'), '10_1', {})).toEqual(0);
the error comes up: Error: Unsupported image type thrown

I found this also in https://github.com/wswebcreation/webdriver-image-comparison/issues/15, but there was no solution.

Log Error: Unsupported image type thrown

Does anyone else have this issue? Could I change the image type? The type is choosen by WDIO image-copmarison-service automatically?

Thank you, BR !

[wswebcreation]

Hi @fabianschmider123

can you provide a reproducible example, all my tests are passing

[fabianschmider123]

Hi @wswebcreation , yes I forgot, f.e. with component tesing on storybook:

await browser.url(https://wordpress.github.io/gutenberg/?path=/story/components-experimental-alignmentmatrixcontrol--default); await browser.pause('1000'); await expect(await browser.checkElement(await $('[id="root"]'), 'abc', {})).toEqual(0);

[wswebcreation]

Hi @fabianschmider123

Sorry for the late response, didn't had time to sit for this.

The reason why it fails is because the element doesn't have a height, see screenshot

I'll try to fix this in my module with an error message like this

error: "Cannot take screenshot with 0 height."

[wswebcreation]

Will be fixed by https://github.com/wswebcreation/webdriver-image-comparison/pull/110

Will now throw this error

Error: The element, with selector "$([id="root"])",is not visible. The dimensions are 1366x0
    at /Users/wimselles/Git/webdriver-image-comparison/lib/methods/rectangles.ts:45:11
    at step (/Users/wimselles/Git/webdriver-image-comparison/build/methods/rectangles.js:33:23)
    at Object.next (/Users/wimselles/Git/webdriver-image-comparison/build/methods/rectangles.js:14:53)
    at fulfilled (/Users/wimselles/Git/webdriver-image-comparison/build/methods/rectangles.js:5:58)

Will release a new version in a few days

[fabianschmider123]

Hi @wswebcreation , thank you !

One question, how could I get this update in the WDIO project ? With the following command I dont get the update: "npm install wdio-image-comparison-service"

Is there a way to get the update from this service ?

[wswebcreation]

I'm still working on the core and haven't released the fixes yet. When I have you need to increase the version number of this package.