search

tacoss / testcafe-blink-diff

Visual regression for Testcafé
64 stars 15 forks source link

Unable to take screenshot #22

Closed suchitrak closed 3 years ago

suchitrak commented 3 years ago

`test('My first test', async t => { await t .useRole(user) .click(avatar) .click(viewprofile)

await takeSnapshot(t)

});`

the command I tried to execute testcafe chrome test1.js --hostname localhost --take-snapshot base

The tests executes but finally gives below error. I am executing these tests from MAC OS Catalina

`-- Was unable to take a screenshot due to an error.

Error: not opened at WebSocket.send (/userdir/testcafepoc/node_modules/ws/lib/WebSocket.js:359:18) at Chrome.enqueueCommand (/userdir/testcafepoc/node_modules/chrome-remote-interface/lib/chrome.js:130:16) at /userdir/testcafepoc/node_modules/chrome-remote-interface/lib/chrome.js:88:28 at new Promise () at Chrome.send (/userdir/testcafepoc/node_modules/chrome-remote-interface/lib/chrome.js:87:16) at Object.handler [as captureScreenshot] (/userdir/testcafepoc/node_modules/chrome-remote-interface/lib/api.js:32:23) at Object.getScreenshotData (/userdir/testcafepoc/node_modules/testcafe/src/browser/provider/built-in/dedicated/chrome/cdp.ts:129:46) at BrowserProviderPluginHost.takeScreenshot (/userdir/testcafepoc/node_modules/testcafe/src/browser/provider/built-in/dedicated/base.js:68:52) at BrowserProvider.takeScreenshot (/userdir/testcafepoc/node_modules/testcafe/src/browser/provider/index.ts:354:31)`

pateketrueke commented 3 years ago

Interesting, could you to clone this repo and run make ci to see what is the output? Thank you!

suchitrak commented 3 years ago

It worked fine when I added --hostname locahost to the script e2e. The tests passed.

I got this error. Not sure why but I can execute the testcafe tests only if I specify --hostname locahost. So I think the below error is related to that.

testcafe-blink-diff@0.4.7 test:e2e /Users/myusername/dev/github/testcafe-blink-diff BASE_URL=http://localhost:3000 testcafe ${BROWSER:-chrome:headless} --screenshots-full-page --take-snapshot -s e2e/screens "-a" "npm run serve" "e2e/cases" "--color"

ERROR Unable to establish one or more of the specified browser connections. This can be caused by network issues or remote device failure.

Type "testcafe -h" for help. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! testcafe-blink-diff@0.4.7 test:e2e: BASE_URL=http://localhost:3000 testcafe ${BROWSER:-chrome:headless} --screenshots-full-page --take-snapshot -s e2e/screens "-a" "npm run serve" "e2e/cases" "--color" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the testcafe-blink-diff@0.4.7 test:e2e 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! /Users/myusername/.npm/_logs/2020-10-23T19_49_05_695Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! testcafe-blink-diff@0.4.7 test: npm run test:e2e -- -a 'npm run serve' e2e/cases "--color" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the testcafe-blink-diff@0.4.7 test 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! /Users/myusername/.npm/_logs/2020-10-23T19_49_05_718Z-debug.log make: *** [ci] Error 1

suchitrak commented 3 years ago

when I removed headless from the script in package.json I see the same error now

"test:e2e": "BASE_URL=http://localhost:3000 testcafe --hostname localhost ${BROWSER:-chrome} --screenshots-full-page --take-snapshot -s e2e/screens"

> testcafe-blink-diff@0.4.7 test:e2e /Users/myusername/dev/github/testcafe-blink-diff
> BASE_URL=http://localhost:3000 testcafe --hostname localhost ${BROWSER:-chrome} --screenshots-full-page --take-snapshot -s e2e/screens "-a" "npm run serve" "e2e/cases" "--color"

 Running tests in:
 - Chrome 86.0.4240.111 / macOS 10.15.7

 Testing
 ✓ should render "It works!"

 Testing fullPage
 ✓ should render "It works!"

 Testing blockOut
 ✓ should render "It works!"

 3 passed (12s)

 Warnings (2):
 --
  Was unable to take a screenshot due to an error.

  Error: not opened
      at WebSocket.send (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/ws/lib/WebSocket.js:359:18)
      at Chrome.enqueueCommand
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:130:16)
      at /Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:88:28
      at new Promise (<anonymous>)
      at Chrome.send
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:87:16)
      at Object.handler [as captureScreenshot]
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/api.js:32:23)
      at Object.getScreenshotData
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/built-in/dedicated/chrome/cdp.ts:129:46)
      at BrowserProviderPluginHost.takeScreenshot
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/built-in/dedicated/base.js:68:52)
      at BrowserProvider.takeScreenshot
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/index.ts:354:31)
 --
  Was unable to take a screenshot due to an error.

  Error: not opened
      at WebSocket.send (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/ws/lib/WebSocket.js:359:18)
      at Chrome.enqueueCommand
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:130:16)
      at /Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:88:28
      at new Promise (<anonymous>)
      at Chrome.send
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/chrome.js:87:16)
      at Object.handler [as getLayoutMetrics]
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/chrome-remote-interface/lib/api.js:32:23)
      at Object.getScreenshotData
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/built-in/dedicated/chrome/cdp.ts:116:67)
      at BrowserProviderPluginHost.takeScreenshot
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/built-in/dedicated/base.js:68:52)
      at BrowserProvider.takeScreenshot
  (/Users/myusername/dev/github/testcafe-blink-diff/node_modules/testcafe/src/browser/provider/index.ts:354:31)
pateketrueke commented 3 years ago

Can you verify which version of testcafe gets installed in your system?

suchitrak commented 3 years ago

testcafe --version Using locally installed version of TestCafe. 1.9.4

pateketrueke commented 3 years ago

Very interesting, seems like a problem with the browser itself, we're using the exact same version of testcafé on CI but probably your installed chrome is not what testcafé expects, or something like that according the error messages you got.

Do you have another browser you can try on? I mean, run testcafe --list-browsers and pick another one if available, also try upgrading your chrome installation too.

suchitrak commented 3 years ago

Or do you think passing the argument --hostname localhost is the issue? So for now I could execute the tests in headless mode to take screenshot.

pateketrueke commented 3 years ago

Well, I tried and I had no issues:

> testcafe-blink-diff@0.4.7 test /Users/pate/Workspace/testcafe-blink-diff
> npm run test:e2e -- -a 'npm run serve' e2e/cases "--hostname" "localhost" "--color"

> testcafe-blink-diff@0.4.7 test:e2e /Users/pate/Workspace/testcafe-blink-diff
> BASE_URL=http://localhost:3000 testcafe ${BROWSER:-chrome:headless} --screenshots-full-page --take-snapshot -s e2e/screens "-a" "npm run serve" "e2e/cases" "--hostname" "localhost" "--color"

 Running tests in:
 - Chrome 86.0.4240.111 / macOS 10.14.6

 Testing
 ✓ should render "It works!" (screenshots: /Users/pate/Workspace/testcafe-blink-diff/e2e/screens/Testing)

 Testing fullPage
 ✓ should render "It works!" (screenshots: /Users/pate/Workspace/testcafe-blink-diff/e2e/screens/Testing_fullPage)

 Testing blockOut
 ✓ should render "It works!" (screenshots: /Users/pate/Workspace/testcafe-blink-diff/e2e/screens/Testing_blockOut)

 3 passed (30s)

I'm using Mojave but I think the OS is not the issue.

Question: how you're calling just testcafe in your project? I mean, did you installed it globally too?

I believe you should invoke testcafe through npx which is the appropriate thing, or through scripts in your package.json file, because calling the global binary may not work as you're expecting.

pateketrueke commented 3 years ago

I've been working also with a global installation of testcafe and no issues are present yet, if someone suffers from this nuance please reopen the issue, thank you!