[Feature] Add ability of taking screenshot after test.step is finished

Would great to have a way of tacking screenshot when the test.step function is finished, so that it is visible on Allure report. Maybe some optional parameter, or maybe some step object passed to the callback that have screenshot function, like

test.step('do stuff',() => {
  step.screenshot('some name here')
}, {screenshot: true});

or

test.step('do stuff', step => {
  step.screenshot('some name here')
});

[tymfear]

Also came with the following fixture for taking screenshots (maybe someone will find it useful)

export interface ScreenshotFixture {
  takeScreenshot: (name: string) => Promise<void>;
}

const test: TestType<PlaywrightTestArgs & ScreenshotFixture, PlaywrightWorkerArgs & PlaywrightWorkerOptions> =
  base.extend<ScreenshotFixture>({
    takeScreenshot: ({ page }, use, testInfo) => {
      const takeScreenshotFn = async (name: string) => {
        const path = testInfo.outputPath(`${name}.png`);

        await page.screenshot({ path });
        
        testInfo.attachments.push({
          name,
          path,
          contentType: 'image/png',
        });
      };

      return use(takeScreenshotFn);
    },
  });

export default test;

and usage

test('take screenshot', async ({
   takeScreenshot,
  }: ScreenshotFixture) => {
    await takeScreenshot('some name goes here');
    await test.step('Take screenshot in step', async () => {
      await takeScreenshot('some name goes here too');
    });
  });

[tymfear]

Actually I figured it out. You can use testInfo object to do that. Kind of

test.step('do stuff' => {
  const path = testInfo.outputPath('screenshot.png');
  await page.screenshot({ path });
  testInfo.attachments.push({ name: 'step name', path, contentType: 'image/png' });
});

But it attaches screenshot to the overall result (in Allure at least) so could be a bit more convenient to be able to attach to the step. Also would be a bit less of code if the testInfo object was available in the step callback, otherwise in custom fixtures I have to provide test info as a fixture. My fixture example

const test = base.extend<{
  securityEventsPage: SecurityEventsPage;
  userData: Credentials & AccountUuid;
  testInfo: TestInfo;
}>({
  userData: {} as Credentials & AccountUuid,
  
  testInfo: ({}, use, testInfo) => use(testInfo),
  
  page: ({ page }, use) => use(page),

  securityEventsPage: async ({ page, userData }, use) => {
    const loginPage = await LoginPage.visit(page);
    await loginPage.login(userData);

    const securityEventsPage = await SecurityEventsPage.visit(page, userData.accountUuid);

    await use(securityEventsPage);
  },
});

export default test;

and test

test(
    'some title',
    async ({
      securityEventsPage,
      testInfo,
      page,
    }: {
      securityEventsPage: SecurityEventsPage;
      testInfo: TestInfo;
      page: Page;
    }) => {

      await test.step('Verify if security events page is displayed', async () => {
        await securityEventsPage.isDisplayed();
       
       const path = testInfo.outputPath('screenshot.png');
        await page.screenshot({ path });
        testInfo.attachments.push({
          name: 'Verify if security events page is displayed',
          path,
          contentType: 'image/png',
        });
      });

    },
  );