Screenshot for each test step is required.

[Amrishs94]

Should capture screenshot for each test step. Moreover, in the HTML report when a test step is clicked it should also show the captured screenshot for that test step.

Thanks in advance.

require screenshot.docx

[Amrishs94]

Could you please close this ticket.

Thanks,
Amrish

[igniteram]

Hi @Amrishs94 , Sorry for late reply due to work commitments.

Screenshot after each step is user specific requirement, some users prefer to take after scenario and only failed ones.

cucumberJS itself doesn't provide after or before steps hooks , you can refer the issue which is still open in the official cucumberjs repo - cucumber/cucumber-js#997

However there is workaround and a trick which can make use of - you can actually call screenshot method in each of the step definition after you have done your validations something like this -

When(/^I type "(.*?)"$/, async function(text) {
    await search.searchTextBox.sendKeys(text);
    // screenShot is a base-64 encoded PNG
    const screenShot = await browser.takeScreenshot();
    this.attach(screenShot, "image/png");
});

When(/^I click on search button$/, async function() {
    await browser.actions().sendKeys(protractor.Key.ENTER).perform();
    // screenShot is a base-64 encoded PNG
    const screenShot = await browser.takeScreenshot();
    this.attach(screenShot, "image/png");
});

Then(/^I click on google logo$/, async function() {
    await search.logo.click();
    // screenShot is a base-64 encoded PNG
    const screenShot = await browser.takeScreenshot();
    this.attach(screenShot, "image/png");
});

you can write a helper function for takeScreenshot() and call it in each step definition.

I tried it out and it works magically 😄 I am attaching the report screens for your reference -

closing this issue for now !

[Amrishs94]

Ram,

Could you please share me code for the helper function for the takeScreenhshot() function.

Thanks,
Amrish

[gnaneswarreddy]

Hi Ram

Can you please provide Takescreenshot() function code if possible?

Thanks,
eswar

[FibreFoX]

@Amrishs94 @gnaneswarreddy that function is available by the webdriver itself ;)

[igniteram]

@FibreFoX exactly! thanks for putting out there :)

[PadalaSandeep]

I am getting error as TypeError: Cannot read property 'attach' of undefined when i define below code on to my step level:

const screenShot = await browser.takeScreenshot();
this.attach(screenShot, "image/png"); 

Any help?

[AnandDharmar]

@PadalaSandeep - if you are still waiting for the solution you can import the below and hopefully it should work fine
import {$, browser, By, ElementFinder, ExpectedConditions, protractor} from "protractor";

And for the people who asked about Takescreenshot() function its simple guys

Create a simple function like below in your base class

public async takeScreenshot(){
const screenShot = await browser.takeScreenshot();
this.attach(screenShot, "image/png");
}

and just call where ever you want (Wither step definitions or the pages ) by just calling the method

this.takeScreenshot(); simple it works , Thank you @igniteram for the solution

[lokeshchitturi]

for this.attach('text ') we are getting error message like this might be undefined