gherkin-scenario-builder
gherkin-scenario-builder copied to clipboard
Chrome extension for generating Gherkin given/when/then scenarios interactively.
Gherkin Scenario Builder
This Chrome extension can record your behavior and automatically generate Gherkin-compatible given/when/then scenarios.
![screenshot](https://github.com/mpetrovich/gherkin-scenario-builder/raw/master/images/screenshot-1.png)
Example
Suppose we want to create a test scenario for unsuccessfully logging into a website. Simply start recording and perform the steps as a user would:
![example gif](https://github.com/mpetrovich/gherkin-scenario-builder/raw/master/images/example.gif)
This scenario will be automatically generated based on the actions above:
Given I am logged out
And I navigate to "login"
And I set "email" to "[email protected]"
And I set "password" to "the wrong password"
And I set "remember me" to "checked"
When I click "login button"
Then "login error message" should be visible
How it works
When recording, this Chrome extension listens to user input (typing, clicking, selecting, etc.) and page navigation and will automatically generate the appropriate given/when/then step for those actions.
Element names are extracted from special HTML attributes that must be present on each actionable element. For example, the email
, password
, and remember me
input elements from the previous example are identified by their corresponding data-test
HTML attributes:
<label>E-Mail Address</label>
<input name="email" type="email" data-test="email">
<label>Password</label>
<input name="password" type="password" data-test="password">
<label><input name="remember" type="checkbox" data-test="remember me"> Remember Me</label>
Page names are configured in the Chrome extension settings as a map of page names to URL paths. For example:
{
'login': '/login',
'home': '/home',
'projects': '/projects',
'a project': new RegExp('/projects/d+$'),
'create new project': '/projects/new',
}
All of these things are configurable. See later sections for more information.
Installation
Installation from the Chrome Web Store (recommended)
On the Chrome Web Store: Gherkin Scenario Builder
Manual installation
This option is useful if you want to fork this Git repository to make changes to the extension.
- Clone this Git repository
- Enable developer mode for Chrome extensions
- Click "Load unpacked" and select the cloned Git directory from the file browser
Configuration
Coming soon.
Usage
Turning on & off
This extension operates on a per-tab basis and is disabled until activated for a specific tab. Once activated for a tab, it will remain active across page navigation, refreshes, etc. until deactivated. To activate or deactivate the extension for the current tab, simply click the extension's icon in your Chrome toolbar:
![Gherkin Scenario Builder in the Chrome toolbar](https://github.com/mpetrovich/gherkin-scenario-builder/raw/master/images/chrome-toolbar.png)
Once activated, a floating panel will be visible in the lower right hand corner of the tab window:
![floating panel](https://github.com/mpetrovich/gherkin-scenario-builder/raw/master/images/empty-state.png)
The panel can be collapsed by clicking the collapse icon:
Adding steps
There are two ways of adding given/when/then scenario steps: automatically and manually.
Adding steps automatically
Steps can be automatically added by listening to your actions on the page. Click the "Record" button and perform the user actions that you want to have recorded as steps in the scenario.
Adding steps manually
Coming soon.