# CodeceptUI

An interactive, graphical test runner for [CodeceptJS](https://codecept.io). 


![codeceptui](https://github.com/codecept-js/ui/raw/master/codecept-ui2.gif)

* Runs as Electron app or as a web server
* Headless & window mode supported
* Test write mode
* Interactive pause built-in
* Snapshots & Time travel
* Runs tests in CodeceptJS supported engines:
  * Playwright
  * Puppeteer
  * webdriverio
  * TestCafe

## Quickstart

**Requires [CodeceptJS 3](https://codecept.io) 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):

```
npx codecept-ui --app
```

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

![](https://github.com/codecept-js/ui/raw/master/codeceptui.gif)

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

```
npx codecept-ui
```

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


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
```


## Development

See [CONTRIBUTING.md](https://github.com/codecept-js/ui/blob/master/.github/CONTRIBUTING.md)


## Start CodeceptUI with debug output

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

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

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

# Credits

- Originally created by Stefan Huber @hubidu27
- Maintained my @davertmik
- Icons/Logos <a href="https://iconscout.com/icon/code-280" target="_blank">Code Icon</a> by <a href="https://iconscout.com/contributors/elegant-themes">Elegant Themes</a> on <a href="https://iconscout.com">Iconscout</a>

# Contributors

Thanks all for the contributions!

[//]: contributor-faces

<a href="https://github.com/hubidu"><img src="https://avatars2.githubusercontent.com/u/13134082?v=4" title="hubidu" width="80" height="80"></a><a href="https://github.com/DavertMik"><img src="https://avatars0.githubusercontent.com/u/220264?v=4" title="DavertMik" width="80" height="80"></a><a href="https://github.com/PeterNgTr"><img src="https://avatars0.githubusercontent.com/u/7845001?v=4" title="PeterNgTr" width="80" height="80"></a><a href="https://github.com/avinash360"><img src="https://avatars2.githubusercontent.com/u/11994986?v=4" title="avinash360" width="80" height="80"></a><a href="https://github.com/kaflan"><img src="https://avatars3.githubusercontent.com/u/3959504?v=4" title="kaflan" width="80" height="80"></a><a href="https://github.com/lukasf98"><img src="https://avatars2.githubusercontent.com/u/22434650?v=4" title="lukasf98" width="80" height="80"></a>

[//]: contributor-faces