Hi Guys,

I have something i think very strange going on. My snapshots contain the following "Ã" before the copyright notice of the pages.

When using Percy and Cypress using the command line snapshots are created successfully i.e percy exec -- cypress open --env configFile=local
But for CI I using the Cypress API and the Cypress Tests are executed using a NodeJS script and within the script I using the syntax
const { totalFailed } = await cypress.run({
env: {
configFile: config,
password: crpassword,
key: crkey,
awsKey: awskey,
awsSecretKey: awsseckey
}
})

The name of the nodeJS script is cypress.js so I entered the following into the package.json but it fails to creates the snapshots, any ideas or pointers. Thanks

percy exec -t 350 -- node scripts/cypress.js

I have the following cypress:

describe('Visual Regression', () => {
  
  it('root', () => {
    cy.visit('URL/')
    // This never triggers unless I DUP the lane
    cy.percySnapshot()
    // cy.percySnapshot() 
  })
  
  it('a', () => {
    cy.visit('URL/a')
    cy.percySnapshot()
  })
  
  it('b', () => {
    cy.visit('URL/b')
    cy.percySnapshot()
  })
})

Percy output is missing the root

Visual Regression                                                                                                                                                               
✓ root (4843ms)                                                                                                                                                          
[percy] snapshot taken: 'Visual Regression a'                                                                                                                             
✓ a (3421ms)                                                                                                                                                          
[percy] snapshot taken: 'Visual Regression b'                                                                                                                             
✓ b (2673ms)

I would like to have cy.percySnapshot() in my tests so that I get visual diffing while running on my CI. But when our developers run tests locally, I do not want to do visual diffing (so that they do not need to setup Percy tokens and stuff like that). It seems that currently cy.percySnapshot() fails if Percy is not running.

Executing the command npx percy exec -- cypress run --spec "cypress/integration/*" fails on when running locally on Windows but runs successfully on CircleCI linux VM so that's why I'm guessing it's OS dependent.

Output:

E:\Repos\cra-typescript-cypress [master ≡ +0 ~3 -0 !]> npx percy exec -- cypress run --spec "cypress/integration/*"
npx: installed 1 in 1.954s
The "path" argument must be of type string. Received type undefined
E:\Repos\cra-typescript-cypress\node_modules\@percy\agent\bin\run
[percy] created build #5: https://percy.io/conversationlearner/test/builds/1541219
[percy] percy has started.
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: spawn cypress ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:217:19)
    at onErrorNT (internal/child_process.js:394:16)
    at process._tickCallback (internal/process/next_tick.js:174:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:223:12)
    at onErrorNT (internal/child_process.js:394:16)
    at process._tickCallback (internal/process/next_tick.js:174:19)

Versions:

"cypress": "3.1.4",
"@percy/cypress": "1.0.2"

Windows 10 Pro 10.0.17763 Build 17763

Followed instructions here: https://docs.percy.io/docs/cypress

for an angular app and am getting this error: TypeError: cy.percySnapshot is not a function

I tried updating our e2e/ts.config file:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": [
      "cypress",
      "node",
      "@percy/cypress"
    ]
  },
  "include": [
    "**/*.ts"
  ]
}

But it didn't fix the issue

Cypress got updated to 3.2.0, so it might be worth explicitly updating the dependency in package.json and then running an npm patch release.

Reproducible steps: Run the following command:

amitpunjabi (master) saker $ npm install @percy/cypress

> [email protected] install /Users/amitpunjabi/stack/lang/node/saker/node_modules/puppeteer
> node install.js

/Users/amitpunjabi/stack/lang/node/saker/node_modules/puppeteer/install.js:175
            } catch {
                    ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3
npm WARN [email protected] requires a peer of core-js-bundle@^3.6.5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of core-js-bundle@^3.6.4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of vega@^5.12.1 but none is installed. You must install peer dependencies yourself.
npm WARN @percy/[email protected] requires a peer of cypress@^3 || ^4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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!     /Users/amitpunjabi/.npm/_logs/2020-07-15T08_11_45_978Z-debug.log

Configuration:

• macOS v10.14
• Node v8.16.2
• npm v6.4.1

I'm not sure if this is a percy-cypress issue or just a percy issue in general. I'm noticing that the CSS media queries don't take effect in my screenshots.

Is this a known issue/feature? Are there any steps I can take to start debugging this?

Currently if you try to take multiple percySnapshots in a single test, if you're using styled-components to apply styles, sometimes the styles won't be correctly captured in the second and subsequent snapshots.

The fix to this requires changing how we capture CSSrules that have been added to the CSSOM.

Percy tutorial shows that running Percy requires wrapping cypress run command in percy exec command.

I am however using module api to run my Cypress tests. Is there any way to use Percy with this method of running Cypress?

Hi,

I've set up percy (2.2.0) according https://docs.percy.io/docs/cypress, added PERCY_BRANCH (switched to that branch) and PERCY_TOKEN to .bash_profile, added a single cy.percySnapshot() command and tried to run locally.
Get the following:

npx percy exec -- cypress run
[percy] created build #11: https://percy.io/......
[percy] percy has started.
[percy] undefined
[percy] stopping percy...
[percy] waiting for 0 snapshots to complete...
[percy] done.
[percy] finalized build #11: https://percy.io/....

what am I doing wrong? thanks

We are currently using Percy and the Percy cypress SDK as part of Cypress test suite.
When we deploy a branch, the test runs on our CI pipeline in parallel.

This is how the test stage run on our Jenkins CI platform:

• percy start --detached "--port" "5338"
• the cypress command 7 times to have test running in parallel PERCY_TARGET_BRANCH=develop cypress run --parallel --record --key [KEY] "--config" "baseUrl=[URL]" "--ci-build-id" "[BUILD_ID]"
• percy finalize --all && percy stop "--port" "5338"

Each time we push a branch, the following will trigger. All builds happens on the same machine and not part of a container. Which means that if 2 builds are triggered at the same time, the test stage will run simultaneously.

When that happens: One of the issue we had, is that Percy will complain about the port 5338 already being used. So our devops added some logic to pass the new port to Percy, if the default one was already use (Example: percy start --detached "--port" "5339").
By doing this, we can now start 2 instance of Percy on the same server, listening to different port. But then our cypress do not use that port so get the following error:

​CypressError: cy.request() timed out waiting 30000ms for a response from your server.
The request we sent was:

Method: POST
URL: http://localhost:5338/percy/snapshot

Would it possible to add a way to specify which port Percy was started on so we make sure the snapshots in Cypress are using the right instance?

When I run Percy inside GitHub actions, the page is visible but without styling. The page is behind basic authentication.

No single asset is download so I tried the following:

cy.percySnapshot('Home page', {
  requestHeaders: {
    Authorization: 'Basic dXNlcm5hbWU6cGFzc3dvcmQ='
  }
})

I did replace dXNlcm5hbWU6cGFzc3dvcmQ= with my custom username:password with base64 encoding.

Which produces the following error:

[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request","detail":"Invalid URL, scheme must be http or https: about:blank"}]} | Tue Apr 28 2020 15:02:00 GMT+0000 (Coordinated Universal Time)

Did I miss something?

Getting the following:

CypressError: cy.request() timed out waiting 30000ms for a response from your server.
--
4583 |  
4584 | The request we sent was:
4585 |  
4586 | Method: POST
4587 | URL: http://localhost:5338/percy/snapshot

This happens consistently on every run. I am using the following:

• Cypress 4.2
• Cypress docker image (chrome 69)
• Running on AWS Codebuild for CI (using the standard image)

I already bumped SHM to 8g so it seems unlikely that this is the problem. I also disabled Chrome web security.

What is surprising, is that Percy successfully starts the build (and stops it when the build manages to get to that point). Just the snapshot call seems to fail

Hello!

We're seeing the following output on our CI build:

[percy] stopping percy...
[percy] waiting for 1 snapshots to complete...
[percy] done.
[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request","detail":"Finalizing build 1150728 failed: cannot finalize before all snapshot resources are uploaded. This is likely a client error, please make sure that content for all SHAs in 'missing-resources' from the snapshot response are uploaded before calling finalize."}]}

I wasn't sure where to begin investigating since it seems like the upload of snapshots happened successfully. Would you happen to know what this error message could be related to?

I'm currently trying to setup Percy into Cypress, following this tutorial: https://docs.percy.io/docs/cypress

I then get an error Can't resolve fs.... Here's the stacktrace:

I've done import '@percy/cypress'; in command.js file and that's pretty much it 🤷‍♂️. Any idea? I might be missing something obvious too...

Thanks!

Hi,
I am using percy-cypress with a symfony4/ webpack app, in developpement mod assets are not on the same port as the main app, so assets are not loaded by percy which make screenshot not usable.

What is the correct way to deal with those kind of app?

When we integrated Percy within Cypress tests we noticed that the screenshots Percy was generating did not look like the actual application, some CSS styles appear to be missing. I think this may have something to do with how Percy applies the CSS internally. Please advise if there is a workaround. Thank you!

Percy:

Actual Page:

Could we screenshot just a particular element?

// as a child command
cy.get('.header').percySnapshot('header')

Potentially related to #61, but I think it is a different issue.

I'm running my tests inside the percy agent:

[percy] created build #5: https://percy.io/SamKnows/client-dashboard/builds/1872425
[percy] percy has started.

In my tests, I have a cy.percySnapshot(), but it leads to the following output:

Then when the agent quits:

[percy] stopping percy...
[percy] waiting for 0 snapshots to complete...
[percy] done.

What's this about? node is definitely installed!

Disabling Cypress web security didn't help.

I don't know if this is a percy-cypress thing or just a percy thing.

In my application I have a ResizeObserver (polyfilled in electron) changing the layout when the screen is resized, to display completely different HTML on mobile devices.

In my percy snapshots, I just see the large design on the smaller screen, not the different HTML.

I'd suggest a fix could be to call setTimeout(fn, 0) to ensure that any JS ran as a result of the resize has time to finish (but I'm not familiar with the code at all).

Happy to set up a minimal test case if that would be useful!

It seems currently Percy integration dies if you run of your plan limits. I would propose that CI should still run, but a warning should be issued, similar to #3.

Hi Guys,

I thought lets see if i could make Percy to work icm Cypress on my local machine. I have unfortunately some trouble with setting it up and run a cypress project.

I'm running the following command
$ DEBUG=* $(npm bin)/percy exec -- cypress run

2019-07-18T14:23:43.845Z @oclif/config reading core plugin C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent
2019-07-18T14:23:43.846Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent\package.json
2019-07-18T14:23:43.848Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent\oclif.manifest. json
(node:9156) Error Plugin: @percy/agent: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules @percy\agent\package.json
module: @oclif/[email protected]
plugin: @percy/agent
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent
See more details with DEBUG=*
Error Plugin: @percy/agent: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agen t\package.json
at Plugin.warn (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:174:19)
at Plugin.load (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:36:18)
module: @oclif/[email protected]
plugin: @percy/agent
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent
See more details with DEBUG=*
2019-07-18T14:23:43.850Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent.oclif.manifest .json
2019-07-18T14:23:43.850Z @oclif/config:@percy/agent using manifest from C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@per cy\agent.oclif.manifest.json
2019-07-18T14:23:43.851Z @oclif/config reading user plugins pjson C:\Users\Patrick.DESKTOP-Q3EBHKB\AppData\Local@percy\ag ent\package.json
2019-07-18T14:23:43.851Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\AppData\Local@percy\agent\package.json
2019-07-18T14:23:43.852Z @oclif/config loading plugins [ '@oclif/plugin-help', '@oclif/plugin-not-found' ]
2019-07-18T14:23:43.854Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent\package.json
2019-07-18T14:23:43.854Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent\package.json
2019-07-18T14:23:43.855Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\package.json
2019-07-18T14:23:43.855Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\package.json
2019-07-18T14:23:43.855Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\package.json
2019-07-18T14:23:43.855Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\package.json
2019-07-18T14:23:43.855Z @oclif/config reading core plugin C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-hel p
2019-07-18T14:23:43.855Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help\package.j son
2019-07-18T14:23:43.856Z @oclif/config reading core plugin C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not -found
2019-07-18T14:23:43.856Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found\pack age.json
2019-07-18T14:23:43.857Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help\oclif.manifest.json
(node:9156) Error Plugin: @oclif/plugin-help: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help\package.json
module: @oclif/[email protected]
plugin: @oclif/plugin-help
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help
See more details with DEBUG=*
Error Plugin: @oclif/plugin-help: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help\package.json
at Plugin.warn (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:174:19)
at Plugin.load (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:36:18)
module: @oclif/[email protected]
plugin: @oclif/plugin-help
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help
See more details with DEBUG=*
2019-07-18T14:23:43.858Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found\oclif.manifest.json
(node:9156) Error Plugin: @oclif/plugin-not-found: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found\package.json
module: @oclif/[email protected]
plugin: @oclif/plugin-not-found
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found
See more details with DEBUG=*
Error Plugin: @oclif/plugin-not-found: files attribute must be specified in C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found\package.json
at Plugin.warn (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:174:19)
at Plugin.load (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\config\lib\plugin.js:36:18)
module: @oclif/[email protected]
plugin: @oclif/plugin-not-found
root: C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found
See more details with DEBUG=*
2019-07-18T14:23:43.858Z @oclif/config:@oclif/plugin-help using manifest from C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-help\oclif.manifest.json
2019-07-18T14:23:43.859Z @oclif/config loadJSON C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found.oclif.manifest.json
2019-07-18T14:23:43.859Z @oclif/config:@oclif/plugin-not-found using manifest from C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@oclif\plugin-not-found.oclif.manifest.json
2019-07-18T14:23:43.860Z @oclif/config config done
2019-07-18T14:23:43.860Z @oclif/config start init hook
2019-07-18T14:23:43.861Z @oclif/config init hook done
2019-07-18T14:23:43.861Z percy init version: @oclif/[email protected] argv: [ 'exec', '--', 'cypress', 'run' ]
2019-07-18T14:23:43.866Z @oclif/config runCommand exec [ '--', 'cypress', 'run' ]
2019-07-18T14:23:43.867Z @oclif/config:@percy/agent require C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules@percy\agent\dist\commands\exec.js
2019-07-18T14:23:44.215Z @oclif/config start prerun hook
2019-07-18T14:23:44.215Z @oclif/config prerun hook done
Thu, 18 Jul 2019 14:23:44 GMT express:application set "x-powered-by" to true
Thu, 18 Jul 2019 14:23:44 GMT express:application set "etag" to 'weak'
Thu, 18 Jul 2019 14:23:44 GMT express:application set "etag fn" to [Function: generateETag]
Thu, 18 Jul 2019 14:23:44 GMT express:application set "env" to 'development'
Thu, 18 Jul 2019 14:23:44 GMT express:application set "query parser" to 'extended'
Thu, 18 Jul 2019 14:23:44 GMT express:application set "query parser fn" to [Function: parseExtendedQueryString]
Thu, 18 Jul 2019 14:23:44 GMT express:application set "subdomain offset" to 2
Thu, 18 Jul 2019 14:23:44 GMT express:application set "trust proxy" to false
Thu, 18 Jul 2019 14:23:44 GMT express:application set "trust proxy fn" to [Function: trustNone]
Thu, 18 Jul 2019 14:23:44 GMT express:application booting in development mode
Thu, 18 Jul 2019 14:23:44 GMT express:application set "view" to [Function: View]
Thu, 18 Jul 2019 14:23:44 GMT express:application set "views" to 'C:\Users\Patrick.DESKTOP-Q3EBHKB\test\views'
Thu, 18 Jul 2019 14:23:44 GMT express:application set "jsonp callback name" to 'callback'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' query
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' expressInit
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' corsMiddleware
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' urlencodedParser
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' jsonParser
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router use '/' serveStatic
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route new '/percy/snapshot'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/percy/snapshot'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route post '/percy/snapshot'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route new '/percy/stop'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/percy/stop'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route post '/percy/stop'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route new '/percy/healthcheck'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/percy/healthcheck'
Thu, 18 Jul 2019 14:23:44 GMT express:router:route get '/percy/healthcheck'
Thu, 18 Jul 2019 14:23:44 GMT express:router:layer new '/'
2019-07-18T14:23:44.463Z percy:exec init version: @oclif/[email protected] argv: [ '--', 'cypress', 'run' ]
[percy] created build #14: https://percy.io/projectname/demo/builds/2219046
2019-07-18T14:23:45.012Z puppeteer:protocol SEND ► {"method":"Target.setDiscoverTargets","params":{"discover":true},"id":1 }
2019-07-18T14:23:45.014Z puppeteer:protocol ◀ RECV {"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"42 cb873a-c4ff-4f88-935a-cf32f2d0d2ec","type":"browser","title":"","url":"","attached":true}}}
2019-07-18T14:23:45.015Z puppeteer:protocol ◀ RECV {"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"FD AB92755EEA51A92257E4D25DBCD96B","type":"page","title":"","url":"about:blank","attached":false,"browserContextId":"E1C232D2 2938D38A7B0C6B3F18147F65"}}}
2019-07-18T14:23:45.015Z puppeteer:protocol ◀ RECV {"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"aa d7b4b8-bb8b-4d5f-b9f1-76b65a3e28af","type":"browser","title":"","url":"","attached":false}}}
2019-07-18T14:23:45.015Z puppeteer:protocol ◀ RECV {"id":1,"result":{}}
2019-07-18T14:23:45.017Z puppeteer:protocol SEND ► {"method":"Target.createTarget","params":{"url":"about:blank"},"id":2}
[percy] percy has started.
2019-07-18T14:23:45.061Z puppeteer:protocol ◀ RECV {"method":"Target.targetCreated","params":{"targetInfo":{"targetId":"2E B62FDBE6D318544547EF7844701A8B","type":"page","title":"","url":"","attached":false,"browserContextId":"E1C232D22938D38A7B0C6B3F18147F65"}}}
2019-07-18T14:23:45.061Z puppeteer:protocol ◀ RECV {"id":2,"result":{"targetId":"2EB62FDBE6D318544547EF7844701A8B"}}
2019-07-18T14:23:45.065Z puppeteer:protocol ◀ RECV {"method":"Target.targetInfoChanged","params":{"targetInfo":{"targetId" :"FDAB92755EEA51A92257E4D25DBCD96B","type":"page","title":"about:blank","url":"about:blank","attached":false,"browserContextId":"E1C232D22938D38A7B0C6B3F18147F65"}}}
'cypress' is not recognized as an internal or external command,
operable program or batch file.
events.js:174
throw er; // Unhandled 'error' event
^

Error: spawn cypress ENOENT
at notFoundError (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
Emitted 'error' event at:
at ChildProcess.cp.emit (C:\Users\Patrick.DESKTOP-Q3EBHKB\node_modules\cross-spawn\lib\enoent.js:30:37)
at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)

Anyone has a clue on how to fix this?

{
  "devDependencies": {
    "@percy/cypress": "^1.0.9",
    "cypress": "^3.4.0"
  }
}

Regards,
Patrick

Because of our own network error, sometimes test runner could not connect to percy server

However, it looks like the error is suppressed, means that the build will continue to run and pass without trigger a percy build. We have to manually check if there is corresponding percy build or not.

My expectation:

• If percy fails to connect to percy server, fails the build explicitly

Notes:

• Our CI: Buildkite
• I put the set -e already in the shell script which runs the test already

Calling percySnapshot multiple times without a snapshot name argument inside same "it" blocks seems to generate only one snapshot. Ideally, it would store and remember all of them (maybe with index suffix).

Percy was running fine till 2019-05-12. No changes from my side (tried both running at home and at work network) but on 2019-05-13 it started to throw:

λ npx percy exec -- cypress run
[percy] StatusCodeError 403 - "\n\n\n\n <html class="no-js" lang="en-US"> \n\n<title>Attention Required! | Cloudflare</title>\n<meta name="captcha-bypass" id="captcha-bypass" />\n<meta charset="UTF-8" />\n<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />\n<meta name="robots" content="noindex, nofollow" />\n<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />\n<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" type="text/css" media="screen,projection" />\n\n<style type="text/css">body{margin:0;padding:0}</style>\n\n\n<script type="text/javascript" src="/cdn-cgi/scripts/zepto.min.js"></script>\n<script type="text/javascript" src="/cdn-cgi/scripts/cf.common.js"></script>\n\n\n\n\n\n\n <div id="cf-wrapper">\n <div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please enable cookies.\n <div id="cf-error-details" class="cf-error-details-wrapper">\n <div class="cf-wrapper cf-header cf-error-overview">\n <h1 data-translate="challenge_headline">One more step\n <h2 class="cf-subheadline"><span data-translate="complete_sec_check">Please complete the security check to access percy.io\n \n \n <div class="cf-section cf-highlight cf-captcha-container">\n <div class="cf-wrapper">\n <div class="cf-columns two">\n
<div class="cf-column">\n \n <div class="cf-highlight-inverse cf-form-stacked">\n <form class="challenge-form" id="challenge-form" action="/cdn-cgi/l/chk_captcha" method="get">\n <input type="hidden" name="s" value="61571a46e99a16116bded6570895f03b5c59d906-1557729052-1800-AYZeF2k8jOpJxi/Jn+//nVVeCHWoFJ5bHwjM/mtA6NAWoK6k4rxQeC5LTCzy7Kj85Vb8QOYsSfK/8hyriyi3T8ODuYuwDlD4u37UIc/rcoSNUInBYy5L2EWxgJxigMxsSGkGghZQXCAty5NC5o/BUuM=">\n <script type="text/javascript" src="/cdn-cgi/scripts/cf.challenge.js" data-type="normal" data-ray="4d6296122b86b50e" async data-sitekey="6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0"></script>\n <div class="g-recaptcha">\n <noscript id="cf-captcha-bookmark" class="cf-captcha-info">\n

This test: https://github.com/percy/percy-cypress/blob/master/cypress/integration/sdk_spec.js#L64-L67 creates a diff on each push, which isn't very valuable. We should find a suitable replacement

Hi,

I would like to know how to deal with CI, my main problem is that percy-agent need puppeteer which need to dowload chromium everytime even if chromium is installed locally in the image-ci.

Is there any solution to this ?

Hi,

Maybe it's not specific to percy-cypress, but I wasn't sure where to post it.

I'm using percy-cypress to take screenshots of pages that have scroll.
When reviewing the image in the Percy build, I only see the area above the fold, while when I "download new source", I see the full page.

If I make a change in the area below the fold, Percy doesn't detect the change.

How can I make Percy account for the entire page, including what's below the fold?

I have been playing around with this library and I noticed something querky in terms of my screen shots. It seems when I set the widths option within cy.percySnapshot the screenshot is taken during the resize of the screen which causes layout issues. By this I mean the screenshot is happening while the layout is still repositioning itself based on the response styles. Is it possible to delay the snapshot a little bit after the width has been set?

Packages:
@percy/cypress: 2.3.1
cypress: 4.3.0

I can not use cy.percySnaphot() in my Tests. Including it I get the following error:

TypeError: cy.percySnapshot is not a function

My env is the default Angular 10 initial code/project. Cypress, Cucumber, and Typescript. It's a sample to get all the testing tools to work together before we start our next project using it as a base.

Thanks for your help.

Here are the following Config file info

/cypress/support/commands.ts

// At the top of cypress/support/commands.js
import '@percy/cypress';

/cypress/plugins/index.js

const cypressTypeScriptPreprocessor = require("./cy-ts-preprocessor");
const cucumber = require('cypress-cucumber-preprocessor').default

// In cypress/plugins/index.js
let percyHealthCheck = require('@percy/cypress/task')

module.exports = on => {
  on("file:preprocessor", cypressTypeScriptPreprocessor);
  on('file:preprocessor', cucumber());
  on("task", percyHealthCheck);

};

Feature: HomePage

Feature: Home Page is Setup Correctly

  I want to open the Home Page

  Scenario: Open the Home Page
    Given I open the Home Page as "Reed"
    Then I see the "Resources"
    And I see the "Next Steps"
    And I see the "Welcome"
    And I see the "AngularTesting app is running!"
    And I see the "What do you want to do next with your app?"
    And I see button "Animations" on the page


  Scenario Outline: Open the Home Page as <user> and select <button>
    Given I open the Home Page as "<user>"
    And I click button "<button>"
    Then I see command "<command>"

    Examples:
      | button           | command                   | user   |
      | New Component    | ng generate component xyz | Reed   |
      | Angular Material | ng add @angular/material  | Daniel |
      | Add PWA Support  | ng add @angular/pwa       | Fred   |
      | Add Dependency   | ng add _____              | Dino   |

  Scenario: Do something
    Given I open the Home Page as "Reed"
    Then I do something "fred"

HomePage.js

/// <reference types="Cypress" />

import {Given, Then} from 'cypress-cucumber-preprocessor/steps';

Given('I open the Home Page as {string}', (user) => {
  cy.visit('/');
  cy.log("Opened as " + user);
});

Then('I see the {string}', (text) => {
  cy.contains(text)
  cy.percySnapshot();
});

Given('I click button {string}', (button) => {

  cy.get('.card-small').children().contains(button).click();

});

Then('I see command {string}', (command) => {
  cy.get('.terminal pre').contains(command);
});

Then(/^I do something "([^"]*)"$/, function () {
//  cy.screenshot("Doing it")
});

Then('I see button {string} on the page', (name) => {
  cy.get('[title="' + name + '"]')
  cy.percySnapshot();
});

and finally package.json

{
  "name": "angular-testing",
  "version": "0.0.0",
  "scripts": {
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.4",
    "@angular/common": "~10.0.4",
    "@angular/compiler": "~10.0.4",
    "@angular/core": "~10.0.4",
    "@angular/forms": "~10.0.4",
    "@angular/platform-browser": "~10.0.4",
    "@angular/platform-browser-dynamic": "~10.0.4",
    "@angular/router": "~10.0.4",
    "@briebug/cypress-schematic": "^3.3.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.3",
    "@angular/cli": "~10.0.3",
    "@angular/compiler-cli": "~10.0.4",
    "@cypress/webpack-preprocessor": "5.4.1",
    "@percy/cypress": "^2.3.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cypress": "4.11.0",
    "cypress-cucumber-preprocessor": "^2.5.4",
    "cypress-intellij-reporter": "0.0.4",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-loader": "8.0.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

Due to the way the DOM is cloned, sent to the cloud, and then recreated, the scroll positions of <div>'s are lost.

I doubt there's a simple solution, but in theory you could detect, save, and restore the scroll position (see jQuery scrollTop())

Screenshot...

It should look like this (it's a React Virtualized Table scrolled to the bottom)...

Not able to use Percy. Having the error and not sure where to look next

Error message:

My code:

OS: macOS Mojave 10.14.6
Node: v12.16.1
Cypress: 4.2.0
@percy/cypress: 2.3.1

Update
Closing it as I opened the issue in the wrong repo.

I'm trying to use percy to take a screenshot of our web page and I get 413 error code. You can see the full response in the following screenshot.

I use Java and this is the line I have added to my test to take the screenshot
percy.snapshot("Test screenshot", Arrays.asList(1920), 2000, true)

I came across this issue and I realised that we may have too much JavaScript as well.
Our bundle was too big (around 7MB) and we managed to limit it to around 1.2MB, but I still get the same error.
Can you guide me on how to solve this issue? What's the limit (in KB/MB) for JS?

The current dependency is ^3. Cypress released a major version recently(^4). Is it possible to update the dependency in package.json file ?

Not sure if this is the intended behavior - but I would expect Percy to take a screenshot even if a Cypress assertion failed.

What is this?

There's an issue I've been seeing with cy.exec. They use execa under the hood and it doesn't respect your systems $PATH variable. Various customers get an error that basically says it couldn't find node on their system. This is because execa looking in one specific place for the node executable. Related issue: sindresorhus/execa#153

We use cy.exec to run the health check so we can ensure our node server is open and ready to accept the snapshot POSTs: https://github.com/percy/percy-cypress/blob/master/lib/index.ts#L12-L17

Work around

The work around here would be to symlink your systems node to where execa is expecting to find it:

$  sudo ln -s $(which node) /usr/bin/node

Long term proper fix

Not quite sure about this. Contribute back to execa to fix it? Figure out a better way to run the health check?

Currently I'm passing in names for cy.percySnapshot. Ex:
cy.percySnapshot("Page loads");

In the Percy dashboard if I have multiple different specs using the same snapshot names, they overwrite each other.

Other screenshot tools I've tested including cypress-image-snapshot automatically take into consideration the running spec name. Ex. "All Specs" or "myspec.spec.js"

The downside is, other tools are treating "myspec.spec.js" in "All Specs" different than "myspec.spec.js" run individually, but that seems to be a Cypress issue.

Is there a recommendation for naming Percy Snapshots?

Hello,

I try to run my cypress + percy integration tests in docker, for a sandboxed integration in CI.
Cypress run command works.
Percy-cypress exec command also works without PERCY_TOKEN.
But Percy-cypress exec command fails with PERCY_TOKEN.
It seems that there is a problem when percy-cypress tries to push data to percy-agent :

The request we sent was:

Method: POST
URL: http://localhost:5338/percy/snapshot

No response was received within the timeout.

https://on.cypress.io/request
...

My dockerfile :

FROM cypress/base:10
RUN mkdir -p /usr/app/src
WORKDIR /usr/app/src
COPY .docker/cypress/package* ./cypress.json ./
ENV CI=1
RUN npm ci
CMD ["npm", "start"]

And the package.json used to build the docker image :

{
  "name": "cypress-container",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "percy exec -t 350 -- cypress run"
  },
  "dependencies": {
    "@percy/cypress": "^2.3.1",
    "cypress": "^4.5.0"
  }
}

Am I missing something ?
Is there an other way to use cypress + percy inside docker ?

Regards

Ps: other thing, failing builds never finish

[percy] stopping percy...
[percy] waiting for 3 snapshots to complete...

When running Cypress v3.1.4 "on its own", things work fine, but if I add in @percy/cypress 0.2.3, things suddenly go wrong:

C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org>npm run percy

> [email protected] percy C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org
> percy exec -- npm run cypress

module.js:549
    throw err;
    ^

Error: Cannot find module 'typescript'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (J:\Junctions\Users\Mike\Documents\Git\collaborations\mozilla\foundation.mozilla.org\node_modules\@oclif\config\lib\ts-node.js:5:22)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] percy: `percy exec -- npm run cypress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] percy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

This worked fine before (where "before" was actually just a few hours ago), but I'm also seeing this go wrong on Travis CI now:

(We had to add a separate npm i typescript to our Travis setup, outside of the package.json, to get things to work)

Any idea why all of a sudden typescript is causing failures?

Cypress run without percy:

C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org>npm run cypress

> [email protected] cypress C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org
> run-p --race server cypress:test


> [email protected] server C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org
> pipenv run python network-api/manage.py runserver


> [email protected] cypress:test C:\Users\Pomax\Documents\Git\collaborations\mozilla\foundation.mozilla.org
> wait-on tcp:8000 && cypress run

Loading .env environment variables…
Performing system checks...

System check identified no issues (0 silenced).
January 30, 2019 - 14:24:31
Django version 1.11.18, using settings 'networkapi.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.


====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.1.4                                                                              │
  │ Browser:    Electron 59 (headless)                                                             │
  │ Specs:      2 found (multi-page.js, single-page.js)                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running: multi-page.js...                                                                (1 of 2)


  multipage visual regression tests
2019-01-30 14:24:52,749 [INFO] "GET /en/campaigns/multi-page/ HTTP/1.1" 200 13332
[...snip...]
2019-01-30 14:24:53,313 [INFO] "GET /environment.json HTTP/1.1" 200 235
    √ Loads the multipage campaign correctly (13362ms)


  1 passing (13s)


  (Results)

  ┌─────────────────────────────┐
  │ Tests:        1             │
  │ Passing:      1             │
  │ Failing:      0             │
  │ Pending:      0             │
  │ Skipped:      0             │
  │ Screenshots:  0             │
  │ Video:        false         │
  │ Duration:     13 seconds    │
  │ Spec Ran:     multi-page.js │
  └─────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running: single-page.js...                                                               (2 of 2)


  Integration test with visual testing
2019-01-30 14:25:07,509 [INFO] "GET / HTTP/1.1" 302 0
[...snip...]
2019-01-30 14:25:08,001 [INFO] "GET /_images/buyers-guide/earth.jpg HTTP/1.1" 200 195144
    √ Loads the homepage (12986ms)


  1 passing (13s)


  (Results)

  ┌──────────────────────────────┐
  │ Tests:        1              │
  │ Passing:      1              │
  │ Failing:      0              │
  │ Pending:      0              │
  │ Skipped:      0              │
  │ Screenshots:  0              │
  │ Video:        false          │
  │ Duration:     13 seconds     │
  │ Spec Ran:     single-page.js │
  └──────────────────────────────┘


====================================================================================================

  (Run Finished)


      Spec                                                Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √ multi-page.js                             00:13        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √ single-page.js                            00:13        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    All specs passed!                           00:26        2        2        -        -        -

TypeScript does not know that Percy has added its own command to cy object. It is possible to do this yourself ((https://github.com/cypress-io/cypress-example-todomvc#cypress-intellisense) and it would be neat if it was hassle-free.

So I have a button with "÷" label

<Button name="÷" clickHandler={this.handleClick.bind(this)} orange />

which renders fine on Mac, but during image shots it renders as a weird "A~." character in the top right corner (orange)

See https://percy.io/bahmutov/calculator/builds/1674151

Is this a problem with Linux fonts for example?

I am using Percy with cypress for my TypeScript, React App. I specify certain components to hide in .percy.yml. These changes are getting hidden when running locally. For some reason, i do not see the elements getting hidden when trying to run the tests in Jenkins. ANy help would be appreciated.

Hi

I'm trying to integrate Percy and Cypress for one of my projects.
Sadly Percy doesn't seem to take any snapshots even though I'm calling cy.percySnapshot multiple times.

This is my current test:

describe('Magento tests', () => {
  beforeEach(() => {
    cy.visit(Cypress.env('staging-url'))
  })

  it('Should allow a product to be ordered', () => {
    cy.percySnapshot('Homepage')

    // Forcing due to sticky headers messing up the click area
    cy.get('nav.navigation > ul > li:first-of-type a')
        .click({ force: true })

    cy.percySnapshot('Category - Boxsprings')

    cy.get('.products.list.items.product-items')
        .find('li:first-of-type a.product-item-link')
        .click()

    cy.percySnapshot('Product page')
  })
})

This is my Cypress result:

UPDATE: Seems like percy is unable to capture screenshots on https websites. Is this correct?
This is quite a showstopper for the current project I'm integrating it for.

Hey, thank you all for such an awesome product. I am not really sure is it a problem of cypress + percy or percy itself. But font awesome icons are sometimes (maybe in 30%) not loaded.

Snapshot displays weird empty squares. I know that font icons are not a best solution, but maybe there is a way to make it more stable?

I'm not getting the ignore feature on a page that does not need to be tested, I'm following the Percy documentation (https://docs.percy.io/docs/percy-specific-css).

The implementation is being just as in documentation.

Hi,

Recently I observed that from time to time (random percy builds) there is a problem with missing image assets.

This is a fragment of screenshot taken in percy-build-dashboard:

I use cypress.io as my test-runner. In the test, I'm waiting for resources to be loaded accordingly to this example: (https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__wait-for-resource/cypress/support/index.js).

I serve static files (js, css, images etc.) via simple express server:

const fs = require("fs");

const express = require("express");
const https = require("https");
const port = 3003;

const privateKey = fs.readFileSync("./key.pem");
const certificate = fs.readFileSync("./cert.pem");
const credentials = { key: privateKey, cert: certificate };
const app = express(credentials);

app.use(express.static("dist/webroot"));
app.use(express.static("src/main/resources/webroot"));

https.createServer(credentials, app).listen(port, () => {
    // eslint-disable-next-line no-console
    console.log(
        `Static server listening on port ${port}! https://localhost:${port}`,
    );
});

How can I fix it? Or how can I debug it deeper?

Hello,
In this build SVGs is displaying successfully on Chrome but in Firefox isn't. I've been set .percy.jsonas:

{
    "version": 1,
    "snapshot": {
      "widths": [375, 1280],
      "enable-javascript": true
    },
    "agent": {
      "asset-discovery": {
        "allowed-hostnames": [
          "proxyme.percy.io",
          "render.percy.local"
        ],
        "network-idle-timeout": 50,
        "page-pool-size-min": 5,
        "page-pool-size-max": 20
      }
    }
  }

Chrome:

Firefox:

In this gif is possible to see cypress execution that loads svgs:

For users using Typescript types, the type SnapshotOptions is missing the percyCSS type.

Types def file: 6548bf7

Option for percyCSS https://github.com/percy/percy-cypress/blob/master/lib/index.ts#L31