During snapshot page is reloaded causing test fail

[percy]

During snapshot page is reloaded causing test fail

[melink14]

Thanks for the response the problem is the POST request is to a local percy server which then runs the percy snapshot command:
https://github.com/percy/cli/blob/d7aed9acc771ffe03fc9771543699eb3f2bc6748/packages/core/src/percy.js#L322

I grabbed the verbose logs as well where you can see the navigation reloading the test page. It definitely seems related to asset discovery but maybe there's some setup I did wrong as well though I'm calling percySnapshot with the minimum two arguments...

[percy:core] --------- (9389ms)
[percy:core] Handling snapshot: (0ms)
[percy:core] -> name: rikaichan-window (0ms)
[percy:core] -> url: http://localhost:8000/?wtr-session-id=4e96e160-4f42-485c-88cc-2654674e3b90 (0ms)
[percy:core] -> widths: 375px, 1280px (0ms)
[percy:core] -> minHeight: 1024px (0ms)
[percy:core] -> clientInfo: @percy/puppeteer/2.0.0 (1ms)
[percy:core] -> environmentInfo: puppeteer/8.0.0 (0ms)
[percy:core:page] Initialize page (4ms)
[percy:core:page] Resize page to 375x1024 (14ms)
[percy:core:page] Navigate to: http://localhost:8000/?wtr-session-id=4e96e160-4f42-485c-88cc-2654674e3b90 (3ms)
[percy:core:discovery] Handling request: http://localhost:8000/?wtr-session-id=4e96e160-4f42-485c-88cc-2654674e3b90 (9203ms)
[percy:core:discovery] -> Serving root resource (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/test/rikaicontent_test.js (7ms)
[percy:core:discovery] Handling request: http://localhost:8000/css/popup.css (3ms)
[percy:core:discovery] Handling request: http://localhost:8000/test/chrome_stubs.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/__web-test-runner__/test-framework/home/espeed/projects/rikaikun/node_modules/@web/test-runner-mocha/dist/autorun.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/__web-dev-server__web-socket.js (1ms)
[percy:core:discovery] Processing resource: http://localhost:8000/test/rikaicontent_test.js (20ms)
[percy:core:discovery] -> sha: 567368cac2b949d61f865fb60b93460861a99ef939c737e37a315953d0b5f0cf (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/css/popup.css (141ms)
[percy:core:discovery] -> sha: d88d268faffa4a40fbd14086a4f464db17ce73631d184c27dcd6fa53735eca79 (1ms)
[percy:core:discovery] -> mimetype: text/css (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/sinon-chrome.v3.0.1.js (17ms)
[percy:core:discovery] Processing resource: http://localhost:8000/test/chrome_stubs.js (1ms)
[percy:core:discovery] -> sha: 09e9cb0bf523eafdf1480c0e29d4bc6b589de7e2eeaed5273e4836848c5a68dd (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/__web-dev-server__web-socket.js (1ms)
[percy:core:discovery] -> sha: 5454b514d0b7f85d7f1585d0cc09ab4c5363b7c3cf31e9355156cf4ef421f41c (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/__web-test-runner__/test-framework/home/espeed/projects/rikaikun/node_modules/@web/test-runner-mocha/dist/autorun.js (7ms)
[percy:core:discovery] -> sha: dd3409fb014c1c2f8df404dc65efd47887a1e6a9e8718305ed517da0a0b21123 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21.js (27ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/sinon.v7.5.0.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.isFunction.v4.17.21.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.noop.v4.17.21.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.find.v4.17.21.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.filter.v4.17.21.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.findIndex.v4.17.21.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/urijs.v1.19.7.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.isUndefined.v4.17.21.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.isString.v4.17.21.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.isPlainObject.v4.17.21.js (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/sinon-chrome.v3.0.1.js (12ms)
[percy:core:discovery] -> sha: 5afeae16bcef53a3c4f4e5cdfb6fb3965e5f559372a729b1f04d5300fb2656c8 (1ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_baseGetTag-9a4e71e2.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isFunction-3f2c525b.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_commonjsHelpers-eb5a497e.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_baseIteratee-a1dbee7d.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isArray-e5625ed5.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isObjectLike-fd2938b0.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_overArg-a59df2dd.js (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.isFunction.v4.17.21.js (1ms)
[percy:core:discovery] -> sha: 499b9de07ce9388912740e66ff2ad9328b050ae19bfc82808f308ef9b1b2d774 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.noop.v4.17.21.js (1ms)
[percy:core:discovery] -> sha: 30dbdc9cf883542abf4f0baed7fe5209cee531bcb8b8db1b5e685af5905e3253 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.find.v4.17.21.js (0ms)
[percy:core:discovery] -> sha: edebe0bda7a0a5603d350fdb7cab5975b437e8fa33e579954fe3eae87bc32ccc (1ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.filter.v4.17.21.js (0ms)
[percy:core:discovery] -> sha: c818f9174654bbc0431d5cd9a36a3ff3949f4e4e31f11164687ea547befe5494 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.findIndex.v4.17.21.js (4ms)
[percy:core:discovery] -> sha: 6aa610bd484267b0396cfdcf902318ed91c23a4fe0dc354937369cde698dbd2f (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.isUndefined.v4.17.21.js (1ms)
[percy:core:discovery] -> sha: b11d7f256ea4eda2927624c1b511b2414ea1a9f1a4c2859753342d5ddbef54d8 (1ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.isString.v4.17.21.js (2ms)
[percy:core:discovery] -> sha: 853148b110c176fb07b71dcea133f2264719ab65a4d0cee729e57fe060e6dcfa (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.isPlainObject.v4.17.21.js (6ms)
[percy:core:discovery] -> sha: 806f4d9826e2a5b9e459da5040329c0fc260a7738f217be9f40ab598d3be9a8c (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_baseGetTag-9a4e71e2.js (2ms)
[percy:core:discovery] -> sha: a5975b7d25c8b49d6dc9200b4a19a35afe30fb29238961338c51b057c33e5d2c (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isFunction-3f2c525b.js (1ms)
[percy:core:discovery] -> sha: a2a569fcbcb82076fb986272605ac79baca46cfdb6d1756cd1855cf6af415c3e (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_commonjsHelpers-eb5a497e.js (16ms)
[percy:core:discovery] -> sha: 5abdbae9b52b2a523cceb742043f12fcd5eeca3feaa4cc75bc5c3443f434ae4b (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/urijs.v1.19.7.js (9ms)
[percy:core:discovery] -> sha: 80018c81abaeddbb5919b104fe065ed7acc04ffd2c60cb86803b9c2af83d792d (1ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isArray-e5625ed5.js (0ms)
[percy:core:discovery] -> sha: 35ef417291cffa95edad7c8f537719d36f892796e1b76c7cc3abb5218f7dcd25 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/isObjectLike-fd2938b0.js (0ms)
[percy:core:discovery] -> sha: 24365c6e714539a55de602ccab663232a54837456fd8628a54cbf7d40931097f (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_overArg-a59df2dd.js (0ms)
[percy:core:discovery] -> sha: 6836df2faee1dcedb203190a09ac0f8d2e2a4196f9dcbec504d1ee99ae57dad3 (0ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21.js (79ms)
[percy:core:discovery] -> sha: 1b300bb34cb28dd2d360eb86c464ad5af7e7e937d919beb4b391b4321b3ac4c4 (1ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/lodash.v4.17.21/common/_baseIteratee-a1dbee7d.js (1ms)
extension/test/rikaicontent_test.ts:

 ❌ Tests were interrupted because the page was reloaded. This can happen when clicking a link, submitting a form or interacting with window.location. 


Chromium: |██████████████████████████████| 3/3 test files | 6 passed, 0 failed

Error while running tests.

Waiting for the debugger to disconnect...
[percy:core:discovery] Handling request: http://localhost:8000/rikaicontent.js (147ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/@web.test-runner-commands.v0.5.6.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/@esm-bundle.chai.v4.3.4.js (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/simulant.v0.2.2.js (0ms)
[percy:core:discovery] Processing resource: http://localhost:8000/snowpack/pkg/sinon.v7.5.0.js (13ms)
[percy:core:discovery] -> sha: 8986acc5f98d5bcf8ed10d47e63ef46c9c558b101053c2833ff86b061427b9ae (4ms)
[percy:core:discovery] -> mimetype: application/javascript (0ms)
[percy:core:network] Wait for 100ms idle (0ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/sinon.v11.1.1.js (1ms)
[percy:core:discovery] Handling request: http://localhost:8000/snowpack/pkg/sinon-chai.v3.7.0.js (0ms)
[percy:core:discovery] Request failed for http://localhost:8000/rikaicontent.js: net::ERR_CONNECTION_REFUSED (1ms)
[percy:core:discovery] Request failed for http://localhost:8000/snowpack/pkg/@web.test-runner-commands.v0.5.6.js: net::ERR_CONNECTION_REFUSED (0ms)
[percy:core:discovery] Request failed for http://localhost:8000/snowpack/pkg/@esm-bundle.chai.v4.3.4.js: net::ERR_CONNECTION_REFUSED (0ms)
[percy:core:discovery] Request failed for http://localhost:8000/snowpack/pkg/simulant.v0.2.2.js: net::ERR_CONNECTION_REFUSED (0ms)
[percy:core:discovery] Request failed for http://localhost:8000/snowpack/pkg/sinon.v11.1.1.js: net::ERR_CONNECTION_REFUSED (1ms)
[percy:core] Stopping percy... (6ms)
[percy:core:discovery] Request failed for http://localhost:8000/snowpack/pkg/sinon-chai.v3.7.0.js: net::ERR_CONNECTION_REFUSED (1ms)
[percy:core] Snapshot taken: rikaichan-window (111ms)
[percy:core] Encountered an error taking snapshot: rikaichan-window (0ms)
[percy:core] Error: Closed
    at Queue.push (/home/espeed/projects/rikaikun/node_modules/@percy/core/dist/queue.js:42:28)
    at Percy._scheduleUpload (/home/espeed/projects/rikaikun/node_modules/@percy/core/dist/percy.js:427:43)
    at Object.callback (/home/espeed/projects/rikaikun/node_modules/@percy/core/dist/percy.js:380:16) (1ms)
[percy:core:page] Page closing (1ms)
[percy:client] Finalizing build 11819827... (33ms)
[percy:core] Finalized build #24: https://percy.io/b36da0a9/rikaikun/builds/11819827 (525ms)

Before that the only logs output by percy were the start up logs:

[percy:config] Config file not found (0ms)
[percy:client] Creating a new build... (15ms)
[percy:core] Percy has started! (706ms)
[percy:cli:exec] Running "wtr extension/test/*test*" (0ms)

[melink14]

Now it works! (Well, except that percy doesn't have japanese fonts by default).

It looks like if JS off the test framework doesn't care so much that the page was navigated to again...

Now I get to think about whether I prefer a percy upload flow vs using snapshot and what the trade offs are!

edit: It turns out I had to add a meta tag with charset=utf-8 for Japanese characters to render correctly. The default Percy Japanese font is pretty cool so I'm going to have to look it up.

[melink14]

I looked at it a bit more and it's harder to solve than I thought since the snapshot command has it's own puppeteer object that it uses to do the final snapshot. Not sure if there's a way to skip it but it looks like this is the step where it does asset collection;

I had imagined a scenario where I could use percy to take a snapshot of my already rendered page (given it's setup by my tests) but I probably misunderstood the primary usecase for this plugin.

edit: I did find the percy upload command which can upload arbitrary screenshots so plan to use this in combination with another screenshot tool. If that ends up being too flakey then I can probably implement a custom dev server

[Robdel12]

Hey @melink14! I'm not quite sure I follow what's going on. Percy's SDK doesn't reload the test harness or the page (it shouldn't). We run JS to serialize/capture DOM state and from there POST that stringified DOM to the CLI process, which discovers/captures assets on the page. The Puppeteer SDK is pretty much two page.evaluates and a POST request. https://github.com/percy/percy-puppeteer/blob/master/index.js#L18-L35

Full debug logs would help, too (--verbose or PERCY_LOGLEVEL=debug)

[Robdel12]

I think this is likely related to percy/cli#453 -- can you try upgrading to @percy/[email protected] ?

[github-actions]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.