webdriverio/visual-testing

What is the current requirements for this library to function properly ?

mbilbiesi opened this issue · 1 comments

Pre-check

Describe the improvement

I'd like to report

  • Unclear documentation
  • A typo
  • Missing documentation
  • Other

Description of the improvement / report

I installed the library but it does not work as I am getting errors that methods are not found, maybe. we need to clarify what is the requirements required for this tool to work. as expected.

such as required versions , machine specs .... etc

Hi @mbilbiesi

You are right, I haven't done this and I'll try to update the docs for the coming release. Here are some min deps:

  • latest NodeJS, atm LTS is 20
  • "Latest" version of WebdriverIO
  • this module relies on canvas which is a canvas implementation for NodeJS. It relies on Cairo.

Canvas
The canvas module can already have precompiled packages for the NodeJS environment that you use, which will be downloaded during your project's npm install. If it can't find a "matching" canvas module it will build it on the fly. To do so it needs to have some dependencies, which can be found here.
If you don't have these dependencies installed you might get an error like this

Error logs

Simple test

npm i -g canvas

Logs

npm ERR! code 1
npm ERR! path /Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/Users/wimselles/.nvm/versions/node/v18.19.0/bin/node /Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using node-pre-gyp@1.0.11
npm ERR! node-pre-gyp info using node@18.19.0 | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.19.0 (node-v108 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@10.0.1
npm ERR! gyp info using node@18.19.0 | darwin | arm64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@10.0.1
npm ERR! gyp info using node@18.19.0 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.6 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3"
npm ERR! gyp info spawn /Applications/Xcode.app/Contents/Developer/usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wimselles/Library/Caches/node-gyp/18.19.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/wimselles/Library/Caches/node-gyp/18.19.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/wimselles/Library/Caches/node-gyp/18.19.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.<anonymous> (/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:517:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:292:12)
npm ERR! gyp ERR! System Darwin 23.2.0
npm ERR! gyp ERR! command "/Users/wimselles/.nvm/versions/node/v18.19.0/bin/node" "/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas
npm ERR! gyp ERR! node -v v18.19.0
npm ERR! gyp ERR! node-gyp -v v10.0.1
npm ERR! gyp ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/wimselles/.nvm/versions/node/v18.19.0/bin/node /Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:517:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:303:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.2.0
npm ERR! node-pre-gyp ERR! command "/Users/wimselles/.nvm/versions/node/v18.19.0/bin/node" "/Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/wimselles/.nvm/versions/node/v18.19.0/lib/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.19.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /Users/wimselles/.npm/_logs/2023-12-16T07_28_20_388Z-debug-0.log

I'm using a mac, by installing the following dependencies

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

I was able to install it

npm i -g canvas

added 64 packages in 10s

6 packages are looking for funding
  run `npm fund` for details