cucumber-electron
Runs Cucumber.js in an Electron renderer process. Scenarios have direct access to both a browser DOM and node.js libraries, so they are fast and easy to debug interactively.
Install
Both Electron and Cucumber.js need to be installed, they are peer dependencies. This gives you the option to choose the version you want to use:
npm install --save-dev electron @cucumber/cucumber @cucumber/electron
Usage
Cucumber-electron is a wrapper around Cucumber.js, supporting the same features and command-line options. You should be able to use it on your project without any changes.
Run cucumber-electron like it was Cucumber.js, for example:
npx cucumber-electron ./features/your.feature:123
API
Cucumber Electron provides an API that you can use in your step definitions or hooks.
App Elements
An app element is a DOM element where you can mount the application or component under test.
const { AppElements } = require('@cucumber/cucumber-electron')
Before(function () {
this.appElements = new AppElements()
})
Given('{word} has an app element', function (name) {
const appElement = this.appElements.create(document, name)
// Mount a React Component
ReactDOM.render(<MyComponent />, appElement)
// Mount a Vue component
new Vue({ el: appElement })
// Vanilla DOM
appElement.innerHTML = '<h1>Hello World</h1>'
})
After(function () {
if (!process.env.CUCUMBER_ELECTRON_KEEP_APP_ELEMENTS) {
// Destroy all app elements after each scenario
this.appElements.destroyAll()
}
})
In interactive debugging mode this will look something like this:
See the app-elements example for more details.
You can run it like this:
CUCUMBER_ELECTRON_KEEP_APP_ELEMENTS=1 ./bin/cucumber-electron.js examples/app-elements --interactive
Interactive Debugging
The --interactive
(or -i
) command line switch shows a browser window with chrome dev tools and keeps
the window open after all features have finished running.
The interactive debugger will halt execution on any debugger
statements, or breakpoints you have set in chrome dev tools.
In interactive mode you can re-run all your scenarios by pressing CMD-R
(MacOS) or CTRL-R
(Windows/Linux)
while the browser window has focus.
Custom Stylesheet
You can add a custom stylesheet to the DOM with the --stylesheet [PATH]
option.