profile
viewpoint
Henric Trotzig trotzig @happo Stockholm Software engineer, founder of happo.io.

civiccc/react-waypoint 3555

A React component to execute a function whenever you scroll to an element.

Galooshi/import-js 496

A tool to simplify importing JS modules

trotzig/find-dead-modules 6

A script to find dead javascript modules/files in your project

trotzig/Burrito 5

Burrito is a lightweight content management framework (CMF) built in Java

happo/happo-plugin-puppeteer 3

Use Puppeteer (Chrome) to prerender happo.io examples instead of JSDOM

happo/happo-demo-storybook 1

A demo of Happo running with Storybook

trotzig/Burrito-CMF-demo 1

A demo of Burrito CMF

trotzig/CMFaur---deprecated--replaced-by-Burrito- 1

A lightweight content management framework, built on top of MVCaur

happo/happo-deep-compare 0

A replacement tool for `happo compare` that can be tuned to allow subtle diffs

happo/happo-demo-backbone 0

This is a test project using backbone.js to power a happo test suite.

PR opened happo/happo-cypress-example-todomvc

Update happo-cypress to 1.3.0

We don't need anything from this release, but I wanted to make sure we're on the latest version to make sure we're not breaking anything.

+4 -4

0 comment

2 changed files

pr created time in 3 hours

created taghappo/docs

tagv1.3.1

Source code for Happo documentation

created time in 3 hours

push eventhappo/docs

Henric Trotzig

commit sha 8a49f15fa65f4871cdb90c97fd5b447e103f9899

Add usage example of happo-cypress with yarn We found out that you have to specify the double dashes twice. The first ones go missing (as they are consumed by yarn itself).

view details

Henric Trotzig

commit sha 624f11d4fff85f10a6e9a35b00e6d6da9233e0de

v1.3.1

view details

push time in 3 hours

fork trotzig/cypress

Fast, easy and reliable testing for anything that runs in a browser.

https://www.cypress.io

fork in 3 hours

create barnchhappo/happo-cypress-example-todomvc

branch : update-happo-cypress

created branch time in 3 hours

push eventtrotzig/dotfiles

Henric Trotzig

commit sha 13f032af166ded40d9ee9024dda316f8f4a77d14

Add supertab vim plugin This will make my dev experience smoother by knowing variables and such to insert when pressing <tab>.

view details

Henric Trotzig

commit sha 3f8d4f261aeb811c3f85116a24fa5b1f7021eafc

Update prettier printWidth

view details

Henric Trotzig

commit sha 5b37febba8f38e86512f68e77886029bc6e78fd0

Add UltiSnips with it/bef/des snippets I use these when writing tests. I'll probably add a few more over the coming weeks.

view details

Henric Trotzig

commit sha 0ea1c11538bbdac1ccea3d4105cd323ea4686098

Use compiled vim when committing Before, a different version of vim would be used, failing because UltiSnips couldn't be loaded.

view details

push time in a day

release happo/happo-cypress

v1.3.0

released time in a day

created taghappo/happo-cypress

tagv1.3.0

A Happo integration with Cypress.io

created time in a day

push eventhappo/happo-cypress

Henric Trotzig

commit sha bfb5385e959f733548324261c15c712a91641d99

1.3.0

view details

push time in a day

delete branch happo/happo-cypress

delete branch : tainted-canvases

delete time in a day

push eventhappo/happo-cypress

Henric Trotzig

commit sha 7cc018005d6204d131fdbfee5a640f20a5407fe1

Don't attempt to inline tainted canvases If we come across a canvas with an external image, and the CORS settings of the external image isn't allowing it to be pixel-inspected, the call to ctx.toDataURL() will fail with a SecurityError. We can catch this error, log a warning and simply move along.

view details

Henric Trotzig

commit sha ad11f6df92ce6ce434b5fbf578ff8e3053868447

Merge pull request #11 from happo/tainted-canvases Don't attempt to inline tainted canvases

view details

push time in a day

PR merged happo/happo-cypress

Don't attempt to inline tainted canvases

If we come across a canvas with an external image, and the CORS settings of the external image isn't allowing it to be pixel-inspected, the call to ctx.toDataURL() will fail with a SecurityError. We can catch this error, log a warning and simply move along.

+59 -12

0 comment

3 changed files

trotzig

pr closed time in a day

PR opened happo/happo-cypress

Don't attempt to inline tainted canvases

If we come across a canvas with an external image, and the CORS settings of the external image isn't allowing it to be pixel-inspected, the call to ctx.toDataURL() will fail with a SecurityError. We can catch this error, log a warning and simply move along.

+59 -12

0 comment

3 changed files

pr created time in 2 days

create barnchhappo/happo-cypress

branch : tainted-canvases

created branch time in 2 days

delete branch happo/happo-cypress

delete branch : inline-canvases

delete time in 2 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 0a71bdba19730fb95131c258be0903f0d32cef32

Inline canvases as PNG images This commit will make sure that happo-cypress users can screenshoot canvases. These are dynamically painted to, and there's no information in the DOM about what they contain. So we take the canvas and convert it to a PNG file. For now, no styles from the canvas are transferred to the image. This will mean that things like borders, margins, etc will go missing. I'm going to address this in a follow-up. I might also address the fact that we leave the dom "tainted". It might be best to clean up after ourselves (putting back what we remove).

view details

Henric Trotzig

commit sha 134d4643bccb63865b494a856ff2468609d99c39

Move all styles when replacing canvases To make the injected image look exactly like the canvas, we need to transfer the canvas'es styling to the image. Using getComputedStyle will make us end up with a large style attribute for the image. Here's an example from a test I ran: style="animation: 0s ease 0s 1 normal none running none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; border: 2px solid rgb(255, 0, 0); border-radius: 0px; border-collapse: separate; bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: normal; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font: 400 16px / 16px CustomFont; font-kerning: auto; font-optical-sizing: auto; height: 100px; image-orientation: from-image; image-rendering: auto; isolation: auto; place-items: normal; place-self: auto; left: auto; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; orphans: 2; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow: visible; padding: 20px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(0, 0, 0); text-decoration-skip-ink: auto; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 200px; will-change: auto; word-break: normal; word-spacing: 0px; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; columns: auto auto; gap: normal; column-rule: 0px none rgb(0, 0, 0); column-span: none; backdrop-filter: none; place-content: normal; flex: 0 1 auto; flex-flow: row nowrap; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-area: auto / auto / auto / auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: "en"; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 122px 72px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(0, 0, 0); -webkit-text-emphasis-position: over right; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(0, 0, 0); transform: none; transform-origin: 122px 72px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: none; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: normal; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(0, 0, 0); line-break: auto;" This is of course quite verbose, but I think it's better to assume we can't leave any of these out than trying to extract exactly the right ones.

view details

Henric Trotzig

commit sha 9d288d9ef978cab78fd48f0c19e94b007b046ad4

Clean up DOM after taking snapshot Now that we replace canvases with images as part of the snapshot process, it feels wrong to leave the replaced image in the DOM. While this might not be an issue in many scenarios, it could pose problems to things like React, where we'll confuse React's internal engine by tampering with the DOM and not cleaning up. We leave the cleanup to the inlineCanvases function, which can hold on to references to elements that were replaced and make the opposite replacement at the very end.

view details

Henric Trotzig

commit sha c72e46801b5e274efa2633e5cc941a6a1d9cfdf4

Merge pull request #10 from happo/inline-canvases Inline canvases as PNG images

view details

push time in 2 days

PR merged happo/happo-cypress

Inline canvases as PNG images

This commit will make sure that happo-cypress users can screenshoot canvases. These are dynamically painted to, and there's no information in the DOM about what they contain. So we take the canvas and convert it to a PNG file.

+63 -6

0 comment

4 changed files

trotzig

pr closed time in 2 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 9d288d9ef978cab78fd48f0c19e94b007b046ad4

Clean up DOM after taking snapshot Now that we replace canvases with images as part of the snapshot process, it feels wrong to leave the replaced image in the DOM. While this might not be an issue in many scenarios, it could pose problems to things like React, where we'll confuse React's internal engine by tampering with the DOM and not cleaning up. We leave the cleanup to the inlineCanvases function, which can hold on to references to elements that were replaced and make the opposite replacement at the very end.

view details

push time in 2 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 134d4643bccb63865b494a856ff2468609d99c39

Move all styles when replacing canvases To make the injected image look exactly like the canvas, we need to transfer the canvas'es styling to the image. Using getComputedStyle will make us end up with a large style attribute for the image. Here's an example from a test I ran: style="animation: 0s ease 0s 1 normal none running none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; border: 2px solid rgb(255, 0, 0); border-radius: 0px; border-collapse: separate; bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: normal; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font: 400 16px / 16px CustomFont; font-kerning: auto; font-optical-sizing: auto; height: 100px; image-orientation: from-image; image-rendering: auto; isolation: auto; place-items: normal; place-self: auto; left: auto; letter-spacing: normal; list-style: outside none disc; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; orphans: 2; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow: visible; padding: 20px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(0, 0, 0); text-decoration-skip-ink: auto; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 200px; will-change: auto; word-break: normal; word-spacing: 0px; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; columns: auto auto; gap: normal; column-rule: 0px none rgb(0, 0, 0); column-span: none; backdrop-filter: none; place-content: normal; flex: 0 1 auto; flex-flow: row nowrap; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-area: auto / auto / auto / auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-locale: "en"; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; order: 0; perspective: none; perspective-origin: 122px 72px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis: none rgb(0, 0, 0); -webkit-text-emphasis-position: over right; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(0, 0, 0); transform: none; transform-origin: 122px 72px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: none; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: normal; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(0, 0, 0); line-break: auto;" This is of course quite verbose, but I think it's better to assume we can't leave any of these out than trying to extract exactly the right ones.

view details

push time in 2 days

PR opened happo/happo-cypress

Inline canvases as PNG images

This commit will make sure that happo-cypress users can screenshoot canvases. These are dynamically painted to, and there's no information in the DOM about what they contain. So we take the canvas and convert it to a PNG file.

For now, no styles from the canvas are transferred to the image. This will mean that things like borders, margins, etc will go missing. I'm going to address this in a follow-up. I might also address the fact that we leave the dom "tainted". It might be best to clean up after ourselves (putting back what we remove).

+46 -6

0 comment

3 changed files

pr created time in 2 days

create barnchhappo/happo-cypress

branch : inline-canvases

created branch time in 2 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 977dd1b2c2163a0e5d2e9ed65b2535d7ccf7fd0e

1.2.0

view details

push time in 2 days

created taghappo/docs

tagv1.3.0

Source code for Happo documentation

created time in 3 days

push eventhappo/docs

Henric Trotzig

commit sha b22ee793ec9e4ebb208d7d261ffa2d08edcb6f66

Add docs for parallel cypress runs I just released support for this.

view details

Henric Trotzig

commit sha 1b53bbe5f89a42536603a422fc4c0554032f39dc

v1.3.0

view details

push time in 3 days

release happo/happo-cypress

v1.2.0

released time in 3 days

created taghappo/happo-cypress

tagv1.2.0

A Happo integration with Cypress.io

created time in 3 days

delete branch happo/happo-cypress

delete branch : simplify-circle-config

delete time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha c9fa4311d473afd47a61e78ddb499e1fe022a225

Simplify and speed up cypress runs Now that we have two separate runs (one serial and the other parallel), we can optimize builds a little by combining them in the same job and reusing the install phase.

view details

Henric Trotzig

commit sha 99d6ce32a987f3376a3f0325aef1f8f02179a213

Give cypress runs names in .circleci/config.yml The previous config wasn't validating: #!/bin/sh -eo pipefail # Job 'finalize-happo' requires 'cypress/run', which is the name of 2 other jobs in workflow 'cypress' # You can give a job within a workflow an explicit name by adding a `name` key # # ------- # Warning: This configuration was auto-generated to show you the message above. # Don't rerun this job. Rerunning will have no effect. false Exited with code exit status 1 CircleCI received exit code 1

view details

Henric Trotzig

commit sha e67b52a29ff109523b17e38b38ae08d012456217

Fix command-prefix for serial cypress run This command prefix wasn't right. I'm not 100% sure what effects this mistake had caused.

view details

Henric Trotzig

commit sha b0be139ad62386d9d2e88af2e746647573485916

Merge pull request #9 from happo/simplify-circle-config Simplify and speed up cypress runs

view details

push time in 3 days

PR merged happo/happo-cypress

Simplify and speed up cypress runs

Now that we have two separate runs (one serial and the other parallel), we can optimize builds a little by combining them in the same job and reusing the install phase.

+8 -6

0 comment

1 changed file

trotzig

pr closed time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha e67b52a29ff109523b17e38b38ae08d012456217

Fix command-prefix for serial cypress run This command prefix wasn't right. I'm not 100% sure what effects this mistake had caused.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 99d6ce32a987f3376a3f0325aef1f8f02179a213

Give cypress runs names in .circleci/config.yml The previous config wasn't validating: #!/bin/sh -eo pipefail # Job 'finalize-happo' requires 'cypress/run', which is the name of 2 other jobs in workflow 'cypress' # You can give a job within a workflow an explicit name by adding a `name` key # # ------- # Warning: This configuration was auto-generated to show you the message above. # Don't rerun this job. Rerunning will have no effect. false Exited with code exit status 1 CircleCI received exit code 1

view details

push time in 3 days

PR opened happo/happo-cypress

Simplify and speed up cypress runs

Now that we have two separate runs (one serial and the other parallel), we can optimize builds a little by combining them in the same job and reusing the install phase.

+4 -4

0 comment

1 changed file

pr created time in 3 days

create barnchhappo/happo-cypress

branch : simplify-circle-config

created branch time in 3 days

delete branch happo/happo-cypress

delete branch : parallel-runs

delete time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha b09753673fdbe05e0cb2a9fff58d0795f9b15f64

Add Cypress run that execute in parallel I'm adding support for a `happo-cypress finalize` command, which will be used for test suites that execute in parallel. Before I work on the finalize command, I want to make sure I can run parallel Cypress runs. The second cypress run will show up as a "Happo (parallel)" build status (eventually).

view details

Henric Trotzig

commit sha 2996c444ba22bce7cce7e741dded771d3cd91f3e

Use yarn when installing deps in parallel build

view details

Henric Trotzig

commit sha f4265f399b384746bb4ea32a7c96ea4d2b0fb802

Try running parallel cypress with command-prefix The first example ended up running all tests for each parallel instance.

view details

Henric Trotzig

commit sha ab59b2851ce53cb7f893a582e0034cef7abfa57a

Add Cypress projectId This id is needed when running parallel runs in CI.

view details

Henric Trotzig

commit sha ca71f515c9545fed97ffd8a7d11aa9e158d84b6c

Add support for `happo-cypress finalize` This command will be used in cases where you're running cypress tests in parallel and you need to "finish up" a Happo report at the very end, after all the test runs have finished. An important part of this puzzle is the HAPPO_NONCE environment variable which is a common identifier amongst all parallel runs. It triggers slightly different behavior for the test run: - individual `happo-cypress -- cypress run`s won't make comparisons - each individual run will "patch" the async report with snap-request ids

view details

Henric Trotzig

commit sha 839069f2878799d3e3d443c89da38aa7b9e00ffb

Add `happo-cypress finalize` call to Circle CI run This will demonstrate and test the new functionality around parallel runs. We use a HAPPO_NONCE environment variable to group together multiple Cypress runs which is combined into a single report at the very end in the finalize call.

view details

Henric Trotzig

commit sha e6597ca70891ed60138a0b3761e82ac530dd3f02

Fix lints

view details

Henric Trotzig

commit sha e83ab7c1aaf5d56d7fa1e172d5978b70eb00b0a2

Use workflow-unique id as HAPPO_NONCE The previous ID changed for each job, which won't work in our case.

view details

Henric Trotzig

commit sha a376b7978b3f5eb23b330fa1993a50bdd6336324

Add HAPPO_PROJECT to finalize call Otherwise happo will try to finalize the default report, which isn't the one we're parallelizing.

view details

Henric Trotzig

commit sha 2e0bf2bc016fd06315061e6fa7491136cb515a12

Merge pull request #8 from happo/parallel-runs Add Cypress run that execute in parallel

view details

push time in 3 days

PR merged happo/happo-cypress

Add Cypress run that execute in parallel

I'm adding support for a happo-cypress finalize command, which will be used for test suites that execute in parallel. Before I work on the finalize command, I want to make sure I can run parallel Cypress runs.

The second cypress run will show up as a "Happo (parallel)" build status (eventually).

+79 -7

0 comment

6 changed files

trotzig

pr closed time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha a376b7978b3f5eb23b330fa1993a50bdd6336324

Add HAPPO_PROJECT to finalize call Otherwise happo will try to finalize the default report, which isn't the one we're parallelizing.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha e6597ca70891ed60138a0b3761e82ac530dd3f02

Fix lints

view details

Henric Trotzig

commit sha e83ab7c1aaf5d56d7fa1e172d5978b70eb00b0a2

Use workflow-unique id as HAPPO_NONCE The previous ID changed for each job, which won't work in our case.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha ca71f515c9545fed97ffd8a7d11aa9e158d84b6c

Add support for `happo-cypress finalize` This command will be used in cases where you're running cypress tests in parallel and you need to "finish up" a Happo report at the very end, after all the test runs have finished. An important part of this puzzle is the HAPPO_NONCE environment variable which is a common identifier amongst all parallel runs. It triggers slightly different behavior for the test run: - individual `happo-cypress -- cypress run`s won't make comparisons - each individual run will "patch" the async report with snap-request ids

view details

Henric Trotzig

commit sha 839069f2878799d3e3d443c89da38aa7b9e00ffb

Add `happo-cypress finalize` call to Circle CI run This will demonstrate and test the new functionality around parallel runs. We use a HAPPO_NONCE environment variable to group together multiple Cypress runs which is combined into a single report at the very end in the finalize call.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha ab59b2851ce53cb7f893a582e0034cef7abfa57a

Add Cypress projectId This id is needed when running parallel runs in CI.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha f4265f399b384746bb4ea32a7c96ea4d2b0fb802

Try running parallel cypress with command-prefix The first example ended up running all tests for each parallel instance.

view details

push time in 3 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 2996c444ba22bce7cce7e741dded771d3cd91f3e

Use yarn when installing deps in parallel build

view details

push time in 3 days

PR opened happo/happo-cypress

Add Cypress run that execute in parallel

I'm adding support for a happo-cypress finalize command, which will be used for test suites that execute in parallel. Before I work on the finalize command, I want to make sure I can run parallel Cypress runs.

The second cypress run will show up as a "Happo (parallel)" build status (eventually).

+13 -0

0 comment

2 changed files

pr created time in 3 days

create barnchhappo/happo-cypress

branch : parallel-runs

created branch time in 3 days

created taghappo/docs

tagv1.2.0

Source code for Happo documentation

created time in 4 days

push eventhappo/docs

Henric Trotzig

commit sha 0f44380c16106cd0254b04234ea87da3b9a6bee5

Add docs for `targets` option for cypress integration I just released this in happo-cypress@1.1.0

view details

Henric Trotzig

commit sha 5f43c5a2b58fc013b0efd2f6cdc90ce284f3e83d

v1.2.0

view details

push time in 4 days

release happo/happo-cypress

v1.1.0

released time in 4 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 98515597306a19eb8cc3288364b0143da625ace1

1.1.0

view details

push time in 4 days

created taghappo/happo-cypress

tagv1.1.0

A Happo integration with Cypress.io

created time in 4 days

delete branch happo/happo-cypress

delete branch : limit-targets

delete time in 4 days

PR merged happo/happo-cypress

Add `targets` option to `happoScreenshot`

This will allow people to limit the number of targets for which they generate screenshots. This is similar to what we do for Happo Examples: https://docs.happo.io/docs/examples#limiting-targets

+8 -2

0 comment

3 changed files

trotzig

pr closed time in 4 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 7482dc637f7bfc8c422d95edb03948162613f005

Add `targets` option to `happoScreenshot` This will allow people to limit the number of targets for which they generate screenshots. This is similar to what we do for Happo Examples: https://docs.happo.io/docs/examples#limiting-targets

view details

Henric Trotzig

commit sha 5e88800e4df7da21d5b7bd76f724124fae7ab741

Merge pull request #7 from happo/limit-targets Add `targets` option to `happoScreenshot`

view details

push time in 4 days

PR opened happo/happo-cypress

Add `targets` option to `happoScreenshot`

This will allow people to limit the number of targets for which they generate screenshots. This is similar to what we do for Happo Examples: https://docs.happo.io/docs/examples#limiting-targets

+8 -2

0 comment

3 changed files

pr created time in 4 days

create barnchhappo/happo-cypress

branch : limit-targets

created branch time in 4 days

issue commenthappo/happo-cypress

Cypress plugin not able to fetch data

Released in v1.0.1.

@filiphric Let me know if that release doesn't help resolve your issue!

filiphric

comment created time in 5 days

release happo/happo-cypress

v1.0.1

released time in 5 days

created taghappo/happo-cypress

tagv1.0.1

A Happo integration with Cypress.io

created time in 5 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha ab5cb590a80047e9af459ae0d5fe03026e5479e9

1.0.1

view details

push time in 5 days

delete branch happo/happo-cypress

delete branch : resolve-assets-base

delete time in 5 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 6cf0b3edd21c8b4c482a25d3a326870f11e65e55

Prefix fetch failure log with [HAPPO] All other logs have this prefix, so we might as well use the same prefix here.

view details

Henric Trotzig

commit sha 09559b8ef6ccbc5b8034358bdd3e0def2d83227c

Resolve assets by document.location instead of `baseUrl` When resolving assets (css files, images, etc), we were assuming that they would come from `baseUrl` (as defined in cypress.json) when they started with a `/`. That isn't true in case you're visiting pages that aren't using the same baseUrl. To fix this, I'm making all asset urls relative to the document they were in when they were fetched. This removes the dependency between happo-cypress and cypress.json as we can always grab the baseUrl from the document.location. Fixes #5

view details

Henric Trotzig

commit sha eae4202400d781d5639b8d972d78fb1e1e9fd82c

Merge pull request #6 from happo/resolve-assets-base Resolve assets base

view details

push time in 5 days

PR merged happo/happo-cypress

Resolve assets base

This PR should fix #5.

We can't assume assets are located on the same origin as what's defined as the baseUrl in cypress.json. Instead, we always have to look them up with the document's base url (document.location.origin).

+44 -32

0 comment

3 changed files

trotzig

pr closed time in 5 days

issue closedhappo/happo-cypress

Cypress plugin not able to fetch data

Hello there!

I’m trying out integrating Happo with Cypress. During my headless run, it seems that happo is not able to download all the needed assets. These are not external, they are all on the same domain as the app I’m trying to test.

Screenshot 2020-05-28 at 09 56 39

This results in a page rendered without images (svg format) Screenshot 2020-05-28 at 09 58 12

desired appearance: Screenshot 2020-05-28 at 10 02 04

How can I enable fetching these assets?

closed time in 5 days

filiphric

issue commenthappo/happo-cypress

Cypress plugin not able to fetch data

I found a fix that I'm releasing in a sec. Hold on.

filiphric

comment created time in 5 days

PR opened happo/happo-cypress

Resolve assets base

This PR should fix #5.

We can't assume assets are located on the same origin as what's defined as the baseUrl in cypress.json. Instead, we always have to look them up with the document's base url (document.location.origin).

+44 -32

0 comment

3 changed files

pr created time in 5 days

create barnchhappo/happo-cypress

branch : resolve-assets-base

created branch time in 5 days

issue commenthappo/happo-cypress

Cypress plugin not able to fetch data

That is likely a problem, although we should be able to handle that case as well.

filiphric

comment created time in 5 days

issue commenthappo/happo-cypress

Cypress plugin not able to fetch data

Okay, got it! Second question is if you’re defining baseUrl in your cypress config?

filiphric

comment created time in 5 days

issue commenthappo/happo-cypress

Cypress plugin not able to fetch data

Hi @filiphric! Quick response, I’ll have a closer look at this later today —

Are these assets showing up when you run Cypress without happo?

filiphric

comment created time in 5 days

delete branch happo/happo-cypress-example-todomvc

delete branch : add-second-spec

delete time in 6 days

push eventhappo/happo-cypress-example-todomvc

Henric Trotzig

commit sha d63924c8f600d79f1663faf46212719db674f8d5

Add second test file We're trying to figure out if adding another test file will result in two happo reports or just one.

view details

Henric Trotzig

commit sha 8bf207d71fc99c5a7bfb8d07ece61ccd07243c4c

Update to latest happo-cypress 1.0.0 This version has a fix for creating one report for all tests.

view details

Henric Trotzig

commit sha 6546a664008cb53528ecc65580448613605bcc6a

Merge pull request #4 from happo/add-second-spec Add second test file

view details

push time in 6 days

PR merged happo/happo-cypress-example-todomvc

Add second test file

We're trying to figure out if adding another test file will result in two happo reports or just one.

+40 -17

0 comment

5 changed files

trotzig

pr closed time in 6 days

created taghappo/docs

tagv1.1.1

Source code for Happo documentation

created time in 7 days

push eventhappo/docs

Henric Trotzig

commit sha f4ae9b8376cfd88d119f0bdd91096eac7bfaab2d

Bump to 1.1.1

view details

push time in 7 days

push eventhappo/happo-cypress-example-todomvc

Henric Trotzig

commit sha 8bf207d71fc99c5a7bfb8d07ece61ccd07243c4c

Update to latest happo-cypress 1.0.0 This version has a fix for creating one report for all tests.

view details

push time in 7 days

created taghappo/docs

tagv1.1.0

Source code for Happo documentation

created time in 7 days

push eventhappo/docs

Henric Trotzig

commit sha 29ed79cb10225fc35462a8140c4b9dd828409a51

Add docs for `happo-cypress` prefix Now that v1.0.0 is released, we need to document things.

view details

push time in 7 days

release happo/happo-cypress

v1.0.0

released time in 7 days

created taghappo/happo-cypress

tagv1.0.0

A Happo integration with Cypress.io

created time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 30236ae6ef1e6c7f9e518c5d7df67a782783d64e

1.0.0

view details

push time in 7 days

delete branch happo/happo-cypress

delete branch : wrap-command

delete time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 711eb1973f01f8bbe6aed84950a62d5afbde7988

Add happo-cypress wrapper command After a lot of debugging and exploration, I've landed in a fix for the problem where a Cypress run creates multiple happo reports, one per test file. This was first reported last week and to begin with I couldn't repro it. In short, this was the bug: When you have multiple test files, Happo creates one report per file, instead of one combined report. When running with `cypress open`, the `after` hook was only called once per full run. But if you ran `cypress run`, the behavior changed to calling `after` once per test file. There's a bug for this in the Cypress issue tracker: https://github.com/cypress-io/cypress/issues/5160 To mitigate this, I tried hard to find a place/hook or something where Cypress would tell me one of these things: The full suite is done, or These are the specs in the full run Either of those would be sufficient enough for our plugin to conditionally create the Happo report once the `after` hook is called for the last time. But I couldn't find any of this information available from Cypress. So I did what Percy.io is doing -- added a wrapper command that you need to use instead of `cypress run`: happo-cypress -- cypress run This call will set up a server locally, invoke the wrapped command, accept `requestIds` to be POSTed to the server and then finally, once the wrapped command is done, create the full Happo report. It's a little unfortunate that we have to go down this route as there's a lot of complexity involved: - Users will have to make sure to wrap the Cypress command - We have to be careful about choosing a good port (for now this is hard-coded).

view details

Henric Trotzig

commit sha c0118b9756ec7437ea8cc2fd3f25ad66e11daaa2

Add happo-cypress bin to package.json This will allow people to execute e.g. `npx happo-cypress --`, `yarn happo-cypress` etc in their projects (once it is released).

view details

Henric Trotzig

commit sha 1119998b8280b4ee2298088f4cf880b4ad174b22

Allow happo-cypress port to be configured With the `--port 3423` flag. This will help people who have conflicting things running on the default port.

view details

Henric Trotzig

commit sha f0a25d667d43b5a0f59de4b305538f34d74ff66c

Run cypress tests in CI This will further help ensure that the module is working as intended. So far I've not added the `happo-cypress` prefix to the cypress command, that will come in a follow-up.

view details

Henric Trotzig

commit sha 529ec59d9df5240939de87c11bb18aaf0d3a0d12

Unbreak runs without `happo-cypress --` prefix When working locally, it helps if you can get happo snapshots even if you're running `cypress open` without the `happo-cypress --` wrapper.

view details

Henric Trotzig

commit sha be7c4282bd6f0a7a048e597d67c49fa67f3b2770

Add happo-cypress prefix to CI run So that the right reports and comparisons are created.

view details

Henric Trotzig

commit sha 9cfc5aa00836e3352ea5e144f16b6579499e29cf

Switch to defining full command in .circleci/config.yml The prefix didn't work, I got this error: { Error: spawn cypress ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19) at onErrorNT (internal/child_process.js:407:16) at process._tickCallback (internal/process/next_tick.js:63:19) at Function.Module.runMain (internal/modules/cjs/loader.js:744:11) at startup (internal/bootstrap/node.js:285:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3) errno: 'ENOENT', code: 'ENOENT', syscall: 'spawn cypress', path: 'cypress', spawnargs: [ 'run' ] }

view details

Henric Trotzig

commit sha 4e9fba53962bf9566fd132b2a18c4a89e85431df

Merge pull request #4 from happo/wrap-command Add happo-cypress wrapper command

view details

push time in 7 days

PR merged happo/happo-cypress

Add happo-cypress wrapper command

After a lot of debugging and exploration, I've landed in a fix for the problem where a Cypress run creates multiple happo reports, one per test file.

This was first reported last week and to begin with I couldn't repro it. In short, this was the bug:

When you have multiple test files, Happo creates one report per file, instead of one combined report.

When running with cypress open, the after hook was only called once per full run. But if you ran cypress run, the behavior changed to calling after once per test file. There's a bug for this in the Cypress issue tracker: https://github.com/cypress-io/cypress/issues/5160

To mitigate this, I tried hard to find a place/hook or something where Cypress would tell me one of these things: The full suite is done, or These are the specs in the full run

Either of those would be sufficient enough for our plugin to conditionally create the Happo report once the after hook is called for the last time. But I couldn't find any of this information available from Cypress. So I did what Percy.io is doing -- added a wrapper command that you need to use instead of cypress run:

happo-cypress -- cypress run

This call will set up a server locally, invoke the wrapped command, accept requestIds to be POSTed to the server and then finally, once the wrapped command is done, create the full Happo report.

It's a little unfortunate that we have to go down this route as there's a lot of complexity involved:

  • Users will have to make sure to wrap the Cypress command
  • We have to be careful about choosing a good port (for now this is hard-coded).
+195 -53

0 comment

6 changed files

trotzig

pr closed time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 9cfc5aa00836e3352ea5e144f16b6579499e29cf

Switch to defining full command in .circleci/config.yml The prefix didn't work, I got this error: { Error: spawn cypress ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19) at onErrorNT (internal/child_process.js:407:16) at process._tickCallback (internal/process/next_tick.js:63:19) at Function.Module.runMain (internal/modules/cjs/loader.js:744:11) at startup (internal/bootstrap/node.js:285:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3) errno: 'ENOENT', code: 'ENOENT', syscall: 'spawn cypress', path: 'cypress', spawnargs: [ 'run' ] }

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha be7c4282bd6f0a7a048e597d67c49fa67f3b2770

Add happo-cypress prefix to CI run So that the right reports and comparisons are created.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 529ec59d9df5240939de87c11bb18aaf0d3a0d12

Unbreak runs without `happo-cypress --` prefix When working locally, it helps if you can get happo snapshots even if you're running `cypress open` without the `happo-cypress --` wrapper.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha f0a25d667d43b5a0f59de4b305538f34d74ff66c

Run cypress tests in CI This will further help ensure that the module is working as intended. So far I've not added the `happo-cypress` prefix to the cypress command, that will come in a follow-up.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha ad4a390a83c47c532def7793687971fef65ef783

Run cypress tests in CI This will further help ensure that the module is working as intended. So far I've not added the `happo-cypress` prefix to the cypress command, that will come in a follow-up.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha b67aed3b064bb8bea7e5cbb043d2f83e10eb8bb8

Run cypress tests in CI This will further help ensure that the module is working as intended. So far I've not added the `happo-cypress` prefix to the cypress command, that will come in a follow-up.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 1119998b8280b4ee2298088f4cf880b4ad174b22

Allow happo-cypress port to be configured With the `--port 3423` flag. This will help people who have conflicting things running on the default port.

view details

push time in 7 days

push eventhappo/happo-cypress

Henric Trotzig

commit sha 711eb1973f01f8bbe6aed84950a62d5afbde7988

Add happo-cypress wrapper command After a lot of debugging and exploration, I've landed in a fix for the problem where a Cypress run creates multiple happo reports, one per test file. This was first reported last week and to begin with I couldn't repro it. In short, this was the bug: When you have multiple test files, Happo creates one report per file, instead of one combined report. When running with `cypress open`, the `after` hook was only called once per full run. But if you ran `cypress run`, the behavior changed to calling `after` once per test file. There's a bug for this in the Cypress issue tracker: https://github.com/cypress-io/cypress/issues/5160 To mitigate this, I tried hard to find a place/hook or something where Cypress would tell me one of these things: The full suite is done, or These are the specs in the full run Either of those would be sufficient enough for our plugin to conditionally create the Happo report once the `after` hook is called for the last time. But I couldn't find any of this information available from Cypress. So I did what Percy.io is doing -- added a wrapper command that you need to use instead of `cypress run`: happo-cypress -- cypress run This call will set up a server locally, invoke the wrapped command, accept `requestIds` to be POSTed to the server and then finally, once the wrapped command is done, create the full Happo report. It's a little unfortunate that we have to go down this route as there's a lot of complexity involved: - Users will have to make sure to wrap the Cypress command - We have to be careful about choosing a good port (for now this is hard-coded).

view details

Henric Trotzig

commit sha c0118b9756ec7437ea8cc2fd3f25ad66e11daaa2

Add happo-cypress bin to package.json This will allow people to execute e.g. `npx happo-cypress --`, `yarn happo-cypress` etc in their projects (once it is released).

view details

push time in 7 days

PR opened happo/happo-cypress

Add happo-cypress wrapper command

After a lot of debugging and exploration, I've landed in a fix for the problem where a Cypress run creates multiple happo reports, one per test file.

This was first reported last week and to begin with I couldn't repro it. In short, this was the bug:

When you have multiple test files, Happo creates one report per file, instead of one combined report.

When running with cypress open, the after hook was only called once per full run. But if you ran cypress run, the behavior changed to calling after once per test file. There's a bug for this in the Cypress issue tracker: https://github.com/cypress-io/cypress/issues/5160

To mitigate this, I tried hard to find a place/hook or something where Cypress would tell me one of these things: The full suite is done, or These are the specs in the full run

Either of those would be sufficient enough for our plugin to conditionally create the Happo report once the after hook is called for the last time. But I couldn't find any of this information available from Cypress. So I did what Percy.io is doing -- added a wrapper command that you need to use instead of cypress run:

happo-cypress -- cypress run

This call will set up a server locally, invoke the wrapped command, accept requestIds to be POSTed to the server and then finally, once the wrapped command is done, create the full Happo report.

It's a little unfortunate that we have to go down this route as there's a lot of complexity involved:

  • Users will have to make sure to wrap the Cypress command
  • We have to be careful about choosing a good port (for now this is hard-coded).
+152 -58

0 comment

4 changed files

pr created time in 7 days

create barnchhappo/happo-cypress

branch : wrap-command

created branch time in 7 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha 526907890119ae44fe9fcc5b7f57f80f2cb1b111

Fix prettier config I was using an invalid value for trailingComma.

view details

push time in 8 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha 460ba0293a6c05eb81787ee68f810e4df8317acd

Ingore node_modules and others when watching This config applies to Command-T and watchman, which is used by both Command-T and Import-JS.

view details

Henric Trotzig

commit sha 0c0a994f5e03ff43d10bf8d5e68661da10a1286d

Add Prettier config These are the defaults I'm used to using.

view details

push time in 8 days

PR opened happo/happo-cypress-example-todomvc

Add second test file

We're trying to figure out if adding another test file will result in two happo reports or just one.

+35 -13

0 comment

2 changed files

pr created time in 10 days

create barnchhappo/happo-cypress-example-todomvc

branch : add-second-spec

created branch time in 10 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha e23df3d42d6c6000f78ac33e04ff077b88db9545

Fix up/down arrow nav in Command-T I couldn't use my up and down key to navigate the command-t list of files. Found a workaround here: https://github.com/wincent/command-t/issues/300#issuecomment-319818928

view details

push time in 10 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha ceaaf3929430287dd4c4fb04a2750695ff585309

Make dynamic prompt actuall dynamic Before this change, we would print the right things, but only once. After this change, dirnames and git statuses are now updated whenever the prompt is printed.

view details

push time in 11 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha fda0ddf7e825684998cfc253b50f42b7e127f406

Add prettier to vim I use this a lot when writing javascript code.

view details

push time in 11 days

push eventtrotzig/dotfiles

Henric Trotzig

commit sha d7364dbf01acfc5db89b60e62191b6ab4554817d

Add key mappings for Command-T Space will open command-t. Escape and ctrl-c will close it.

view details

push time in 11 days

more