UI Format Option
You can define the UI reporting format option for the cucumberjs-browser tool as such:
$ cucumberjs-browser -f ui
The ui formatter will modify the DOM as the browser-based CucumberJS testrunner steps through each feature.
The following is an example of what the DOM may look like with its default styling:
You can provide custom styling for the UI formatter by overriding the defined CSS in the template for the cucumberjs-browser tool.
It is recommended that you provide your own custom template when using the cucumberjs-browser cli tool (doing so using the --tmpl option describe in a separate document). You can copy the default template and modify the CSS rules directly or provide a custom stylesheet after their declaration.
The class styles are added to elements that are created and placed on the DOM at runtime based on the progression of the testrunner. The naming of the CSS rules are, hopefully, self explanatory as to their corresponding element. The available style class names for the major pieces of a spec are:
- cukes-container
- cuke-feature
- cuke-scenario
- cuke-step
It should be noted that each element is a child of the previous - meaning, the cuke-feature element has n-number of cuke-scenario child nodes ad likewise for the relationship between cuke-scenario to cuke-step.
There are additional rules for the result of a step in test that available for customization as well:
- cuke-step-pending
- cuke-step-skipped
- cuke-step-pass
- cuke-step-fail
- cuke-fail-description