Visual Testing for Android Apps - Web Frontend

VISION is an application which allows users to upload screenshots and short videos of an Android application to be scanned for visual defects.

VISION integrates two computer vision ML models Seenomaly and OwlEyes.

Built using React and Node.JS.

Setup Instructions

First, setup the backend dependencies otherwise functionality will be limited. Instructions can be found here.

Install the latest stable version of NodeJS.

Clone the repository with:

git clone https://github.com/Visual-Testing-for-Android-Apps/web

In the root directory for the project, run the following:

npm install

Setup a .env file with the environment variables populated.

To start the development server, run the following:

npm start

Then navigate to localhost:3000 in your browser.

Environment Variables

Environments variables are stored in .env file, which has the following variables:

BATCH_JOB_ENDPOINT - endpoint for submitting a batch job
BATCH_JOB_REPORT_ENDPOINT - endpoint for retreiving batch job results
CAPTCHA_SECRET_KEY - ReCaptch v2 secret
OWLEYES_ENDPOINT- Endpoint for OwlEyes model (Live job)
SEENOMALY_ENDPOINT - Endpoint for Seenomaly model (Live job)

For the React portion of the application, these variables are baked in at compile time using webpack's Define plugin. See webpack.config.js for the defined variables and how to reference them in code.

For variables defined for the Node.JS portion of the application, these can be referenced directly in code using

process.env.SOME_ENVIRONMENT_VARIABLE

An example of the current .env file is shown in .env.example.

Special environment variables:

• CAPTCHA_SECRET_KEY - This key is the secret for Google ReCaptcha v2. You can generate one by registering a new site at Google ReCaptcha

Deploying the application

The repository doesn't contain build files. It is expected that when the site is deployed, it will be built on the server. This means that environment variables need to be configured on the server as well.

Building and running the application in production mode can be triggered by running:

npm run start-server

Run using Docker

Please make sure you have a valid .env file, then run the follwing:

docker run -ti --rm --init -p 3000:3000 --env-file PATH_TO_ENVFILE mtempty/vision:latest

Then navigate to localhost:3000 in your browser.

Versioning strategy

Versioning will follow the semantic version strategy documented here. Since the definition of MAJOR changes described aren't directly compatible with a user facing application, we use the definition described here The current version number can be found in package.json

Future work

Some of these require backend functionality to be implemented as well

• Report download functionality
• APK support
• Provide example files for trialing software
• Automatically split up larger videos into shorter videos and screenshots

Contributing

Contributions are most welcome!

Before opening a PR:

• Make sure that there isn't an active PR already open which makes the same changes
• Make sure to check if there are issues related to your PR
• Follow our project wide guidlines
• Make sure that your branch name follows {type}/{name}/{description}
• Follow the PR template