[🐛 Bug]: Setup through CLI - npx wdio config --npm-tag latest! error

[juannavalonribas]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

20.11.1

Mode

Standalone Mode

Which capabilities are you using?

No response

What happened?

I just want to setup a new project using the wdio visual service so I just follow the setup on the following video
https://www.youtube.com/watch?v=wQRGpWX3fsk&t=1s

I also tried with node 18 and I had the same ouput as node 20.11.1

What is your expected behavior?

Install the following dependencies should work correctly.

command: 'npm install @wdio/local-runner@latest @wdio/mocha-framework@latest @wdio/spec-reporter@latest wdio-wait-for @testing-library/webdriverio @wdio/visual-service ts-node @wdio/visual-service --save-dev'

How to reproduce the bug.

Run

npm init wdio@latest project-name

Select the following configuration

• ❯ E2E Testing - of Web or Mobile Applications
• ❯ On my local machine
• ❯ Web - web applications in the browser
  -❯◉ Chrome
• ❯ Mocha (https://mochajs.org/)
• ❯ TypeScript (https://www.typescriptlang.org/)
• ❯◉ spec
• ❯◯ wait-for: utilities that provide functionalities to wait for certain conditions till a defined task is complete. && ◯ Testing Library: utilities that encourage good testing practices laid down by dom-testing-library.
• Include visual testing, Y
• ❯◉ visual

Installing packages using npm:
- @wdio/local-runner@latest
- @wdio/mocha-framework@latest
- @wdio/spec-reporter@latest
- wdio-wait-for
- @testing-library/webdriverio
- @wdio/visual-service
- ts-node
- @wdio/visual-service

Relevant log output

npm ERR! code 1
npm ERR! path /Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! SOLINK_MODULE(target) Release/canvas-postbuild.node
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/SvgBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/bmp/BMPParser.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/Backends.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/Canvas.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/closure.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/color.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/Image.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/ImageData.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/init.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/register_font.o
npm ERR! Failed to execute '/Users/juan/.nvm/versions/node/v20.11.1/bin/node /Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (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@20.11.1 | 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-v115-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-v115-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@20.11.1 (node-v115 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-v115-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@20.11.1 | 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@20.11.1 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.11.6 found at "/opt/homebrew/opt/python@3.11/bin/python3.11"
npm ERR! gyp info spawn /opt/homebrew/opt/python@3.11/bin/python3.11
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/juan/.nvm/versions/node/v20.11.1/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/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/juan/Library/Caches/node-gyp/20.11.1/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/juan/Library/Caches/node-gyp/20.11.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/juan/Library/Caches/node-gyp/20.11.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/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! 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@20.11.1 | darwin | arm64
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/backend/Backend.cc:1:
npm ERR! ../src/backend/Backend.h:60:14: warning: private field 'backend' is not used [-Wunused-private-field]
npm ERR!     Backend* backend;
npm ERR!              ^
npm ERR! 1 warning generated.
npm ERR! ../src/CanvasRenderingContext2d.cc:2500:11: warning: enumeration values 'TEXT_ALIGNMENT_START' and 'TEXT_ALIGNMENT_LEFT' not handled in switch [-Wswitch]
npm ERR!   switch (state->textAlignment) {
npm ERR!           ^~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/CanvasRenderingContext2d.cc:2500:11: note: add missing switch cases
npm ERR!   switch (state->textAlignment) {
npm ERR!           ^
npm ERR! 1 warning generated.
npm ERR! In file included from ../src/register_font.cc:9:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CoreText.h:26:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTFramesetter.h:21:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTTypesetter.h:20:
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTLine.h:138:5: error: unknown type name 'CFAttributedStringRef'; did you mean 'CFMutableStringRef'?
npm ERR!     CFAttributedStringRef attrString ) CT_AVAILABLE(macos(10.5), ios(3.2), watchos(2.0), tvos(9.0));
npm ERR!     ^
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreFoundation.framework/Headers/CFBase.h:500:70: note: 'CFMutableStringRef' declared here
npm ERR! typedef struct CF_BRIDGED_MUTABLE_TYPE(NSMutableString) __CFString * CFMutableStringRef;
npm ERR!                                                                      ^
npm ERR! In file included from ../src/register_font.cc:9:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CoreText.h:26:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTFramesetter.h:21:
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTTypesetter.h:102:5: error: unknown type name 'CFAttributedStringRef'; did you mean 'CFMutableStringRef'?
npm ERR!     CFAttributedStringRef string ) CT_AVAILABLE(macos(10.5), ios(3.2), watchos(2.0), tvos(9.0));
npm ERR!     ^
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreFoundation.framework/Headers/CFBase.h:500:70: note: 'CFMutableStringRef' declared here
npm ERR! typedef struct CF_BRIDGED_MUTABLE_TYPE(NSMutableString) __CFString * CFMutableStringRef;
npm ERR!                                                                      ^
npm ERR! In file included from ../src/register_font.cc:9:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CoreText.h:26:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTFramesetter.h:21:
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTTypesetter.h:129:5: error: unknown type name 'CFAttributedStringRef'; did you mean 'CFMutableStringRef'?
npm ERR!     CFAttributedStringRef string,
npm ERR!     ^
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreFoundation.framework/Headers/CFBase.h:500:70: note: 'CFMutableStringRef' declared here
npm ERR! typedef struct CF_BRIDGED_MUTABLE_TYPE(NSMutableString) __CFString * CFMutableStringRef;
npm ERR!                                                                      ^
npm ERR! In file included from ../src/register_font.cc:9:
npm ERR! In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CoreText.h:26:
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreText.framework/Headers/CTFramesetter.h:82:5: error: unknown type name 'CFAttributedStringRef'; did you mean 'CFMutableStringRef'?
npm ERR!     CFAttributedStringRef attrString ) CT_AVAILABLE(macos(10.5), ios(3.2), watchos(2.0), tvos(9.0));
npm ERR!     ^
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/CoreFoundation.framework/Headers/CFBase.h:500:70: note: 'CFMutableStringRef' declared here
npm ERR! typedef struct CF_BRIDGED_MUTABLE_TYPE(NSMutableString) __CFString * CFMutableStringRef;
npm ERR!                                                                      ^
npm ERR! 4 errors generated.
npm ERR! make: *** [Release/obj.target/canvas/src/register_font.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.<anonymous> (/Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:209:23)
npm ERR! gyp ERR! System Darwin 23.4.0
npm ERR! gyp ERR! command "/Users/juan/.nvm/versions/node/v20.11.1/bin/node" "/Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--update-binary" "--module=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v115"
npm ERR! gyp ERR! cwd /Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas
npm ERR! gyp ERR! node -v v20.11.1
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/juan/.nvm/versions/node/v20.11.1/bin/node /Users/juan/.nvm/versions/node/v20.11.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --update-binary --module=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1105:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:305:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.4.0
npm ERR! node-pre-gyp ERR! command "/Users/juan/.nvm/versions/node/v20.11.1/bin/node" "/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v20.11.1
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/juan/.npm/_logs/2024-04-08T09_32_52_162Z-debug-0.log
wdio config

Initialize WebdriverIO and setup configuration in your current project.

Options:
      --version          Show version number                           [boolean]
      --watch            Run WebdriverIO in watch mode                 [boolean]
  -h, --hostname         automation driver host address                 [string]
  -p, --port             automation driver port                         [number]
      --path             path to WebDriver endpoints (default "/")      [string]
  -u, --user             username if using a cloud service as automation backend
                                                                        [string]
  -k, --key              corresponding access key to the user           [string]
  -l, --logLevel         level of logging verbosity
                  [choices: "trace", "debug", "info", "warn", "error", "silent"]
      --bail             stop test runner after specific amount of tests have fa
                         iled                                           [number]
      --baseUrl          shorten url command calls by setting a base url[string]
  -w, --waitforTimeout   timeout for all waitForXXX commands            [number]
  -s, --updateSnapshots  update DOM, image or test snapshots            [string]
  -f, --framework        defines the framework (Mocha, Jasmine or Cucumber) to r
                         un the specs                                   [string]
  -r, --reporters        reporters to print out the results on stdout    [array]
      --suite            overwrites the specs attribute and runs the defined sui
                         te                                              [array]
      --spec             run only a certain spec file - overrides specs piped fr
                         om stdin                                        [array]
      --exclude          exclude certain spec file from the test run - overrides
                          exclude piped from stdin                       [array]
      --multi-run        Repeat specific specs and/or suites N times    [number]
      --mochaOpts        Mocha options
      --jasmineOpts      Jasmine options
      --cucumberOpts     Cucumber options
      --autoCompileOpts  Auto compilation options
      --coverage         Enable coverage for browser runner
      --shard            Shard tests and execute only the selected shard. Specif
                         y in the one-based form like `--shard x/y`, where x is
                         the current and y the total shard.
      --yarn             Install packages via Yarn package manager.
                                                      [boolean] [default: false]
  -y, --yes              will fill in all config defaults without prompting
                                                      [boolean] [default: false]
  -t, --npmTag           define NPM tag to use for WebdriverIO related packages
                                                    [string] [default: "latest"]
      --help             Show help                                     [boolean]

Documentation: https://webdriver.io
@wdio/cli (v8.35.1)

Error: Command failed with exit code 1: npm install @wdio/local-runner@latest @wdio/mocha-framework@latest @wdio/spec-reporter@latest wdio-wait-for @testing-library/webdriverio @wdio/visual-service ts-node @wdio/visual-service --save-dev
    at makeError (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/execa/lib/error.js:60:11)
    at handlePromise (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/execa/index.js:124:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async installPackages (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/@wdio/cli/build/install.js:24:42)
    at async npmInstall (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/@wdio/cli/build/utils.js:684:25)
    at async runConfigCommand (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/@wdio/cli/build/commands/config.js:124:5)
    at async Object.handler (file:///Users/juan/Documents/wdio-visual-testing/wdio-visual-testing/node_modules/@wdio/cli/build/commands/config.js:139:5) {
  shortMessage: 'Command failed with exit code 1: npm install @wdio/local-runner@latest @wdio/mocha-framework@latest @wdio/spec-reporter@latest wdio-wait-for @testing-library/webdriverio @wdio/visual-service ts-node @wdio/visual-service --save-dev',
  command: 'npm install @wdio/local-runner@latest @wdio/mocha-framework@latest @wdio/spec-reporter@latest wdio-wait-for @testing-library/webdriverio @wdio/visual-service ts-node @wdio/visual-service --save-dev',
  escapedCommand: 'npm install "@wdio/local-runner@latest" "@wdio/mocha-framework@latest" "@wdio/spec-reporter@latest" wdio-wait-for "@testing-library/webdriverio" "@wdio/visual-service" ts-node "@wdio/visual-service" --save-dev',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  cwd: '/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}


⚠️  Ups, something went wrong: Error calling: npx wdio config --npm-tag latest!
npm ERR! code 1
npm ERR! path /Users/juan/Documents/wdio-visual-testing
npm ERR! command failed
npm ERR! command sh -c create-wdio wdio-visual-testing

npm ERR! A complete log of this run can be found in: /Users/juan/.npm/_logs/2024-04-08T09_30_21_285Z-debug-0.log

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

@wswebcreation are you aware of any special requirements one would have to have installed on their machine? We should mention any hard requirements for Canvas.

@juannavalonribas what Mac architecture are you using M1, M2 or M3? Can you try running the following:

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

And then try again?

[juannavalonribas]

@wswebcreation are you aware of any special requirements one would have to have installed on their machine? We should mention any hard requirements for Canvas.

@juannavalonribas what Mac architecture are you using M1, M2 or M3? Can you try running the following:

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

And then try again?

Hello @christian-bromann I am using a mac Apple M1 with Sonoma 14.4.1 (sorry for not including this info previously)

I installed the tools according to the command that you provided. I figure it out the problem. I was creating the project inside my wdio-visual-testing folder. I though that this won't cause problems cause during the wdio command the first options is

? A project named "wdio-visual-testing" was detected at "/Users/juan/Documents/wdio-visual-testing/wdio-visual-testing",
correct? Yes

but it seems that if you select to execute npm saying Y on the last step everything explodes because is on the first folder I just decline the install and navigate to the child folder which is named as the parent.

so running npm i on wdio-visual-testing/wdio-visual-testing works properly, maybe is needed to review that first check on cli.

Thanks!

[wswebcreation]

@juannavalonribas

Have you checked the System Requirements and followed the steps there? As far as I can see it fails on the fallback to build canvas

@christian-bromann , see the link to the requirements

[juannavalonribas]

@juannavalonribas

Have you checked the System Requirements and followed the steps there? As far as I can see it fails on the fallback to build canvas

@christian-bromann , see the link to the requirements

No @wswebcreation my bad, I was following your youtube video and just running the init command 😅. But after installing the requirements and do what I mentioned on my previous comment "cd to child folder" now is working. I would be nice to give to the CLI more control in order to install everything automatically avoiding human mistake such not install the requirements previously.

Thanks for your support.

[christian-bromann]

so running npm i on wdio-visual-testing/wdio-visual-testing works properly, maybe is needed to review that first check on cli.

Is /wdio-visual-testing your project root and /wdio-visual-testing/wdio-visual-testing some sort of sub directory for visual testing that has its own package.json? I am not sure why the install would fail in both cases.

[juannavalonribas]

so running npm i on wdio-visual-testing/wdio-visual-testing works properly, maybe is needed to review that first check on cli.

Is /wdio-visual-testing your project root and /wdio-visual-testing/wdio-visual-testing some sort of sub directory for visual testing that has its own package.json? I am not sure why the install would fail in both cases.

Parent /wdio-visual-testing is just an empty folder and inside I runned the wdio init which creates another folder in this case named same as parent.

I just played with different cases and doing the wdio init on Documents I have the same error if I say yes through the CLI.

[christian-bromann]

I just played with different cases and doing the wdio init on Documents I have the same error if I say yes through the CLI.

Can you explain what commands you entered in your terminal?

[juannavalonribas]

Just npm init wdio@latest follow by project name

I attach a video
https://github.com/webdriverio/webdriverio/assets/84902514/fdbc8563-63c2-49af-9746-7cde8344e93a

[christian-bromann]

mhm 🤔 I have no issues creating a project as demonstrated in the video in my ~/Documents directory. I assume it is an auth issue e.g. NPM is not allowed to install certain packages in there. Not sure though.

[christian-bromann]

Can you try to run this:

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

and rerun your installation?

[juannavalonribas]

I did it before, that brew install works properly but the cli setup is giving the same error. I have on my .zshrc a private npm_token of my company.. 🤔 could be that? But recently I been creating projects with vite and another CLI's with success.

[christian-bromann]

Mhm 🤔 I am a bot out of ideas here. I've ran a workshop today where most people were able to install the visual package and the ones that weren't, were able to install it after calling the brew command. At this point I am out of ideas what to suggest next.

[erwinheitzman]

If installing the requirements does not work from my experience, the issue is the following. node-canvas can only be built using the legacy python 2.7.18. You can install pyenv, then install Python 2.7.18 and then set your shell to this version which (if you installed the requirements correctly) should work. To set the version in the shell use "pyenv shell 2.7.18" and then run the wdio setup like before. Let me know if this resolves the issue.

[christian-bromann]

Closing due to inactivity.