blueimp / wdio

Docker setup for WebdriverIO with automatic screenshots, image diffing and screen recording support for containerized versions of Chrome and Firefox on Linux, mobile versions of Chrome and Firefox on Android as well as Safari on iOS, Safari on macOS and Edge on Windows.
https://hub.docker.com/r/blueimp/wdio
MIT License
296 stars 51 forks source link

Question about integrating wdio-image-comparison-service #9

Closed kumarpatel closed 5 years ago

kumarpatel commented 5 years ago

Followed your advise on building my own image. https://github.com/blueimp/wdio/issues/6#issuecomment-484987499

I tried to integrate wdio-image-comparison-service in my image by following their integrating guide. https://webdriver.io/blog/2019/05/18/visual-regression-for-v5.html

Seems to be failing at

npm install -g wdio-image-comparison-service

Just wondering if you have any insight into what might be wrong and how to fix it. It looks like a mkdir permission issue to create a dir in /usr/lib/node_modules/

Any ideas on how to fix this? (any help would be appreciated)

Step 5/11 : RUN npm install -g wdio-image-comparison-service
 ---> Running in 8e26e11af505

> canvas@2.5.0 install /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas
> node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using needle for node-pre-gyp https download
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.5.0 and node@10.16.0 (node-v64 ABI, musl) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build'
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack     at F (/usr/lib/node_modules/npm/node_modules/which/which.js:68:16)
gyp ERR! stack     at E (/usr/lib/node_modules/npm/node_modules/which/which.js:80:29)
gyp ERR! stack     at /usr/lib/node_modules/npm/node_modules/which/which.js:89:16
gyp ERR! stack     at /usr/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /usr/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:153:21)
gyp ERR! System Linux 4.9.125-linuxkit
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release" "--napi_version=4" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v64"
gyp ERR! cwd /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas
gyp ERR! node -v v10.16.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/wdio-image-comparison-service/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:982:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Linux 4.9.125-linuxkit
node-pre-gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/wdio-image-comparison-service/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas
node-pre-gyp ERR! node -v v10.16.0
node-pre-gyp ERR! node-pre-gyp -v v0.11.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! canvas@2.5.0 install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the canvas@2.5.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-07-10T19_50_11_908Z-debug.log
The command '/bin/sh -c npm install -g wdio-image-comparison-service' returned a non-zero code: 1
blueimp commented 5 years ago

Hi @kumarpatel, to install global packages with NPM, you will need root permissions. To do so, wrap your RUN command the following way:

USER root
RUN npm install -g wdio-image-comparison-service
USER wdio
kumarpatel commented 5 years ago

Did that. Got error re. missing python in this stage.

> canvas@2.5.0 install /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas

So added missing python dependencies. (and few other to be sure) and here's the new error output. Still seems to be permission issues.

node-pre-gyp WARN Using needle for node-pre-gyp https download
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.5.0 and node@10.16.0 (node-v64 ABI, musl) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build'
gyp WARN EACCES user "undefined" does not have permission to access the dev dir "/root/.node-gyp/10.16.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/.node-gyp'
gyp ERR! System Linux 4.9.125-linuxkit
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release" "--napi_version=4" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v64"
gyp ERR! cwd /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas
gyp ERR! node -v v10.16.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas/build/Release --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/wdio-image-comparison-service/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:982:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Linux 4.9.125-linuxkit
node-pre-gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/wdio-image-comparison-service/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /usr/lib/node_modules/wdio-image-comparison-service/node_modules/canvas
node-pre-gyp ERR! node -v v10.16.0
node-pre-gyp ERR! node-pre-gyp -v v0.11.0
node-pre-gyp ERR! not ok
kumarpatel commented 5 years ago

Also tried installing node_modules locally by removing read_only: true and changing the host mount to .:/opt

Then, docker-compose run --rm --entrypoint npm wdio install -g wdio-image-comparison-service

Errors out with


npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! path /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wdio/.npm/_logs/2019-07-11T21_37_37_073Z-debug.log
blueimp commented 5 years ago

The image is set up for read-only mode on purpose. Installation is done as root user, while execution is done as wdio user. You have to make sure that any installation step is done as root.

I've also just updated the Dockerfile and changed the method of how NPM packages are installed, now it's using a package.json (and package-lock.json) file. You might wanna fork the Dockerfile and simply use a custom package.json config.

By the way, this project already includes a method for image comparisons, please see the documentation here: https://github.com/blueimp/wdio-screen-commands#usage

kumarpatel commented 5 years ago

awesome. Thanks. I'll give that shot in a moment. I was looking into wdio-image-comparison-service due to it's ability to take full page screenshots. That being said, I think it simply scrolls through the page taking screenshots and stitches them together.

blueimp commented 5 years ago

@kumarpatel can we close this issue or do you require further support?

kumarpatel commented 5 years ago

close it. Looks like the issue is with wdio-image-comparison-service. Not with this project.

blueimp commented 5 years ago

Thank you! ☺️