CTFLOW

User guide

• Please install vscode or sign up and use a codespace account
• Install Codeless Testing Flow extension for your local vscode or codespace
• Install Cypress because we use cypress testing engine
• Run command yarn cypress open (or npm if you're using npm) to have cypress folder at your project
• Add a .ctflow file in cypress/e2e folder
• Select the .ctflow file to see the drag and drop UI

Architecture

This is the architecture

The Webview UI is built by React and Vite as an UI component for VSCode extension. All testers interaction on the Webview UI will be recorded and translated into cypress test cases(javascript code) by our compiler. The test cases then are run by cypress on top of the user's app.

Tech stack (Vscode + React + Vite)

The project ultilize fast bundling speed of Vite and familiarity of React to quickly bring about the intuitive UI for the user.

Documentation

For a deeper dive into project and its foundation example, read the guides below.

• Extension structure
• Extension commands
• Extension development cycle

Run The Code

# Navigate into sample directory
cd dnd-ui

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

Once the sample is open inside VS Code you can run the extension by doing the following:

1. Press F5 to open a new Extension Development Host window
2. Inside the host window, open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and select .ctflow files to see the UI

Backed & Supported by