Adding screenshots automatically to report

[Yevhenii-TA]

Hi @mmisty , I see in documentation this line "automatically adds videos / screenshots"
does it mean that screenshot will be added automatically to each step? Currently I have no automatically created screenshots for steps, but when I'm using cy.screenshot({ allureAttachToStep: true }); I'm getting 2 screenshots - 1 in cypress/screenshots folder and second one in /allure-results
In this case I see 2 attachments for each step, please see

Screenshot creation I added to a custom command for logging steps

Cypress.Commands.add('logStep', function (description: string, stepFunc: () => any) {
    cy.allure().startStep(description);
    //step function that will be executed
    stepFunc();
    cy.screenshot({ allureAttachToStep: true });
    cy.allure().endStep();
});

Could you please explain how automatic screenshots work? Maybe I missed something...
Thanks

[mmisty]

Hello, @Yevhenii-TA
From what I see on the screenshot it seems that you have something incorrectly setup
Is it possible by some chance that you registered plugin twice? I mean in support.ts or in e2e.ts

Could you attach your e2e.ts file (support file) so I can understand what's wrong

From plugin side it should be one screenshot in a step when you do one screenshot.

[Yevhenii-TA]

Hello, @mmisty
my support file is supportFile: './cypress/support/index.ts', in cypress.config.json
Here is index.ts

//// <reference types="cypress" />
import './commands'
import 'cypress-xpath';
import '@mmisty/cypress-allure-adapter/support';
import SlackNotification from "./utils/SlackNotification";
import {WebhookUrl} from "./types/types";


// counters for tests
let passedTests = 0;
let failedTests = 0;

// custom runner to handle Slack notifications
export function runSuite(suiteName: string, tests: any) {

    describe(suiteName, function () {
        beforeEach(() => {
            Cypress.on('uncaught:exception', (err, runnable) => {
                return false
            });
            cy.viewport(1920, 1080);
            cy.intercept({resourceType: /xhr|fetch/}, {log: false});
        });

        tests();

        afterEach(function () {
            if (this.currentTest.state === 'passed') {
                passedTests += 1; //local result
            } else if (this.currentTest.state === 'failed') {
                failedTests += 1; //local result
            }
            cy.clearLocalStorage();
        });

        // set tests() after "afterEach" hook to catch number of pass/fail
        // code runs in the order that defined in the source code

        after(function () {
            //create the summary message
            const message = `${suiteName} - ${SlackNotification.passRate(passedTests, failedTests)}
                           \n✅ Passed: *${passedTests}*, ❌ Failed: *${failedTests}*`;
            //send summary message to Slack test results channel
            SlackNotification.postToSlack(WebhookUrl.TEST_RESULT_CHANNEL, message);
            //clear test counters
            passedTests = 0;
            failedTests = 0;
        });
    })
}

cypress.config.ts

import { defineConfig } from "cypress";
import {configureAllureAdapterPlugins} from "@mmisty/cypress-allure-adapter/plugins";

export default defineConfig({
  e2e: {
    watchForFileChanges: false,
    experimentalMemoryManagement: true,
    defaultCommandTimeout: 20000,
    chromeWebSecurity: false,
    env: {
      allure: true,
      allureSkipCommands: 'logStep',
      allureSkipSteps: '"after each" hook*,"before each" hook*, "after all" hook*',
      allureLogCyCommands: false,
      allureCleanResults: true,
      allureResults: 'allure-results',
      specPattern: 'cypress/e2e/**/*.cy.ts',
      defaultEnv: process.env.CYPRESS_ENV || 'live',
      live: {
        test: "",
        test: ""
      },
      tech : {
        test: "",
        test: ""
      }
    },
    setupNodeEvents(on, config) {
      configureAllureAdapterPlugins(on, config);
      return config;
    },
    supportFile: './cypress/support/index.ts',
    //retries: 1,
    viewportHeight: 1080,
    viewportWidth: 1920,
    video: false,
    screenshotOnRunFailure: true,
    includeShadowDom: true
  },
});

and e2e.ts

// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
require('cypress-xpath');

nothing special, as I can see
Thank you for your reply

[mmisty]

I see that you are exporting a function from index.ts, which you better not doing sine all the things that are in index.ts will be duplicated if you try to import the function within your test

If you want to use this function better to create separate file and put it there.

also minor thing - e2e.ts file seems to be unused- you usually need to have one e2e.ts or index.ts and refer it from your cypress config file.

[Yevhenii-TA]

Thank you @mmisty , will make changes and drop message here

[Yevhenii-TA]

Hi again, @mmisty
You're right about duplication of "actions" because of exporting function
I extracted all stuff to a separate file and imported into index.ts
So the result is:

• no duplications of screenshots;
• no extra hooks in Tear Down section of report;
• execution speed of tests increased!!!
  Thank you for your time and answers