Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/wlsf82/el-genio

A no-code testing app that uses Cypress in the background to create and run tests.
https://github.com/wlsf82/el-genio

cypress-io no-code no-code-testing talking-about-testing testing web-testing

Last synced: about 1 month ago
JSON representation

A no-code testing app that uses Cypress in the background to create and run tests.

Awesome Lists containing this project

README 

          
# el-genio



[![CI](https://github.com/wlsf82/el-genio/actions/workflows/ci.yml/badge.svg)](https://github.com/wlsf82/el-genio/actions/workflows/ci.yml)



A no-code testing app that uses [Cypress](https://cypress.io) in the background to create and run tests.



## Pre-requirements



To clone and run the app, you must have [git](https://git-scm.com/downloads), [Node.js](https://nodejs.org/), npm, and [Docker](https://www.docker.com/products/docker-desktop/) installed on your computer.



I've used the following version of the systems mentioned above:



- git `2.42.1`

- Node.js `v22.13.1`

- npm `10.9.2`

- Docker `28.3.0`



> There's no need to install npm since it's automatically installed when installing Node.js.



## Installation



Run `npm run install:all` to install all the necessary dependencies.



## Running the app



The _El Genio_ app is composed of a React app, an Express.js server, and a Postgres database.



### Server and Database



You can run both the server and database using Docker.



#### Create a Docker Network



First, create a Docker network to allow the containers to communicate:



```bash

docker network create el-genio-network

```



#### Building and running the database



To build and run the database container:



1. `cd postgres/`

2. `docker build -t el-genio-db .`

3. `docker run -d -p 5432:5432 --network el-genio-network --name postgres el-genio-db`



The database will be initialized with the following default settings:



- Username: postgres

- Password: postgres

- Database name: elgenio

- Port: 5432



> **Note:** The container must be named "postgres" for the server to connect to it.



#### Building and running the server



To build and run the server container:



1. `cd server/`

2. `docker build -t el-genio-server .`

3. `docker run -d -p 3003:3003 --network el-genio-network -v $(pwd)/cypress/e2e:/usr/src/server/cypress/e2e el-genio-server`



> **Important:** Make sure to run the database container before the server container.



### Client



Run `npm run client` to start the client app.



After the app is started, you should be able to access it locally at `http://localhost:5173/`.



### Tests



With the app up-and-running, you can now run tests in both headless and interactive mode.



Run `npm test` to run the tests in headless mode.



Or, run `npm run cy:open` to open the Cypress App and run the tests in interactive mode.



## Features



The El Genio App consists of a React web app that communicates with a PostgreSQL database via an Express.js Web Server API.



### Web App



El Genio provides a user-friendly React-based web interface for creating and managing Cypress tests without writing code. The main features include:



**Project Management:**



- Create, edit, and delete test projects

- Organize test suites within projects

- View project details and associated test suites



**No-Code Test Creation:**



- Visual test suite builder with form interfaces

- Support for multiple test cases within a test suite

- Before each hooks for common setup steps

- Wide range of Cypress commands including:

  - Navigation ([`visit`](https://on.cypress.io/visit), [`reload`](https://on.cypress.io/reload))

  - Element interaction ([`get`](https://on.cypress.io/get), [`contains`](https://on.cypress.io/contains), [`click`](https://on.cypress.io/click), [`type`](https://on.cypress.io/type))

  - Form controls ([`check`](https://on.cypress.io/check), [`uncheck`](https://on.cypress.io/uncheck), [`select`](https://on.cypress.io/select))

  - Assertions ([`should`](https://on.cypress.io/should), [`and`](https://on.cypress.io/and) with various conditions)

  - Utility commands ([`blur`](https://on.cypress.io/blur), [`title`](https://on.cypress.io/title), [`url`](https://on.cypress.io/url), [`screenshot`](https://on.cypress.io/screenshot))



**Test Execution:**



- Run individual test suites or entire projects

- Real-time test execution with results display

- Download test execution artifacts (screenshots and videos)

- Command timeout configuration for different test requirements



**User Experience:**



- Onboarding flow for new users

- Intuitive navigation between projects and test suites

- Form validation and error handling

- Desktop design only



### API



El Genio's Express.js REST API provides comprehensive endpoints for managing projects, test suites, and test execution:



**Project Endpoints (`/api/projects`):**



- `GET /` - Retrieve all projects (ordered by creation date)

- `GET /:id` - Get a specific project with associated test suites

- `POST /` - Create a new project (requires name, optional description)

- `PUT /:id` - Update an existing project

- `DELETE /:id` - Delete a project and all associated test suites



**Test Suite Endpoints (`/api/test-suites`):**



- `GET /project/:projectId` - Get all test suites for a specific project

- `GET /:id` - Retrieve a specific test suite

- `POST /` - Create a new test suite with test cases and setup steps

- `PUT /:id` - Update an existing test suite

- `DELETE /:id` - Delete a test suite and its generated Cypress file

- `POST /:id/run` - Execute a specific test suite

- `GET /:id/download` - Download the generated Cypress test file



**Test Execution Endpoints (`/api/test-runs`):**



- `POST /project/:projectId` - Run all test suites within a project

- `GET /screenshots/download` - Download test screenshots as ZIP archive

- `GET /videos/download` - Download test videos as ZIP archive



**Data Models:**



- **Projects**: UUID-based identification, unique names, optional descriptions

- **Test Suites**: JSON-based test case storage, before each hooks, configurable timeouts

- **Automatic Cypress File Generation**: Converts visual test configurations into executable Cypress test files



**Database Integration:**



- PostgreSQL database with Sequelize ORM

- JSONB storage for flexible test case structures

- Automatic cleanup of generated test files when test suites are deleted

- Referential integrity between projects and test suites



## Contributing



There are different ways to contribute to the El Genio project, such as testing it, finding and reporting bugs, suggesting new features, or even fixing bugs and implementing new features yourself.



Below is the process you should follow depending on how you want to contribute.



### Testing El Genio



If you want to test El Genio:



1. Clone the project;

2. Read [the docs](./README.md) to setup El Genio locally;

3. Test it out by creating and running your tests using our no-code testing solution;

4. After playing with El Genio, open issues to report bugs or feature suggestions.



> **Note:** Make sure to look into the [existing issues](https://github.com/wlsf82/el-genio/issues) before opening a new one, and when opening an issue, please provide us with as much details as possible.



### Fixing bugs and implementing new features



If you want to contribute to this project by fixing bugs or implementing new features:



1. Choose an [issue](https://github.com/wlsf82/el-genio/issues) to work on;

2. Fork the project;

3. Clone your fork and make the necessary changes;

4. Test your changes locally, and move on only when all tests are green;

   4.1. If adding new features, make sure to add the appropriate tests for it;

5. Push your changes to GitHub and create a pull request (PR);

6. After the GitHub Workflow of your PR is green, tag `@wlsf82`, ask for review, and wait for feedback;

7. If everything goes well, you should have your changes rebased and merged to the main branch. Otherwise, you will receive comments with adjustments needed before merging.



> [This is the commit messaging guidelines you should follow](https://cbea.ms/git-commit/).



___



Powered by [Talking About Testing](https://talkingabouttesting.com/).