crusher-dev/crusher

🧙‍♀️ Fast low-code testing — create, run tests and get alerts ⏱️ Create test in <60 secs 👉 Better open source alternative to selenium, cypress and puppeteer

Fast all-in-one testing you'll ever need

Install Now »

Join Discord · Explore docs · Website

---

Crusher is a new fast testing framework, it's opinionated and takes a low-code first approach. Create tests by browsing your website and adding assertion when needed.

An alternative to slow workflows built and unreliable & slow libraries (w high learning curve), gluing tools, repetitive script.

Built from group up as an all-in-tool — with recorder, SDK, Infra + batteries built-in.

Crusher is in beta(v0.5). Join Crusher's discord and help us make it better 🚀

Star 🌟 & watch 👀 the repository in order to get updates about v1.0.0 stable release - it's finally happening (2023🎅) .

Create a test

1.) Run npx command in your git repo.

npx crusher.dev

You can create tests using low-code, code, or both - whichever you prefer. 5 minutes is all you need to start testing

or download binary

Reference: Getting Started | What is Crusher

👨🏽‍💻 Features

Create test

• 👨🏽‍💻 Test using low-code: Create tests using our customized recorder based on chromium
• 📇 Use code files: Better APIs and more control with playwright APIs

Run tests

• 🔋 All major browsers supported: Chromium, Firefox, Safari, etc.
• 👨🏽‍💻 Built for developers: Use modern javascript to write tests with simple workflow
• 🔥 Fast test execution
• ⚡ Blazing Fast: Built on top of Playwright, Crusher delivers an amazing performance during execution

Alert & Integration

• 📼 Easy integration with your projects
• 🦄 Central reporting & dashboard: See how your app is doing overall anytime-anywhere

⏩ Use cases

• Test e2e user flows: Never compromise your user experience by testing important end-to-end user flows.
• Test UI of your project: Never let a UI change catch you off guard.
• Run tests locally: Test specific functionalities of your app easily with a single click.
• Test with every commit: Run tests on every commit and add checks on pull requests.
• Monitor production: Periodically run tests for your website and get notified if something goes wrong.

💡 Philosophy

If you are involved in software development, you are no stranger to things breaking now and then. Sometimes it's because of a small typo/change, and sometimes because of reasons out of your control.

It seems like every time you are changing something, there is a chance of stuff breaking. The worst part is you're lost, and then someone reports the issue in prod.

Testing solves this, but it hasn't evolved. It's too complicated and sometimes hard. We're solving it by creating an integrated solution that simply works.

🧱 Deployment

Crusher cloud- Start using | Zero configuration setup (Recommended: Faster, cheaper and less hassle)

Self host: Deploy using Docker or Kubernetes. Docs

FAQs

• I don't have any prior experience, Can I use Crusher? Yes, we primarily designed Crusher to make testing easy. If you have used a browser before, you can use Crusher.
• Low-code ain't powerful, I believe code is more powerful:- Fair enough, we believe in both. We're also working on a code-first approach.
• Why use this over selenium, cypress, etc? With any library, you'll have to spend a lot of time setting up the testing framework for your project. With us, you can start testing right away. We're also built on top of playwright, which is a more stable and faster automation library.
• Why a new framework? Testing has not evolved. It can be quite frustrating to setup and maintain. With Crusher, we're trying to make it easy and fun.
• Is Crusher using Electron? Yes, we forked Electron to create our own chromium-based browser.

Contribute to Crusher

• Setup crusher locally Docs
• Found a bug? File an issue
• Wanna help? We love pull requests, too!

License

This repo is entirely MIT licensed, except the /src_ee directory (if applicable).

crusher's Issues

📗 Contributing to crusher should be easy

Crusher is made of many packages that work in tandem. It can be exhausting to contribute.

Few ideas on how to make contributing easy, I think this should be discussed more with @utkarsh-dixit further.

• Describe high-level overall structure about idea of codebase.

• Build common easy APIs that makes easier to contribute.

• Keep packages abstracted in silos.

• Simplify single package contribution without needing to run other packages.

  • Frontend
  • Backend
  • Test runner
  • Common Utils

• Make it easy to run test on remote environment.

Flags not working with CLI commands

Decrease the cpu load in test-runner.

• Update playwright from v1.0.2 to v1.5.2
• Remove ts-node dev from the start command

Set device action is missing on local build reports

Steps to reproduce

1. Run any test locally
2. Click on "View Report"

What do you see?
Set device action is missing. (ex. https://app.crusher.dev/app/build/27223)

Expected result
Set device action is also listed as an action in build report

Proxy not working when creating & saving test for first time

Steps to reproduce

1. Setup proxy config in ~/.crusher/crusher.json
2. Create test for a local url (e.g http://localhost:3000)
3. Click on Verify & Save

What do you see?
Test fails because the runner doesn't follow proxy config.

Expected result
Test passes and runner follow the proxy config

Implement Login and Signup theme in frontend

• Light Mode
• Dark Mode

Improve logging for recorder

Track core-engineering metrics

• Track details like pnpm install
• Track time to deploy
• Track time to test

Log files are being created in working directory

Steps to reproduce

1. Run npx crusher-debug in any directory

What do you see?
Two files are created in that directory, combined.log and error.log

Expected result
No file should be saved in working directory

Fix issues to enhance test editing experience

• Unwanted console message during editing

• Need to change workflow to add proxy. Currently after skipping, this is repeating everytime new test is created.

Add stop button to allow pause/abort of long-running steps

Fix CLI p0/p1 errors

• When crusher-cli is run. Don't show electron app with prompt to run command. p0 issue
• Throw errors when there is issue with config.
• Show relevant message all along the way. While creating or selecting a project automatically.
• Don't allow access to run other project.

UI issue with deleting last step in recorder

Reproducible steps

1. Create a test
2. Recorder 5-6 steps
3. Try deleting last step

What happened?
Can't click on options icon

Expected
Options menu should appear

Problem in Sticky header in crusher-app

*Describe the issue

*
Sticky header is remained sticky after scrolling up on route /app/build/[build id]

Any loom video for this
https://www.loom.com/share/d4c169b6a58b448e8e979ca90b3d2083

What's expected behavior
it should not be sticky on scroll up

Who should solve this
I can
Describe priority

Take a screenshot when step fails

(Cli) Update CLI commands logs

Implement Forget password

Describe the feature
A user with account, should be able to reset their password. Here's how it would work.

1.) Send link to email to reset password.
2.) User clicks on the link.
3.) Enter the new password.

Add environment support for Crusher

Show error screen when requests to backend are failing

Steps to reproduce

1. Open recorder and goto settings
2. Set backend and frontend url to incorrect values
3. Click Save

What do you see?
Infinite loading screen, without any error screen or infromation.

Expected result
Error screen describing what went wrong.

Use only one request to save/update tests

Earlier, we used to allow saving/updating tests without asking the user to login from the recorder. The legacy flow use to look like this,

1. Saving/Updating test will create a temporary record in backend through /save.temp API.
2. User would be redirection app.crusher.dev/tests page and once user is Authorised it will create/update the test.

With the new v1.0.5 release, the user is asked to login/connect to cloud account so the legacy workflow is no longer needed. We now only need to call one API, instead of two

Bug: While running in local mode, result prompt is showing passed status

Currently after running failed test. This prompt is shown.

Test is getting saved after "Verify & Save" even when step fails

Fix step list in build report

Steps to reproduce

• Open https://app.crusher.dev/app/build/26763
• Click on "Expand 13 steps"

What do you see?
Last second step is missing and Navigate URL action is repeated twice.

Expected result
Correct order of steps

Move deployment to crusher

• Write simple docs to set it up with loom.

Release crusher-cli automatically on creating new release

Restructure internal packages

For better mind mapping.

• Move code generator & runner utils to code generator. This looks like better name IMO.
• Move unique selector to electron-app.
• Move video processor to test-runner under worker.

Framework to stress test different scenarios

Describe the issue
Currently, we're on goal to make recording and playback of test very easy. As we develop things, there's good chance that we will introducing breaking changes.

The goals of this stress testing will be to
1.) Run test via simulating user action on our recorder. Simulated for differeny website. E.g- Facebook, etc.
2.) Check the generated output of steps.
3.) Try to run test for the same.
4.) Generate a table with list of steps and output.
5.) Pass PR/commit message on the basis of it.

Resources
xdotool http://manpages.ubuntu.com/manpages/trusty/man1/xdotool.1.html

Throw errors when there is a corrupted project config

Add role authorisation in sever API's

Add support for blackout

Describe the feature
Add support in SDK and both UI extension

`Setting up` proxy screen not shown when using "Save test" instead of "Verify & Save"

Steps to reproduce

• Ensure proxy config is not setup in <project_dir>/.crusher/crusher.json
• Create a test for local url (e.g http://localhost:3000)
• Click on "Save test" under dropdown

What do you see?
No proxy screen is shown, to warn user that proxy is not setup and the test may result in failure.

Expected result
Proxy warning screen is shown, and can be of help to user in setting up proxy.

Login & Back links not working on signup email page

Steps to reproduce

1. Go to /signup page and click "or with Email"
2. Click on "Already registered? Login" or "Go Back"

What do you see?
Nothing happens

Expected result
Redirection to relevant screen

Look into zombie chromium/browser processes

Handle screenshot actions in local build reports

Upgrade telemetry logging & system logging

Crusher uses anonymised tracking and logging in axiom.

Logging can be made better with few changes:-

• Attach argument variable in logs
• Add user info when test run on cloud service
• Add machineId when test are run locally with system info

Frontend is crashing because after CLI login

Prettier plugin not working in subpackage

Describe the issue
We want to use 2 plugins to prettify commits,
1.) https://github.com/trivago/prettier-plugin-sort-imports
2.) https://www.npmjs.com/package/prettier-plugin-tailwind.

Related:-
These plugin are not working as exepected due to trivago/prettier-plugin-sort-imports#33

What's expected behaviour
Prettier plugin should work and prettify files.

Log step results asynchronously to decrease text execution time

Cleanup backend apis to http status code properly

Quick look table for http methods:

HTTP Verb	CRUD	Entire Collection (e.g. /customers)	Specific Item (e.g. /customers/{id})
POST	Create	201 (Created), 'Location' header with link to /customers/{id} containing new ID.	404 (Not Found), 409 (Conflict) if resource already exists..
GET	Read	200 (OK), list of customers. Use pagination, sorting and filtering to navigate big lists.	200 (OK), single customer. 404 (Not Found), if ID not found or invalid.
PUT	Update/Replace	405 (Method Not Allowed), unless you want to update/replace every resource in the entire collection.	200 (OK) or 204 (No Content). 404 (Not Found), if ID not found or invalid.
PATCH	Update/Modify	405 (Method Not Allowed), unless you want to modify the collection itself.	200 (OK) or 204 (No Content). 404 (Not Found), if ID not found or invalid.
DELETE	Delete	405 (Method Not Allowed), unless you want to delete the whole collection—not often desirable.	200 (OK). 404 (Not Found), if ID not found or invalid.

For more information about POST, GET, PUT, PATCH, DELETE https methods, click here

Mongo DB credentails are mixing up in wrong manner

Describe the issue

Our mongo config is defined as

        "MONGODB_HOST": "localhost",
        "MONGODB_PORT": "27017",
        "MONGODB_USERNAME": "admin",
        "MONGODB_PASSWORD": ""

Where as admin is DB created and there's no user/password authentication.

What's expected behaviour
DB name should be crusher with some username and password combination.

Who should solve this
Utkarsh

Describe priority
Low

For refernece, format https://docs.mongodb.com/manual/reference/connection-string/#components

Add support for swc in ts-node

Describe the feature
We're currently using ts-node which can be slow during recompilation.

SWC is rust based js/ts compiler and faster than other JS based compilers. We need to figure out solution and implement this.

https://typestrong.org/ts-node/docs/performance

What's expected behaviour

Faster builds

Storybook not working in dyson

The dyson via storybook was not used directly for a while.

How to reproduce?
1.) Go to packages/dyson
2.) Run pnpm run storybook and pnpm run build-storybook

Desired outcome

• Able to use storybook as component doc.
• Host component doc somewhere

Expose playwright function to webview-recorder script

As of now we are making use of console.log for communication to main process, by intercepting all the console messages and using first argument to console as identifier. The problem with this approach is:-

• All console messages needs to be intercepted and processed, which can block the main process.
• It's spamming the console logs for debugging session

Solution
Expose a binding (eg. crusherSdk) using browserContext.exposeBinding and use it for communication to main process.

Name editing mode doesn't turn off after clicking outside

Steps to reproduce

• Open recorder and select a project
• Double click on test name, turning on edit mode
• Click anywhere outside the input

What do you see?
Nothing happens

Expected result
Editing mode should turn off

Crusher's roadmap

This is the short term plan of Crusher.

Goal:- Make fastest web testing experience for developers.

Focus on- Stability, integration, speed.

High level components involved: Tooling, Local Recorder, App(Frontend & Backend), Freamwork, Test runner, Misc (Docs & Workers).

---

Current status: We've built a better testing framework. There's still lot of be done.

Core

• "Rerun build" should use the same config and host as the original build.

Tooling

CLI

• #243
• Add support for sharing and running test in isolation.
• #235
• Add --commit-id flag in test:run command for CI integration

Features

• Support component testing
• Add configuration support
• Test management support

Devex

• Integrate crusher with Vitest or vitejs. Allow component and e2e run in instantly.
• Create plugin for bundling system to add identifier directly from crusher. For vite, webpack, etc.
• Create plugin to use component name while testing.

App

• Improve logs in build report
• Show network requests between steps in build report
• Add option to create test for common template such as SEO checks, performance, broken links, etc.

Test runner & SDK

• Add support to find an element using document.querySelector, getElementById, etc.
• Auto-refresh for argo-tunnel in test-runner.
• Add option to cache request to test based on historical reponse. Use hashing.
• Fail navigation steps if critical error like (SSL validation, no response, etc)

Misc

• Add long polling or websockets in recorder to decrease response time and total requests.

Optimize contribution

These will be delightful, current dev setup is still good with dev reload <3 seconds.

• Upgrade to next 12.
• Use HMR in crusher electron app/upgrade to vite.
• Find a way to use vite with server.

Smarphone user agent selection is not working correctly

In the Headout demo, Pixel got opened in Desktop Mode.

Change crusher/config.json to crusher/config.js.

Remove cli-ux from cli

Affected URL(s)

No response

Description of the problem

Replace cli.log, cli.progres, cli.info, cli.info, etc. It's a commonJS module which can't be treeshaked.

Add support for running test with only CLI

Describe the feature
Currently, crusher is aimed at solving web testing e2e. A CLI integration to run test without any framework can be quite helpful.
The test can be part of code and can be run without need of hefty infra (Good for individual users).

What's expected behaviour
1.) Use Crusher test recorder. Save BJSON file.
2.) Save BJSON for each test in repo. Run test.
3.) Save output in dir. Create basic javascript app to display result. Server it through server package
OR
Upload bjson to crusher. Limitation images/etc.

Features that'll be hard to add
1.) Multi browser testing.
2.) Screenshot comparison. Basic can be added.

Advantage
1.)More people will be able to use crusher.
2.) App without tunnelling support can be tested.

Option to view dom, console, network of page object

What is the problem this feature will solve?

Better debugging while creating/updating test

Currently

• On right click, inspect element opens up
• On top menu > window > developer tools. Debugging mode of window opens up.

What is the feature you are proposing to solve the problem?

TBD

What alternatives have you considered?

No response