wdio-json-steps-reporter v5.0.1
WDIO JSON Steps Reporter
A WebdriverIO plugin. Report results in json format with steps and screenshot support. This project was derived from the 'wdio-json-reporter' found here
Example Screenshots
Setup
Installation
NPM
npm install wdio-json-steps-reporter --save-dev
Configuration
Require the reporter in the wdio configuration file.
const StepsReporter = require("wdio-json-steps-reporter")
Use the reporter
Configure wdio to use the required StepsReporter as a reporter.
- @param {string} outputDir : The directory where the results will be logged.
- @param {string} testDir : The root directory where tests are stored
- @param {string | number} build : The version, jenkins build or name that the results will be stored under
reporters: [
[StepsReporter.reporter, {
outputDir: "./results/",
testDir: "./test/",
build: 17
}]
]
Overwrite/Add custom commands to browser and element
Overwrite and add the commands from the required StepsReporter.
before: async function (capabilities, specs) {
await browser.overwriteCommand("saveScreenshot", StepsReporter.saveScreenshot)
await browser.addCommand("highlight", StepsReporter.highlight, true)
await browser.addCommand("removeHighlight", StepsReporter.removeHighlight, true)
await browser.addCommand("removeHighlights", StepsReporter.removeHighlights)
}
Merge results to single file
Finally on the completion of test execution use the required mergeResults function to generate a single JSON file which can be utilized by the react report dashboard. Alternatively you may wish to call this from a script as part of npm test. It is recommended to supply a unique value to ensure historic test records are kept especially when utilizing the report dashboard to get the full benefits of it's features
- @param {string} reportDir : The report directory where the html report will get generated to.
- @param {string} resultsDir : The results directory where the results were logged by the StepsReporter.
- @param {string} testDir : The root directory where tests are stored
- @param {string | number} build : The version, jenkins build or name that the html report will be generated for
onComplete: async function(exitCode, config, capabilities, results) {
StepsReporter.generateWebReport({
reportDir: "./report/",
resultsDir: "./results/",
testDir: "./test/",
build: 17
})
}
Host the report on localhost
node report/server.js
Usage
Log a step
Import the step function to be used during tests and page object actions
- @param {StepOptions} stepOptions : The options, can be used to override the page object actions
- @param {string} description : The description explaining what is being done in the task.
- @param {string} expectation : The expected result of the task.
- @param {string} actual : The actual result if the task passes.
- @param {Function} task : The actions to be completed to determine if the test step passes or fails
import { step } from "wdio-json-steps-reporter"
...
before(async function() {
await step({createLog: true, takeScreenshot: true}, "Navigate to the Home page", "Home page should load", "The Home page loaded", async function() {
await browser.url("https://webdriver.io")
await page.waitUntilLoaded()
})
})
it("should have the correct title", async function() {
await page.verifyPageTitle() //defaults = {createStep: true, takeScreenshot: false}
await page.verifyPageTitle({createStep: false) // no log will be generated in the report, the tasks will still be executed
await page.verifyPageTitle({takeScreenshot: true, highlightElement: $(".hero__subtitle")}) //fullpage screenshot, highlighting the title element
await page.verifyPageTitle({customDescription: "Override the description", customExpectation: "Override the expectation"}))
})
async verifyPageTitle(stepOptions?: StepOptions): Promise<Step> {
return await step(stepOptions,
"Verify the page title is correct",
"The page title should be correct",
"The page title was correct", async function() {
const title = await $(".hero__subtitle")
expect(title).to.equal("Next-gen browser and mobile automation test framework for Node.js")
})
}
Step Options
The options can be used to override any default page object actions steps that have been created. Defaults = {createStep: true, takeScreenshot: false}. Additionally, an element can be passed in to be highlighted in the screenshot.
type StepOptions = {
createLog: boolean;
takeScreenshot: boolean;
highlightElement?: ChainablePromiseElement<Promise<WebdriverIO.Element>>;
customDescription?: string;
customExpectation?: string;
customActual?: string;
};
For more information on WebdriverIO see the homepage.