GitHub - codeceptjs/ui: Web UI for CodeceptJS (original) (raw)

CodeceptUI

A comprehensive, modern, interactive test development environment for CodeceptJS.

Professional IDE-like experience for CodeceptJS test development with comprehensive Monaco Editor integration, real-time file watching, dynamic browser management, and enterprise-grade network compatibility.

codeceptui

📹 Feature Demonstrations

🏠 Complete Test Management Interface

CodeceptUI Demo Interface Complete test management interface with TodoMVC examples showing test statistics, file organization, and real-time status updates

✨ IDE-like Split View with Test Preview

CodeceptUI IDE Split View Professional IDE-like split view showing test list on the left and selected test preview on the right - perfect for code review and test exploration

💻 Monaco Editor with Modern CodeceptJS Support

CodeceptUI Monaco Editor Full-featured Monaco Editor with syntax highlighting, modern async/await CodeceptJS patterns, and comprehensive how-to-guide

🔍 Intelligent Autocomplete & IntelliSense

CodeceptUI Monaco Autocomplete Smart autocomplete with CodeceptJS method suggestions and real-time syntax validation

📊 Real-time Test Execution Results

CodeceptUI Test Results Live test execution with detailed results, timing information, error reporting, and updated statistics

⚙️ Advanced Configuration & Settings

CodeceptUI Settings Comprehensive settings panel with file watching, browser modes, helper configuration, and editor integration

📱 Mobile-Responsive Design

CodeceptUI Mobile Interface Fully responsive mobile interface that adapts beautifully to tablets and smartphones while maintaining all functionality

🎬 What You Can See in Action

The demonstrations above showcase real CodeceptUI features running live with the included TodoMVC test examples:

✅ Test Management: Complete test suite organization with 17 tests across multiple files
✅ Real-time Statistics: Live tracking of successful, failed, skipped, and pending tests
✅ IDE Split View: Professional dual-pane layout for test browsing and code preview
✅ Monaco Editor: Full-featured code editor with syntax highlighting and autocomplete
✅ Live Execution: Real-time test running with detailed error reporting and timing
✅ Advanced Settings: File watching, browser configuration, and helper management
✅ Mobile Responsive: Fully responsive design that works perfectly on all screen sizes
✅ Modern UI: Clean, professional interface with excellent user experience

🔥 Major New Features

💻 Professional Monaco Code Editor Integration

Full-featured in-browser code editing with modern CodeceptJS 3.x support

Test Editor Original Monaco Editor integration

Monaco Editor Demo Live Monaco Editor with modern async/await syntax highlighting and intelligent code completion

Key Editor Features:

Supported Modern CodeceptJS Patterns:

// Modern async/await syntax with full autocomplete support Scenario('login with modern CodeceptJS', async ({ I }) => { await I.amOnPage('/login'); await I.fillField('email', 'user@example.com'); await I.click('Login'); await I.waitForVisible('.dashboard'); await I.see('Welcome Dashboard'); });

// Data-driven testing support Data([ { user: 'admin', password: 'secret' }, { user: 'guest', password: 'guest123' } ]).Scenario('data-driven login test', async ({ I, current }) => { await I.amOnPage('/login'); await I.fillField('username', current.user); await I.fillField('password', current.password); });

// Modern hooks and configuration Before(async ({ I }) => { await I.amOnPage('/setup'); });

Scenario.only('focused test for debugging', async ({ I }) => { // Only this test will run });

🌐 Universal Network Compatibility

Enterprise-grade compatibility with modern development workflows

🔄 Real-time Development Features

File Watching

File Watching & Auto-refresh

Dynamic Runtime Mode Switching

Headless Mode Headless mode indicator and settings

Window Mode Window mode indicator and settings

📄 Enhanced Page Objects Management

Page Objects Page objects browser with syntax highlighting and source viewing

⚡ Performance & User Experience

Comprehensive Performance Optimizations:

Modern User Interface:

Page Objects Page objects browser and source viewer

Core Features

🎯 Test Execution & Management

💻 Professional Code Editing

🌐 Network & Deployment

🎨 Modern User Experience

🚀 Advanced Features

Code Editor API

Browser Management

Quickstart

Requires CodeceptJS 3 to be installed

Install CodeceptUI in a project where CodeceptJS is already used

npm i @codeceptjs/ui --save

Application Mode

Run CodeceptUI in application mode (recommended for development, local debug):

Uses codecept.conf.js config from the current directory.

If needed, provide a path to config file with --config option:

npx codecept run --config tests/codecept.conf.js

WebServer Mode

webserver mode

Run CodeceptUI as a web server (recommended for headless mode, remote debug):

Open http://localhost:3333 to see all tests and run them.

🔧 Technical Achievements & Issues Resolved

🎯 Comprehensive GitHub Issues Resolution

This version addresses 10 critical GitHub issues that were preventing CodeceptUI from working effectively with modern development workflows:

💻 Monaco Editor Architecture

// Professional autocomplete with modern CodeceptJS methods const suggestions = { playwright: [ 'I.amOnPage(url)', 'I.click(locator)', 'I.fillField(field, value)', 'I.waitForVisible(locator, sec)', 'I.grabTextFrom(locator)' ], structure: [ 'Scenario('name', async ({ I }) => {})', 'Before(async ({ I }) => {})', 'Data().Scenario(...)' ] };

🛡️ Enhanced Security & Reliability

⚡ Performance & Quality Assurance

Uses codecept.conf.js config from the current directory.

If needed, provide a path to config file with --config option:

npx codecept run --config tests/codecept.conf.js

Enhanced Port Configuration

CodeceptUI now supports flexible port configuration with both modern and legacy environment variables:

Modern environment variables (recommended)

export applicationPort=3000 export wsPort=4000 npx codecept-ui --app

Legacy environment variables (backward compatible)

export PORT=3000 export WS_PORT=4000
npx codecept-ui --app

Command line options (highest priority)

npx codecept-ui --app --port=3000 --wsPort=4000

Network Configuration Examples

CORS Configuration:

Allow custom origins

export CORS_ORIGIN="https://my-domain.com" npx codecept-ui

Reverse Proxy Support:

Nginx configuration example

location /codeceptui/ { proxy_pass http://localhost:3333/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }

Development

See CONTRIBUTING.md

Start CodeceptUI with debug output

CodeceptUI uses the debug package to output debug information. This is useful to troubleshoot problems or just to see what CodeceptUI is doing. To turn on debug information do

  # verbose: get all debug information
  DEBUG=codeceptjs:* npx codecept-ui 

  # just get debug output of one module
  DEBUG=codeceptjs:codeceptjs-factory npx codecept-ui

Credits

Contributors

Thanks all for the contributions!