pixeleye-io / pixeleye

The batteries-included platform for visually testing and reviewing your UI; it's even self-hostable! Connect your codebase with our many integrations and dramatically increase your test coverage in minutes.

Pixeleye

The batteries-included platform for visually testing and reviewing your UI; it's even self-hostable! Connect your codebase with our many integrations and dramatically increase your test coverage in minutes.

Homepage . Documentation . Playground

Why Pixeleye

Pixeleye provides a seamless experience for visually testing and reviewing your UI. Unlike raw code, UI should be primarily reviewed visually. We built Pixeleye to allow developers, designers, and product managers to review UI changes effectively and efficiently; we'll also detect unintended visual side effects.

Features

• Multi-Browser Testing: We support all major browsers. When capturing screenshots, we run a background process to render and capture across all browsers.

• Clean git repo: Unlike alternatives, we don't store your comparisons directly in the git repo. We keep your commits clean and avoid scenarios where failing tests are lazily approved with a hand-wavy command

• Self-Hostable: You can host pixeleye on your infrastructure. We provide a docker-compose file to get you started. read more

• Responsive Testing: We also support different device sizes and browsers. You can capture screenshots for mobile, tablet, and desktop.

• Permission syncing: Already set up your team's permissions in Github? We'll sync and match them in Pixeleye. learn more

• Integration with your codebase: We provide many official integrations to connect your codebase with Pixeleye, be it Storybook, Cypress, Playwright, Puppeteer or more

• Light and Dark themes: Do we need to justify this? 😂 Our founder's first open-source project was a collection of animated theme toggles

• Simple and powerful review process: Pixeleye boasts an excellent review experience, from our superb web app to VCS integration. Have a go with our playground

Why use Pixeleye Cloud? (hint: it's not just our fair pricing)

The best way to use Pixeleye is through our cloud offering. Plus, by using our service, you'll promote a sustainable open-source ecosystem and support us in developing and improving our open-source offerings.

Benefits of Pixeleye Cloud:

• Fiar usage-based pricing We firmly believe you should only pay for what you use. Checkout our pricing
• Minimal setup Get started in minutes. Why spend time setting up our project when you can be using it instead!
• High availability, Backups, Security, automatic maintenance We manage the infrastructure whilst you manage your UI
• Latest features Our Cloud follows a rolling release cycle, whereas our official self-hosted releases are more long-term. Enjoy our latest features with Cloud!
• Premium support We offer fantastic support for our Cloud customers. While we'll fix any bugs you find self-hosting, we can't help you with onboarding or setup.

Want to get started? Head over to our website to begin.

Self-hosting

The easiest way to self-host Pixeye is with Docker. Check out our guide to get started quickly.

Our Docker images follow a stable release pattern, whereas our Cloud follows a rolling release cycle. The latest features/bug fixes may not yet be present in our docker images. We follow this pattern to reduce the overhead of constantly requiring you to update your infra whilst ensuring we only ship stable products. We don't have dates for our releases, but they typically come after new features are stable or significant security issues arise.

Required services

Whilst Pixeleye at its core consists of 2 systems, frontend & backend, we require quite a few other systems to get everything working.

• Rabbitmq
• Ory Kratos
• Postgres
• S3 compatible storage (MinIO recommended)
• SMTP server

We also have our docker image to handle database migrations automatically.

You can find all the relevant files along with a docker-compose file here: self-hosted docker files. We don't take any responsibility for your data or infrastructure.

Contributing

We welcome all contributions! Be it fixing a bug, helping with a feature, suggesting ideas or even writing about us in your blog.

For more info, please check out our contributing guide.

Disclosing security issues

If you think you've found a security vulnerability, please refrain from posting it publicly on the forums, the chat, or GitHub. You can find all the info for responsible disclosure in our SECURITY.md

pixeleye's Issues

Email verification

Users shouldn't be allowed to do anything until they've verified their email.
Users should be able to re-request a validation email

Move development to selfhosted kratos

We need to move integrations tests & local dev to selfhosted ory

Last build data

Add the last build timestap to builds when fetched from the projects api

Storybook integration

Get users current price and currency per snapshot for usage page

Usage page pricing is hard coded. We fetch more data from stripe

Team usage api

Batch review options aren't updated optimistically

Add No teams placeholder in team dropdown

We should display a no teams found message in the dropdown. Maybe we can add a link to teams in docs too

Add github middleman callbackurl

We need to capture the callback url before passing it onto kratos so we can store the credentials

Cancelling a build with a queued uploading will fast track it to processing

We need the state to become uploading from queued-uploading

Clean auth ui

ID should become Email on login screen.
Should hide all the extra fields when registering

Puppeteer integration

Create a simple integration with puppeteer.

This will be the first integration with pixeleye so a lot of work will be required to ensure all the ground work is built out

Auto approve branches

We should allow users to speicify a list (maybe with regex) of branches which should always have changes approved

Update team profile data

A user should be able to update their teams name / website from settings

Sync github team members

Sync github team members with linked accounts on pixeleye.

As a user, I should see any Pixeleye teams linked to github if I'm a member of that github team

Project invite email

We need to improve our email template for project invites

Light theme

We need to pick the css colors for our light theme

Build Approval API Tests

Add the api tests for each of the build approval endpoints:

/builds/{id}/review/approve
/builds/{id}/review/reject
/builds/{id}/review/approve/all
/builds/{id}/review/reject/all

Update user info

A user should be able to update their info

Add error page for ory

Ory kratos requires an error page incase something goes wrong

Allow users to adjust time period on usage page

Update team member permissions

A user should be able to update their teammates permissions (if they're an admin or above)

Heartbeat when uploading snapshots

We should investigate adding a heart beat to the upload process to know when a client has failed to continue uploading

We should treat uploading and queued uploading as the same in cron job

After x amount of time, we should mark queued-uploading items as failed

A team admin/owner should be able to see all projects within the team

Build approval

A user should be able to approve/deny a build

Add banner to github team when app is suspended or uninstalled

If we don't have access to the github app we should create a banner letting the user know this

Link buttons don't fill the entire button

When using a link button .e.g add project on dashboard it doesn't use the entire button

Uploading -> failed cron job doesn't trigger next builds

I've noticed that when the next builds are also uploading-processing, they won't be transitioned into uploading

Sync users teams

Currently we sync team members but not the other way around. So if a user signs up, they won't initally see their teams.

Move github account syncing to use account table

Currently we store users vcs account ids directly on the user table. With the introduction of the account table, we should migrate to that

Signup with github

We shouldn't need to enter our email when signing in with github

nanoid array validator

Delete a team

A user should be able to delete a team they own

Link/Unlink github account

A user should be able to link/unlink an existing github account if not used for signup (limited to 1).

Ory has an api for this which we can use. We'll also need to remember to update our database records with the github id.

Remove users from team

Transfer team ownership

A user should be able to transfer a teams ownership.

Edit team name

Support for themes with storybook cli

I would like our storybook integration to take snapshots for both light and dark themes

Remove users from project

Custom git project

A user should be able to create a custom git project. We should just require the url to the project and a name

Github syncing improvements

We need to ensure that syncing works with our project invite system.

Users already invited to a team should be marked as a git type but have their role syncing turned off. Same should happen for projects. We want them to maintain current roles.

Users invited to projects but removed from github should remain in the team but as an invited member only.

Create comfirmation promt

We need a comfirmation promt.

It should have two levels, once which requires the user to enter some text, and another which is just a yes or no.

We should implement it into removing a user from project & team, deleting a project

Update project member permissions

A user should be able to update project memeber permissions (if admin or above)

Snapshots don't inherit the rejected status

If unchagned from a rejected snapshot, the new snapshot should also be rejected

Improve Build processing api tests

Now that we can approve/reject snaphots, we should improve our build processing api tests to include a combination of approved/rejected snapshots

Forogt password screen

We need a forgot password ui

Cancel builds

In the ui, a user should be able to cancel a build. This would act as a final failsafe if we have stuck builds

Group different browser snapshots in the ui

Although we treat snapshots across different browsers as independent. In most scenarios they'll be the same and so we should group then up to speed up reviews.

Delete user

A user should be able to delete themselves. The api's for this should be mostly done