lost-pixel / lost-pixel Goto Github PK
View Code? Open in Web Editor NEWOpen source alternative to Percy, Chromatic, Applitools.
Home Page: https://lost-pixel.com/
License: MIT License
Open source alternative to Percy, Chromatic, Applitools.
Home Page: https://lost-pixel.com/
License: MIT License
No response
Catch browser crash when using Chrome running in generateOnly
mode on an M1 Macbook.
A hint would be helpful (and a link to the docs as well).
No response
Potentially introduce the flag to mute the browser logs.
Other
Lost Pixel currently posts a new comment for each force push, which creates some noise for projects that extensively use Git in this way. Some comments could event get lost as GitHub collapses activities when there are too many.
I would love to have a single Lost Pixel comment at the top that gets updated based on CI status.
Lets you configure between updating (default) or deleting and then re-creating: https://docs.codecov.com/docs/pull-request-comments#behavior.
Github workflow shows build unsuccessful, used the same file as mentioned in this link https://blog.logrocket.com/storybook-visual-regression-testing-lost-pixel-react/#what-is-lost-pixel
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@playwright/test
, playwright-core
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)Dockerfile
node 18.13.0-alpine
mcr.microsoft.com/playwright v1.40.1-focal
.github/workflows/main.yml
actions/checkout v4
actions/setup-node v3
actions/upload-artifact v3
.github/workflows/pr.yml
actions/checkout v4
actions/setup-node v3
elgohr/Publish-Docker-Github-Action a0b8f0e2d777562c13523b9a4d9480bae383486b
8398a7/action-slack a74b761b4089b5d730d813fbedcd2ec5d394f3af
.github/workflows/release.yml
actions/checkout v4
actions/setup-node v3
8398a7/action-slack a74b761b4089b5d730d813fbedcd2ec5d394f3af
docker/setup-buildx-action v2
elgohr/Publish-Docker-Github-Action 43dc228e327224b2eda11c8883232afd5b34943b
8398a7/action-slack a74b761b4089b5d730d813fbedcd2ec5d394f3af
package.json
@types/xml2js ^0.4.14
async 3.2.5
axios 1.6.5
bundle-require 4.0.2
esbuild 0.19.11
execa 5.1.1
form-data 4.0.0
fs-extra 11.2.0
get-port-please 3.1.2
lodash.get 4.4.2
lodash.kebabcase 4.1.1
odiff-bin 2.6.1
pixelmatch 5.3.0
playwright-core 1.40.1
pngjs 7.0.0
posthog-node 3.5.0
serve-handler 6.1.5
shelljs 0.8.5
ts-node 10.9.2
uuid 9.0.1
xml2js ^0.6.2
yargs 17.7.2
zod 3.22.4
@playwright/test 1.40.1
@types/async 3.2.24
@types/fs-extra 11.0.4
@types/jest 29.5.11
@types/lodash.get 4.4.9
@types/lodash.kebabcase 4.1.9
@types/pixelmatch 5.2.6
@types/pngjs 6.0.4
@types/serve-handler 6.1.4
@types/shelljs 0.8.15
@types/uuid 9.0.7
@typescript-eslint/eslint-plugin 6.18.1
@typescript-eslint/parser 6.18.1
eslint 8.56.0
eslint-config-prettier 9.1.0
eslint-plugin-unicorn 50.0.1
husky 8.0.3
jest 29.7.0
lint-staged 15.2.0
prettier 3.2.2
rimraf 5.0.5
ts-jest 29.1.1
ts-prune 0.10.3
typescript 5.3.3
xo 0.56.0
playwright-core >=1.37.0
node >=18
.nvmrc
node 18
create issue templates
Using the same name for 2 or more stories leads to having the same filename.
This function needs to be refactored:
https://github.com/lost-pixel/lost-pixel/blob/main/src/crawler/storybook.ts#L244-L245
Run Lost Pixel in storybook
mode with at least 2 stories with the same name.
No response
No response
Other
I have a few page load animations, which results in the snapshot differing depending on if the page has completed animation. Is there any option for a delay, I canβt see one in the docs.
Other
Hi,
As responsive layouts are not possible, I realised that I could probably recreate my config file, but now I am stuck wondering how to specify the path or even invoke the command without npx.
However, I did find this;
(base) β .bin git:(main) β ./lost-pixel --help
Options:
--help Show help [boolean]
--version Show version number [boolean]
I think this can be improved upon
Other
It's a frequently requested feature coming from different users that run lost-pixel in all modes to make screenshots of their responsive designs. This makes high sense as usually, the responsive designs are the ones that suffer first from visual regressions due to the fact that they may not be manually checked during the development phase.
The suggestion is to enable this feature for all modes. We would need an extension on the top level of the config with some new parameter e.g. responsiveShotDimensions
(the name is exemplary and might be revised). This prop would receive the array of breakpoints that will be used then to resize the browser when making the screenshots. Moreover, this parameter shall be present also at the level of individual shots to make sure that this feature is flexible enough to use on one story/one page if needed. Page level settings should override global settings.
Here is the example of config on page shots:
import { CustomProjectConfig } from 'lost-pixel';
export const config: CustomProjectConfig = {
pageShots: {
pages: [{ path: '/app', name: 'app', responsiveShotDimensions: ['600px', '1024px', '2000px'] }, { path: '/blog', name: 'blog' }],
baseUrl: 'http://172.17.0.1:3000',
},
responsiveShotDimensions: ['600px', '1024px']
generateOnly: true,
failOnDifference: true,
};
In this case /blog should receive the globally set dimensions( ['600px', '1024px']) and /app the one set locally(['600px', '1024px', '2000px'])
Whenever the shots are prepared in src/createShots.ts we could just automatically prepend the shots with set dimensions to the array that function outputs and this will take care about making screenshots later on with different dimensions. We would need to name it properly because we will essentially duplicate the shots:
/app
becomes /app[600px]
, /app[1024px]
, /app[2000px]
or similar
Api key of Post Hog, platform for analyze, test, observe, and deploy new feature, is exposed on https://github.com/lost-pixel/lost-pixel/blob/main/src/utils.ts
No response
No response
On the log, it says
π Exiting process with 0 found differences & 3 baselines to update
Sending anonymized telemetry data.
After this, we are expecting the PR to have 3 new additional baseline images, but the PR includes other files as well.
Any possible reason why it includes files other than the 3 new additional baselines?
No response
No response
Page screenshots
Hi!
We're currently experimenting with Lost Pixel for https://github.com/opencollective/opencollective-frontend.
While the initial setup works mostly fine out of the box, we currently receive some false positives on animated elements - mostly loading spinners. Because the screenshots don't happen exactly at the same time, the spinner is in a different position when rendered.
It seems that Chromatic pauses animation to address this.
Styleguide: styleguide.opencollective.com
Before | After |
---|---|
Thank you!
Hi
I've tried to use Lost Pixel with custom React setup (webpack, babel, typescript, storybook) and it works perfectly well.
But when I tried to use it with Vite React Template, npm run lost-pixel
gave me this error:
β
Found config file: C:\work\user\lost-pixel\lostpixel.config.ts
β Loading config using ESBuild failed, using fallback option
β Failed to load config file: C:\work\user\lost-pixel\lostpixel.config.js
It is not clear from docs what configuration do I need to use Lost Pixel locally without CI features.
No response
Loading project config ...
Current working directory: C:\work\user\lost-pixel
Looking for config file: C:\work\user\lost-pixel\lostpixel.config.(ts|js|cjs|mjs)
β
Found config file: C:\work\user\lost-pixel\lostpixel.config.ts
β Loading config using ESBuild failed, using fallback option
β Failed to load config file: C:\work\ulbi\lost-pixel\lostpixel.config.ts
How can we update baseline images in gitlab
Page screenshots
I have a mono-repo with a few sub-projects within it, and as a result my node project lives within it's own folder. This means my package.json and lostpixel.config.js
files aren't in the root directory. I can't see any way I can configure the GitHub Actions to target the config file that exists in the subdirectory. Most steps in my action are helped by:
defaults:
run:
working-directory: ./path-to-node-project
Would be great if your actions supported this.
Viewport option doesn't have impact on generated image size
export const config: CustomProjectConfig = {
pageShots: {
pages: [
{ path: "/", name: "Home", viewport: { width: 375, height: 720 } },
],
baseUrl: "http://localhost:3000",
},
waitBetweenFlakynessRetries: 5000,
threshold: 0.0005,
waitBeforeScreenshot: 10000,
generateOnly: true,
shotConcurrency: 5,
failOnDifference: true,
};
npx lost-pixel
Generated image should have specified size
No response
No response
When the Storybook build is broken, the story collection process seems to be neverending.
I simple timeout should
Trying to collect stories via window object
Should fail after a defined timeout
No response
Storybook
Use Case: Same type of use as the current mask but "reversed".
In a capture of a storybook component or a page I want to be able to isolate only the element on which I perform the visual non-regression test. Ideally by cropping everything that is outside the selector given in the config.
This would allow to compare only what is necessary to compare, and thus to gain in performance by limiting the writing and the comparison of the pixels which do not interest us, to limit the false positives, to have a finer adjustment of the threshold and to move less data each time we push or pull.
As I tend to try to have the screenshots unified in their size. I'd find this solution more elegant than having the same size for every component screenshots. Some component have a width of 200px, others have a width of 1080px, I don't think it makes sense to use the same viewport for everyone.
Other
It takes a lot of time to update the version of the action usually in the docs. Gitbook seems to offer a solution to this:
https://github.com/GitbookIO/gitbook/blob/master/docs/templating/variables.md#book-variables
None
Please add Lost Pixel integration for SvelteKit.
Thanks
Didn't find an email, so sending my feedback here.
When you plan the platform architecture, try to structure it in a way where you don't need source-code access to our code.
Ideally, a Github Actions job (or similar) would (a) push the photos to your platform, or it would (b) send a full HTML/CSS/JS package along with an URL path to you.
That way, you don't have access to our source code, you don't have to worry that much about being hacked and it would be much easier to convince our security team to adopt your product.
Also, the CLI tool that would be used in our Github actions runner should preferably be open-source (for inspection) and pinnable (via e.g. NPM), so that if you get hacked it will be harder for a malicious actor to roll out an evil update of that tool.
Other
We are already having great documentation done in our ts types. The task here would be just to move those things into the markdown for our API reference. I've already started with it to have some good example of how things might look like!
https://github.com/lost-pixel/lost-pixel/blob/main/docs/api-reference/lost-pixel.config.js-or-ts.md
Whatever I try I can't launch test locally (and didn't try with github actions and CI).
I tried on my main project and on the two storybook examples provided at https://github.com/lost-pixel/lost-pixel-examples
The result is consistently the same, when I send the command npm run lost-pixel
I receive a classic npm error Module not found
Here the complete error message
> [email protected] lost-pixel /Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages
> lost-pixel
internal/modules/cjs/loader.js:905
throw err;
^
Error: Cannot find module 'node:path'
Require stack:
- /Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages/node_modules/lost-pixel/dist/bin.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages/node_modules/lost-pixel/dist/bin.js:7:37)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages/node_modules/lost-pixel/dist/bin.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lost-pixel: `lost-pixel`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lost-pixel 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/btaillandier/.npm/_logs/2022-10-24T15_09_24_876Z-debug.log
And here the content of /Users/btaillandier/.npm/_logs/2022-10-24T15_09_24_876Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/Users/btaillandier/.nvm/versions/node/v14.17.1/bin/node',
1 verbose cli '/Users/btaillandier/.nvm/versions/node/v14.17.1/bin/npm',
1 verbose cli 'run',
1 verbose cli 'lost-pixel'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelost-pixel', 'lost-pixel', 'postlost-pixel' ]
5 info lifecycle [email protected]~prelost-pixel: [email protected]
6 info lifecycle [email protected]~lost-pixel: [email protected]
7 verbose lifecycle [email protected]~lost-pixel: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~lost-pixel: PATH: /Users/btaillandier/.nvm/versions/node/v14.17.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages/node_modules/.bin:/Users/btaillandier/.pyenv/shims:/Users/btaillandier/.pyenv/shims:/Users/btaillandier/.nvm/versions/node/v14.17.1/bin:/Library/Frameworks/Python.framework/Versions/3.10/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin
9 verbose lifecycle [email protected]~lost-pixel: CWD: /Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages
10 silly lifecycle [email protected]~lost-pixel: Args: [ '-c', 'lost-pixel' ]
11 silly lifecycle [email protected]~lost-pixel: Returned: code: 1 signal: null
12 info lifecycle [email protected]~lost-pixel: Failed to exec lost-pixel script
13 verbose stack Error: [email protected] lost-pixel: `lost-pixel`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/Users/btaillandier/.nvm/versions/node/v14.17.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:375:28)
13 verbose stack at ChildProcess.<anonymous> (/Users/btaillandier/.nvm/versions/node/v14.17.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:375:28)
13 verbose stack at maybeClose (internal/child_process.js:1055:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/btaillandier/Documents/Work/lost-pixel-examples/example-next-js-pages
16 verbose Darwin 21.6.0
17 verbose argv "/Users/btaillandier/.nvm/versions/node/v14.17.1/bin/node" "/Users/btaillandier/.nvm/versions/node/v14.17.1/bin/npm" "run" "lost-pixel"
18 verbose node v14.17.1
19 verbose npm v6.14.17
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] lost-pixel: `lost-pixel`
22 error Exit status 1
23 error Failed at the [email protected] lost-pixel script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Node version: v14.17.1
npm version: 6.14.17
local machine is macOS Monterey V12.5
[email protected]:lost-pixel/lost-pixel-examples.git
npm i
npm run build-storybook
npm run lost-pixel
Run visual regression tests
No CI at this point only local tests
No CI at this point
Page screenshots
Use case: If my website has an image carousel and the image content changes routinely or at random, I may want to disregard differences in this section of the website.
Potential solution: A configuration that allows identifiers to be declared for DOM nodes (class, ID, attributes) and sets the CSS property of Visibility with the value of None. Alternatively, if the comparison tool is capable, ignore differences that occur inside certain dom nodes.
This will make specified dom nodes invisible and therefore these elements will not cause false failures in visual regression testing.
Example configuration:
export const config: CustomProjectConfig = {
pageShots: {
pages: [
{ id: "capocaccia.dev/posts/uses", path: "/posts/uses", name: "Uses", ignore: ['data-testid="post-cover-image"'] },
{ id: "capocaccia.dev/", path: "/", name: "Home" },
],
pageUrl: "http://172.17.0.1:3000",
}
};
Storybook
Couldn't find anything in documentation or examples for this. Please correct me if I missed this somewhere.
Request: An ability to skip screenshots for an individual story. Other similar tools will respect a flag on the story parameters. Something like the following...
const ExampleStory = {
title: 'Story Title',
component: MyComponent,
parameters: {
lostPixel: {
skip: true
}
}
}
Storybook
would be nice if there was a config option allowing us to setup custom page routes before loading the page https://playwright.dev/docs/network#modify-requests. however, the current storybook solution uses file://
urls when loading pages which are known to be problematic with this, see microsoft/playwright#8412.
It seems that when Lost Pixel is run in Docker it displays the version of Lost Pixel that is installed in the to-be-tested repo, and not the actual version of the Docker container.
2.21.0
in any repov2.22.0
2.21.0
Should display the version of Lost Pixel that is contained in the Docker container.
No response
I just installed lost-pixel into my Storybook+Vite project, created config, and tried to run update. Got this result:
E:\devl\app>npx lost-pixel update
Version: 2.22.1
Loading project configuration...
Current working directory: E:\devl\app
Looking for configuration file: E:\devl\app\E:\devl\app\lostpixel.config.(js|ts)
Couldn't find project config file 'lostpixel.config.(js|ts)'
It's looking for the config in: E:\devl\app\E:\devl\app\lostpixel.config.(js|ts)
which isn't correct.
This may be a Windows issue?
The path to the config is correct and it's able to load.
No response
Process ends suddenly if recorded video can't be deleted.
This happens only if video recording is enabled.
The browser context might be not available anymore, thus causing CI pipeline to fail.
A possible solution would be a try/catch block around:
Lines 107 to 108 in 3e54c87
No response
Configuration prop used in lostpixel.confg.ts
to enable video recordings:
configureBrowser: () => ({
recordVideo: {
dir: 'tmp/videos',
size: {
width: 1280,
height: 900,
},
},
}
}),
video.delete: Target page, context or browser has been closed
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.