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

crusher's Issues

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

Frontend is crashing because after CLI login

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

Implement Login and Signup theme in frontend

• Light Mode
• Dark Mode

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

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.

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.

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

Log step results asynchronously to decrease text execution time

(Cli) Update CLI commands logs

Handle screenshot actions in local build reports

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

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.

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

Improve logging for recorder

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

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

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

📗 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.

Look into zombie chromium/browser processes

Release crusher-cli automatically on creating new release

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.

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.

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

Flags not working with CLI commands

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

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

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.

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.

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.

Add environment support for Crusher

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

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

Take a screenshot when step fails

Move deployment to crusher

• Write simple docs to set it up with loom.

Throw errors when there is a corrupted project config

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

Currently after running failed test. This prompt is shown.

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.

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

Track core-engineering metrics

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

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.

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

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

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

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.

Add role authorisation in sever API's

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

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