[Question] Is there a way to capture screenshot at the end of each test.step?

[s-sivasubramaniam]

I understand playwright captures screenshot at the end of each test if we keep "screenshot: on" in playwright.config.js. But is there a way to do it at the end of each test.step as well and include it in html reporter? as my project requires to capture screenshot after each step. I know it can be achieved with testInfo.attach which means i have to include the piece of code "await testInfo.attach('screenshot', { body: await page.screenshot(), contentType: 'image/png' });" in each test.step and but is there a simpler way to do it?

[aslushnikov]

@s-sivasubramaniam no, there's no way for now. Let me marked this as a feature request. If it becomes popular, we'll prioritize it accordingly!

[moshikd]

this will be a great feature. can it be implemented soon?

[aslushnikov]

@moshikd please upvote the issue to bump it's priority. The more upvotes something has, the more we look onto it!

[cheshi-mantu]

many PW / allure report users are asking for this feature gents

[vigneshwarselvaraj92]

this will be great feature

[Ash2803]

gents

++++ waiting for this feature

[soofianazneen]

++

[aidenstern]

Would really love this feature, have a ton of "testInfo.attach"on each test.step

[etwood24]

Yes please - would be great to have this as a feature without needing testInfo.attach scatterd throughout the code.

[jonasclaes]

If this existed in the code, I would use it immediately!

I think something like a test.beforeEachStep and a test.afterEachStep function would be really useful. This would allow for other things to be called as well.

[ramsar7002]

This will be a great feature

[nizzel55]

Any news about this feature?

[vitalets]

Until this is implemented I use the following custom fixture step:

import { test as base, expect } from '@playwright/test';

type StepFn = (title: string, fn: () => unknown) => unknown;

const test = base.extend<{step: StepFn}>({
  step: async ({ page }, use, testInfo) => {
    await use(async (title, fn) => {
      await test.step(title, async () => {
        try {
          await fn();
        } finally {
          await testInfo.attach(`screenshot after step "${title}"`, { 
            body: await page.screenshot(), 
            contentType: 'image/png' 
          }); 
        }
      });
    });
  }
});

Usage in test:

  test('Check title', async ({ page, step }) => {
    await step('I open url', async () => {
       await page.goto('https://playwright.dev');
    });
    await step('I click link', async () => {
      await page.getByRole('link', { name: 'Get started' }).click();
    });
    await step('I check title', async () => {
      await expect(page).toHaveTitle('Installation | Playwright');
    })
  });

Steps in HTML report:


Screenshots in HTML report:


[rakhmatullov]

• for the test step screenshotting feature to be added so that screenshots can be available in the report after each test step.

[ardikun1412]

+++

[abautu]

+1